/* Banner */

.home-banner .ant-scroll-down {
    right: unset;
    left: 50%;
    transform: translateX(-50%);
}

.home-banner .ph-caption-title {
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.70);
    font-size: clamp(1.875rem, 3.38vw, 4.0625rem);
    font-weight: 400;
}
/*
.home-banner [class*="ph-image-cover-"] .ph-image-inner::before {
    background: linear-gradient(113deg, rgba(207, 39, 41, 0.70) 3.13%, rgba(255, 114, 114, 0.30) 49.89%, rgba(207, 39, 41, 0.70) 96.65%)
} */
.home-banner [class*="ph-image-cover-"] .ph-image-inner::before {
    background:
        linear-gradient(100deg, rgba(60,28,4,.75) 0%, rgba(90,52,8,.55) 35%, rgba(140,90,20,.18) 65%, transparent 100%),
        linear-gradient(to top, rgba(60,28,4,.65) 0%, rgba(100,60,10,.2) 30%, transparent 55%);
    opacity: 1;
}
.home-banner .page-header-inner {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 44%;
    left: 0;
    max-width: 100%;
    transform: translateY(-50%);
}

/* Intro */

.home-intro .ant-heading-subtitle {
    color: var(--ant-secondary-color);
    font-weight: 700;
    padding-left: .625rem;
    border-left: .625rem solid;
}

@media (max-width: 480px) {
    .home-intro .ant-heading-subtitle {
        border-left: 5px solid;
    }
}

.home-intro .ant-section-btn {
    margin-top: 1.25rem;
}

.ant-intro-item {
    display: block;
    position: relative;
    overflow: hidden;
    transition: transform .3s;
}

.ant-intro-item:hover {
    transform: translateY(-1rem)
}

.aini-image {
    display: block;
    position: relative;
    padding-top: 195%;
}

.aini-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: all 1s cubic-bezier(.165, .84, .44, 1);
}

.ant-intro-item:hover .acoi-image img {
    transform: scale(1.05);
}

.aini-info {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 0;
    background: rgba(185, 142, 40, 0.85);
}

.aini-info .overlay-1,
.aini-info .overlay-2 {
    position: absolute;
    opacity: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 0;
    pointer-events: none;
}

.aini-info .overlay-1 {
    opacity: .5;
    top: 0;
    left: 0;
    -webkit-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
}

.aini-info .overlay-2 {
    bottom: -.5rem;
    right: 0;
    -webkit-transform: translate(100%, 100%);
    -ms-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
}

.ant-intro-item:hover .aini-info .overlay-1,
.ant-intro-item:hover .aini-info .overlay-2 {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.aini-info-title {
    font-size: 1.125rem;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    margin: .5rem 0 0;
}

.aini-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.aini-info-icon svg {
    width: 3.75rem;
    height: 3.75rem;
    color: currentColor;
}

.ant-intro-item.ho-tro-khach-hang .aini-info-icon svg {
    width: 5.125rem;
}

/* Featured Item */

.afei-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ant-main-color);
}

.afei-icon svg {
    width: 3.125rem;
    height: 3.125rem;
    color: currentColor;
}

.afei-title {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--ant-secondary-color);
    margin: 1.25rem 0 0;
}

/* Jobs */

.ant-ajax-content-row.header.filter {
    border-bottom: 1px solid var(--ant-border-color);
}

.ant-ajax-nav {
    --ant-col-gap: 2.5px;
}

.ant-ajax-filter-item .ant-btn {
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    height: 3.75rem;
    background: linear-gradient(90deg, #233D3C 0%, rgba(35, 61, 60, 0.85) 100%);
}

.ant-ajax-filter-item .ant-btn:hover,
.ant-ajax-filter-item .ant-btn.active {
    background: linear-gradient(95deg, #E31E24 -0.46%, rgba(255, 56, 62, 0.80) 100.14%);
}

.ant-ajax-filter-item .ant-btn.loading {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.ant-ajax-filter-item .ant-btn.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    margin-top: -0.75em;
    margin-left: -0.75em;
    border: 2px solid var(--ant-border-color);
    border-top: 2px solid var(--ant-main-color);
    border-radius: 50%;
    animation: ant-spinner 0.7s linear infinite;
    z-index: 2;
    background: transparent;
    pointer-events: none;
}

@keyframes ant-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ant-ajax-content {
    border: 1px solid var(--ant-border-color);
}

.ant-job-item {
    position: relative;
    padding: 1.125rem 1.25rem;
}

.ant-job-item .ant-row-gap {
    row-gap: .5rem;
}

.ajoi-title .ant-badge i {
    font-style: normal;
    animation: loadingText 1.2s infinite linear;
}

.ajoi-title .ant-badge i:nth-child(2) { animation-delay: 0.3s; }
.ajoi-title .ant-badge i:nth-child(3) { animation-delay: 0.6s; }

@keyframes loadingText {
    from { opacity: 0; color: #E31E24; }
    to { opacity: 1; color: #E31E24; }
}

@media (min-width: 1025px) {
    .ant-job-item .ant-col-7,
    .ant-job-item .ant-col-md-7 {
        -ms-flex: 0 0 49%;
        flex: 0 0 49%;
        max-width: 49%;
    }
    .ant-job-item .ant-col-2,
    .ant-job-item .ant-col-md-2 {
        -ms-flex: 0 0 22%;
        flex: 0 0 22%;
        max-width: 22%;
    }
    .ant-job-item .ant-col-1,
    .ant-job-item .ant-col-md-1 {
        -ms-flex: 0 0 7%;
        flex: 0 0 7%;
        max-width: 7%;
    }
    .ant-job-item .ant-col-3 {
        -ms-flex: 0 0 29%;
        flex: 0 0 29%;
        max-width: 29%;
    }
}

.ant-ajax-content-row.header .ant-job-item select {
    color: var(--ant-main-color);
    height: auto;
    border: none;
    background-position: 100% center;
}

.ant-ajax-content-row.header .easy-select .es-current { border: none !important }
.ant-ajax-content-row.header .es-current .es-option {
    color: var(--ant-main-color);
    padding: 0 30px 0 0;
}
.ant-ajax-content-row.header .es-current .es-option:after {
    right: 0;
    color: var(--ant-text-color);
}
.ant-ajax-content-row.header .es-search-input {
    border: 1px solid var(--ant-border-color) !important;
    height: 32px;
    font-size: 14px;
    font-family: var(--ant-body-font) !important;
}

.ajoi-title { color: var(--ant-text-color); }
.ant-ajax-content-row.list .ant-job-item { border-top: 1px solid var(--ant-border-color); }

.ajoi-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ajoi-info-item svg {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ant-main-color);
}

.ant-ajax-more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ant-border-color);
}
.ant-ajax-more .ant-btn { height: 2.5rem; }

.jobs-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jobs-pagination li { display: inline-block; }
.jobs-pagination .page-btn {
    background: #fff;
    font-family: var(--ant-body-font);
    color: var(--ant-secondary-color);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 99rem;
    padding: 0;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--ant-secondary-color);
}
.jobs-pagination .page-btn.active,
.jobs-pagination .page-btn:focus {
    background: var(--ant-secondary-color);
    color: #fff;
}
.jobs-pagination .page-dots {
    padding: 0.25em 0.5em;
    color: #666;
    display: inline-block;
}

.jobs-list.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}
.jobs-list.loading:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem 0 0 -1.5rem;
    border: 2px solid #ccc;
    border-top: 2px solid var(--ant-main-color);
    border-radius: 50%;
    animation: jobs-list-spinner 0.8s linear infinite;
    z-index: 100;
}
@keyframes jobs-list-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Job Detail */
.ant-job-detail-header,
.ant-job-detail-content {
    border: 1px solid var(--ant-border-color);
    padding: 1.875rem 2rem;
    margin: 0 0 2rem
}
.ajdh-title {
    font-size: clamp(1.375rem, 1.45vw, 1.75rem);
    color: var(--ant-secondary-color);
    margin: 0 0 1.5rem;
}
.ajdh-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ant-secondary-color);
}
.ajdh-item-icon {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: rgba(227, 30, 36, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ant-main-color);
}
@media (max-width: 480px) {
    .ajdh-item { align-items: flex-start; }
    .ajdh-item-icon { width: 3rem; height: 3rem; }
}
.ajdh-item-info p { margin: 0; }

/* Field */
@media (max-width: 1280px) and (min-width: 1025px) {
    .home-culture .bli-title { font-size: 1.125rem; }
    .afei-title { font-size: 0.75rem; }
}

.ant-field-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #F0F3F5;
}
.afii-image-wrap {
    flex: 0 0 auto;
    width: 100%;
    position: relative;
    display: block;
}
.afii-image-wrap .overlay-1,
.afii-image-wrap .overlay-2 {
    position: absolute;
    opacity: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 1;
    pointer-events: none;
}
.afii-image-wrap .overlay-1 {
    top: 0;
    left: 0;
    -webkit-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
}
.afii-image-wrap .overlay-2 {
    bottom: 0;
    right: 0;
    -webkit-transform: translate(100%, 100%);
    -ms-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
}
.ant-field-item:hover .afii-image-wrap .overlay-1,
.ant-field-item:hover .afii-image-wrap .overlay-2 {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.afii-image {
    display: block;
    position: relative;
    padding-top: 70%;
}
.afii-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}
.afii-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.ant-field-item:hover .afii-image::after {
  background: linear-gradient(0deg, rgba(185, 142, 40, 0.50) 0%, rgba(185, 142, 40, 0.50) 100%);
}
.ant-field-item:hover .afii-image img { transform: scale(1.05); }
.afii-info {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 2rem;
    text-align: center;
}
.afii-info-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}
.home-field2 .afii-info { padding: 0 3rem; }
.home-field2 .afii-info-title { font-size: 1.375rem; font-weight: 600; }

/* Certi */
.home-certi .ant-logo-wall-item:before { padding-bottom: 80%; }
.home-certi .ant-lv-item-inner { flex-direction: column; gap: 0.625rem; text-align: center; }
.home-certi .ant-lv-item-inner img { max-height: 5.25rem; }
.home-certi .ant-logo-wall-title { font-size: 0.875rem; font-weight: 600; color: var(--ant-text-color); }
@media (max-width: 1630px) and (min-width: 1280px) {
    .home-certi .ant-lv-item-inner img { max-height: 4.5rem; }
}
@media (max-width: 1280px) and (min-width: 1025px) {
    .home-certi .ant-lv-item-inner img { max-height: 3.5rem; }
}
@media (max-width: 480px) {
    .home-certi .ant-lv-item-inner img { max-height: 4.5rem; }
}
.ant-certi-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 3.125rem 0 0;
}
@media (max-width: 991px) {
    .ant-certi-bottom { margin: 2.5rem 0 0; }
}
.ant-certi-rt { max-width: 17.375rem; display: flex; justify-content: center; }
.ant-certi-title { font-size: 1rem; font-weight: 600; color: var(--ant-secondary-color); }
.home-certi .ant-field-item { border-radius: 1rem; }

/* Advise */
.home-advise::before {
    position: absolute;
    display: block;
    content: "";
    top: -1px; left: -1px; bottom: -1px; right: -1px;
    background-color: #0000004d;
    opacity: 1;
}
@media (max-width: 480px) {
    .home-advise { background-attachment: initial !important; }
}

/* News */
.home-news .ant-heading-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0;
}
.home-news .ant-heading-nav ul li:not(:last-child) a {
    padding-right: 1rem; margin-right: 1rem;
    border-right: 1px solid #CCC;
}
.home-news .ant-heading-nav ul li a { font-size: 1rem; font-weight: 500; color: var(--ant-text-color); }
.home-news .ant-heading-nav ul li a:hover { color: var(--ant-main-color); }
.bli-news-featured.bli-image-cropped .bli-image { padding-bottom: 80%; }
.bli-news-featured.bli-image-cropped .bli-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    color: #fff; background: #C9A334;
}
.bli-news-featured.bli-image-cropped .bli-desc,
.bli-news-featured.bli-image-cropped .bli-more { display: none; }
.bli-news-featured.bli-image-cropped .bli-title { font-size: 1.375rem; color: #fff !important; }
.bli-news.bli-list {
    display: flex; flex-direction: column;
    gap: 1.25rem; justify-content: space-between;
}
.bli-news.bli-list .blog-list-item { margin-bottom: 0; }
@media (min-width: 1025px) {
    .bli-news.bli-list.bli-image-cropped .bli-image { padding-bottom: 60%; }
}
.bli-news.bli-list .bli-title { min-height: auto; }
.bli-news.bli-list .bli-more-wrap { display: flex; justify-content: flex-end; margin: 1rem 0 0; }
.bli-news.bli-list .bli-more { padding-top: .5rem; border-top: 1px solid var(--ant-secondary-color); }
@media (max-width: 1280px) {
    .bli-news.bli-list .bli-more-wrap { display: none; }
}

/* Culture */
.home-culture .bli-info { padding: 1.5rem 3rem; }
.home-culture .bli-title {
    font-size: 1.375rem; color: var(--ant-main-color);
    text-transform: uppercase; margin: 0 0 1.25rem; min-height: auto;
}
.home-culture .bli-image-cropped .bli-image { padding-bottom: 66.67%; }

@media (max-width: 991px) {
    .aini-info-icon svg { height: 2.5rem; }
    .ant-ajax-content-row.header { display: none; }
    .ant-ajax-filter-item .ant-btn-inner { line-height: normal; }
}

@media (max-width: 480px) {
    .afei-icon svg { width: 2.5rem; height: 2.5rem; }
    .aini-info-icon svg { height: 2.5rem; }
    .afei-title, .aini-info-title { font-size: 14px; }
    .ant-ajax-filter-item .ant-btn { font-size: 1rem; height: 2.75rem; }
    .ant-job-detail-header, .ant-job-detail-content { border: 0; padding: 0; margin: 0 0 2rem; }
    .ant-job-item { padding: 15px 10px; }
    .ant-ajax-more { flex-direction: column; gap: 1rem; justify-content: center; }
}


/* Giới hạn banner vừa màn hình */
/* Banner vừa màn hình */
#page-header.home-banner {
    height: calc(100vw * 5 / 12);
    max-height: 100vh;
    overflow: hidden;
}
#page-header.home-banner .ant-content-slider,
#page-header.home-banner .swiper,
#page-header.home-banner .swiper-slide,
#page-header.home-banner .ant-content-slider-item {
    height: 100% !important;
    max-height: inherit !important;
}
#page-header.home-banner .ant-cs-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


.home-banner .ph-image-inner::before {
    background:
        linear-gradient(100deg, rgba(60,28,4,.75) 0%, rgba(90,52,8,.55) 35%, rgba(140,90,20,.18) 65%, transparent 100%),
        linear-gradient(to top, rgba(60,28,4,.65) 0%, rgba(100,60,10,.2) 30%, transparent 55%) !important;
}

/* Fix slide trắng khi chạy */

#page-header.home-banner .bw-slide-bg {
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================
   CHO THUÊ MẶT BẰNG - BW BUILDING
   ========================================== */

/* Bộ lọc filter */
.ant-job-filter {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--ant-border-color);
    background: #fff;
}

.ant-filter-select {
    width: 100%;
    height: 3rem;
    padding: 0 2rem 0 1rem;
    border: 1px solid var(--ant-border-color);
    background-color: #fff;
    color: var(--ant-main-color);
    font-family: var(--ant-body-font);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z' fill='%23C9A227'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    background-size: 0.75rem;
    transition: border-color .3s;
}

.ant-filter-select:focus {
    outline: none;
    border-color: var(--ant-main-color);
}

/* Header bảng danh sách */
.ant-job-header {
    background: var(--ant-secondary-color);
    color: #fff;
}

.ant-job-header strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Job item trong danh sách */
#cho-thue-list .ant-job-item {
    border-top: 1px solid var(--ant-border-color);
    transition: background-color .2s;
}

#cho-thue-list .ant-job-item:not(.ant-job-header):hover {
    background-color: rgba(201, 162, 39, 0.05);
}

#cho-thue-list .ant-job-item .ajoi-title {
    font-weight: 600;
    color: var(--ant-secondary-color);
    text-transform: uppercase;
    transition: color .2s;
}

#cho-thue-list .ant-job-item .ajoi-title:hover {
    color: var(--ant-main-color);
}

#cho-thue-list .ajoi-info-item {
    color: var(--ant-main-color);
    font-weight: 600;
}

/* Wrapper bảng */
#cho-thue-list {
    border: 1px solid var(--ant-border-color);
    margin-top: 0 !important;
}

/* Page header subtitle màu vàng */
.ph-no-image .ph-caption-subtitle {
    color: var(--ant-main-color) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .ant-job-filter .ant-row {
        row-gap: 0.75rem;
    }

    .ant-filter-select {
        font-size: 0.9rem;
    }
}

<?php
/**
 * Home - Contact BW Building - Warm Luxury Style
 */
defined('ABSPATH') || exit;
$hotline = get_option('bw_hotline', '0908.428.888');
$address = get_option('bw_address', '15 Võ Văn Kiệt, P.Bình Phú, Q.8, TP.HCM');
$nonce   = wp_create_nonce('bw_nonce');
$ajax    = admin_url('admin-ajax.php');
$areas_raw   = get_option('bw_areas', "40 – 100 m²\n100 – 200 m²\n200 – 400 m²\nToàn sàn ~400 m²");
$floors_raw  = get_option('bw_floors_list', "Tầng 3\nTầng 4\nTầng 7\nTầng 8\nTầng 9 – 11");
$areas       = array_filter(array_map('trim', explode("\n", $areas_raw)));
$floors_list = array_filter(array_map('trim', explode("\n", $floors_raw)));
?>
<section class="ant-section home-bw-contact">
    <div class="hbc-inner">
        <div class="hbc-left ant-anim-fadeinup">
            <div class="hbc-tag">— LIÊN HỆ —</div>
            <h2 class="hbc-title">Nhận Báo Giá &amp;<br>Lịch Hẹn Khảo Sát</h2>
            <div class="hbc-divider"></div>
            <p class="hbc-desc">Một văn phòng tốt là nền tảng khẳng định uy tín thương hiệu doanh nghiệp. Liên hệ ngay để được tư vấn miễn phí.</p>
            <div class="hbc-details">
                <div class="hbc-detail">
                    <div class="hbc-detail-icon">📞</div>
                    <div>
                        <div class="hbc-detail-label">HOTLINE TƯ VẤN</div>
                        <a href="tel:<?php echo esc_attr(preg_replace('/\D/','',$hotline)); ?>" class="hbc-detail-value"><?php echo esc_html($hotline); ?></a>
                    </div>
                </div>
                <div class="hbc-detail">
                    <div class="hbc-detail-icon">📍</div>
                    <div>
                        <div class="hbc-detail-label">ĐỊA CHỈ</div>
                        <div class="hbc-detail-value-dark"><?php echo esc_html($address); ?></div>
                    </div>
                </div>
                <div class="hbc-detail">
                    <div class="hbc-detail-icon">🕐</div>
                    <div>
                        <div class="hbc-detail-label">GIỜ LÀM VIỆC</div>
                        <div class="hbc-detail-value-dark"><?php echo esc_html(get_option('bw_hours','Thứ 2 – Thứ 7: 8:00 – 17:30')); ?></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="hbc-form-wrap ant-anim-fadeinup">
            <div class="hbc-form-head">
                <h3>Đăng Ký Nhận Ưu Đãi</h3>
                <p>Báo giá chi tiết và lịch hẹn khảo sát miễn phí</p>
            </div>
            <div class="hbc-form-body">
                <div class="hbc-row">
                    <div class="hbc-group">
                        <label>HỌ VÀ TÊN *</label>
                        <input type="text" id="hbcName" placeholder="Nguyễn Văn A">
                    </div>
                    <div class="hbc-group">
                        <label>SỐ ĐIỆN THOẠI *</label>
                        <input type="tel" id="hbcPhone" placeholder="0908 428 888">
                    </div>
                </div>
                <div class="hbc-group">
                    <label>EMAIL</label>
                    <input type="email" id="hbcEmail" placeholder="email@congty.com">
                </div>
                <div class="hbc-row">
                    <div class="hbc-group">
                        <label>DIỆN TÍCH CẦN THUÊ</label>
                        <select id="hbcArea" onchange="bwToggleOther(this,'hbcAreaOther')">
                            <option value="">Chọn diện tích</option>
                            <?php foreach ($areas as $a): ?>
                            <option value="<?php echo esc_attr($a); ?>"><?php echo esc_html($a); ?></option>
                            <?php endforeach; ?>
                            <option value="__other__">✏️ Khác (tự nhập)</option>
                        </select>
                        <input type="text" id="hbcAreaOther" placeholder="Nhập diện tích..." style="display:none;margin-top:.5rem">
                    </div>
                    <div class="hbc-group">
                        <label>TẦNG MONG MUỐN</label>
                        <select id="hbcFloor" onchange="bwToggleOther(this,'hbcFloorOther')">
                            <option value="">Tầng bất kỳ</option>
                            <?php foreach ($floors_list as $f): ?>
                            <option value="<?php echo esc_attr($f); ?>"><?php echo esc_html($f); ?></option>
                            <?php endforeach; ?>
                            <option value="__other__">✏️ Khác (tự nhập)</option>
                        </select>
                        <input type="text" id="hbcFloorOther" placeholder="Nhập tầng mong muốn..." style="display:none;margin-top:.5rem">
                    </div>
                </div>
                <div class="hbc-group">
                    <label>GHI CHÚ THÊM</label>
                    <textarea id="hbcNote" placeholder="Thời gian bắt đầu thuê, yêu cầu đặc biệt..."></textarea>
                </div>
                <button class="hbc-submit" id="hbcSubmit">✉️ &nbsp;ĐĂNG KÝ NHẬN BÁO GIÁ NGAY</button>
                <div class="hbc-note">Thông tin bảo mật tuyệt đối. Liên hệ trong vòng 30 phút.</div>
                <div id="hbcMsg"></div>
            </div>
        </div>
    </div>
</section>

<style>
.home-bw-contact { background: #EDE0B8; padding: 5rem 0; }
.hbc-inner {
    max-width: calc(79.6875vw + 1.875rem);
    margin: 0 auto; padding: 0 .9375rem;
    display: grid; grid-template-columns: 1fr 1.3fr;
    gap: 5rem; align-items: center;
}
@media(max-width:1440px){ .hbc-inner { max-width:90vw; } }
@media(max-width:1200px){ .hbc-inner { max-width:95vw; } }
@media(max-width:991px){ .hbc-inner { grid-template-columns:1fr; gap:3rem; max-width:100%; padding:0 1.25rem; } }
.hbc-tag { font-size:.8125rem; font-weight:700; letter-spacing:3px; color:#8B6530; margin-bottom:1.25rem; }
.hbc-title { font-size:clamp(1.875rem,2.5vw,2.75rem); color:#4A2E10; font-weight:700; line-height:1.25; margin:0 0 1.25rem; }
.hbc-divider { width:3rem; height:3px; background:#8B6530; margin-bottom:1.5rem; }
.hbc-desc { color:#7A5C35; font-size:.9375rem; line-height:1.85; font-weight:400; margin-bottom:2.5rem; }
.hbc-details { display:flex; flex-direction:column; gap:1.5rem; }
.hbc-detail { display:flex; align-items:flex-start; gap:1rem; }
.hbc-detail-icon { width:3rem; height:3rem; background:rgba(139,101,48,0.12); border:1px solid rgba(139,101,48,0.25); border-radius:.75rem; display:flex; align-items:center; justify-content:center; font-size:1.125rem; flex:0 0 auto; }
.hbc-detail-label { font-size:.6875rem; font-weight:700; letter-spacing:1.5px; color:#A07840; margin-bottom:.25rem; }
.hbc-detail-value { font-size:1rem; font-weight:600; color:#8B6530; text-decoration:none; line-height:1.4; display:block; }
.hbc-detail-value-dark { font-size:1rem; font-weight:500; color:#4A2E10; line-height:1.4; }
a.hbc-detail-value:hover { color:#4A2E10; }
.hbc-form-wrap { background:#FFFFFF; border-radius:1.25rem; overflow:hidden; border:1px solid #D4C5A0; }
.hbc-form-head { background:#F5EDCE; padding:1.75rem 2rem 1.5rem; border-bottom:1px solid #D4C5A0; }
.hbc-form-head h3 { font-size:1.375rem; color:#4A2E10; margin:0 0 .375rem; font-weight:700; }
.hbc-form-head p { color:#8B6530; font-size:.9rem; margin:0; }
.hbc-form-body { padding:1.75rem 2rem 2rem; }
.hbc-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px){ .hbc-row { grid-template-columns:1fr; } }
.hbc-group { display:flex; flex-direction:column; margin-bottom:1rem; }
.hbc-group label { font-size:.6875rem; font-weight:700; letter-spacing:1px; color:#8B6530; margin-bottom:.375rem; }
.hbc-group input,
.hbc-group select,
.hbc-group textarea {
    background:#F5EDCE; border:1px solid #D4C5A0; border-radius:.5rem;
    padding:.8125rem 1rem; font-size:.9375rem; font-family:inherit;
    color:#4A2E10; transition:border-color .2s; outline:none;
    width:100%; height:auto; -webkit-appearance:none;
}
.hbc-group input::placeholder,
.hbc-group textarea::placeholder { color:#B8A07A; }
.hbc-group input:focus,
.hbc-group select:focus,
.hbc-group textarea:focus { border-color:#8B6530; background:#FFFBF5; }
.hbc-group textarea { height:90px; resize:vertical; }
.hbc-submit {
    width:100%; background:#8B6530; color:#F5EDCE; border:none;
    border-radius:.5rem; padding:1rem; font-size:.9375rem; font-weight:700;
    font-family:inherit; text-transform:uppercase; letter-spacing:1.5px;
    cursor:pointer; transition:background .2s; margin-top:.25rem;
}
.hbc-submit:hover { background:#4A2E10; }
.hbc-submit:active { transform:scale(.99); }
.hbc-submit:disabled { opacity:.7; cursor:not-allowed; }
.hbc-note { text-align:center; font-size:.8rem; color:#A07840; margin-top:.75rem; }
#hbcMsg { margin-top:1rem; padding:.875rem 1rem; border-radius:.5rem; font-size:.9rem; font-weight:600; text-align:center; display:none; }
#hbcMsg.success { background:#d4edda; color:#155724; display:block; }
#hbcMsg.error   { background:#f8d7da; color:#721c24; display:block; }
#hbcMsg.warning { background:#fff3cd; color:#856404; display:block; }
</style>

<script>
function bwToggleOther(sel, inputId) {
    var input = document.getElementById(inputId);
    if (sel.value === '__other__') {
        input.style.display = 'block';
        input.focus();
    } else {
        input.style.display = 'none';
        input.value = '';
    }
}
(function(){
    var btn = document.getElementById('hbcSubmit');
    var msg = document.getElementById('hbcMsg');
    btn.addEventListener('click', function(){
        var name  = document.getElementById('hbcName').value.trim();
        var phone = document.getElementById('hbcPhone').value.trim();
        var email = document.getElementById('hbcEmail').value.trim();
        var note  = document.getElementById('hbcNote').value.trim();
        var areaSelect  = document.getElementById('hbcArea');
        var area  = areaSelect.value === '__other__' ? document.getElementById('hbcAreaOther').value.trim() : areaSelect.value;
        var floorSelect = document.getElementById('hbcFloor');
        var floor = floorSelect.value === '__other__' ? document.getElementById('hbcFloorOther').value.trim() : floorSelect.value;
        msg.className = ''; msg.style.display = 'none';
        if (!name || !phone) { msg.className = 'warning'; msg.textContent = '⚠️ Vui lòng điền họ tên và số điện thoại!'; return; }
        btn.disabled = true; btn.textContent = '⏳  Đang gửi...';
        fetch('<?php echo esc_url($ajax); ?>', {
            method: 'POST',
            headers: {'Content-Type':'application/x-www-form-urlencoded'},
            body: new URLSearchParams({ action:'bw_submit_form', nonce:'<?php echo esc_js($nonce); ?>', name:name, phone:phone, email:email, area:area, floor:floor, note:note })
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if (data.success) {
                msg.className = 'success'; msg.textContent = '✅ ' + data.data;
                document.getElementById('hbcName').value = '';
                document.getElementById('hbcPhone').value = '';
                document.getElementById('hbcEmail').value = '';
                document.getElementById('hbcNote').value = '';
                document.getElementById('hbcArea').value = '';
                document.getElementById('hbcFloor').value = '';
                document.getElementById('hbcAreaOther').style.display = 'none';
                document.getElementById('hbcFloorOther').style.display = 'none';
            } else {
                msg.className = 'error'; msg.textContent = '❌ ' + (data.data || 'Có lỗi xảy ra!');
            }
            btn.disabled = false; btn.textContent = '✉️  ĐĂNG KÝ NHẬN BÁO GIÁ NGAY';
        })
        .catch(function(){
            msg.className = 'error'; msg.textContent = '❌ Lỗi kết nối. Vui lòng thử lại!';
            btn.disabled = false; btn.textContent = '✉️  ĐĂNG KÝ NHẬN BÁO GIÁ NGAY';
        });
    });
})();

</script>

/* Featured news - overlay style như intro box */
.bli-news-featured .bli-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem;
    background: rgba(185, 142, 40, 0.85);
}

.bli-news-featured .bli-title {
    color: #fff !important;
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.bli-news-featured .bli-title a {
    color: #fff !important;
}
.ant-job-header {
    background: var(--ant-main-color);
    color: #fff;
}
.jobs-pagination .page-btn:disabled,
.jobs-pagination .page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}