/*
Theme Name: TimHue.io.vn
Description: Nền tảng cho thuê BĐS & mặt bằng tại Huế — bản nhận diện "Cố Đô", lấy cảm hứng từ sắc chàm hoàng cung, tím Huế và ánh kim của Cố đô.
Version: 2.1
*/

/* ==========================================================================
   0. GOOGLE FONTS
   Noto Serif  — chữ tiêu đề, gợi cảm giác chữ khắc trên bia đá / sắc phong
   Be Vietnam Pro — chữ nội dung, hiện đại, hỗ trợ tiếng Việt đầy đủ
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@500;600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. BẢNG MÀU THƯƠNG HIỆU — "CỐ ĐÔ HUẾ"
   ----------------------------------------------------------------------------
   Thay thế bảng xanh dương chung chung bằng bộ màu có bản sắc địa phương rõ
   rệt: chàm hoàng cung (nền), tím Huế (điểm nhấn thứ hai, rất đặc trưng và dễ
   nhận diện), vàng kim cung đình (CTA / VIP), hồng sen (giá thuê), xanh ngọc
   sông Hương (xác minh/thành công), và nền giấy dó ấm thay cho nền xanh lạnh.
   ========================================================================== */
:root {
    --hue-indigo:       #1B2A5C;   /* Chàm hoàng cung — màu chủ đạo */
    --hue-indigo-deep:  #0E1B3D;   /* Chàm đậm — header sticky / dải họa tiết / footer */
    --hue-tim:          #5C2A6B;   /* Tím Huế — điểm nhấn phụ, rất đặc trưng địa phương */
    --hue-tim-deep:     #401E4C;
    --hue-gold:         #C89B3C;   /* Vàng kim cung đình — CTA, VIP, viền trang trí */
    --hue-gold-deep:    #9C7526;
    --hue-lotus:        #C23B57;   /* Hồng sen — giá thuê, điểm nhấn ấm */
    --hue-lotus-deep:   #9C2B41;
    --hue-jade:         #2F7A6B;   /* Xanh ngọc sông Hương — xác minh / thành công */
    --hue-jade-deep:    #235B50;

    --hue-paper:        #F8F4E9;   /* Nền giấy dó ấm — thay nền xanh xám lạnh cũ */
    --hue-paper-alt:    #EFE6CE;
    --hue-card:         #FFFFFF;
    --hue-line:         #E2D8B8;   /* Viền màu giấy/parchment */
    --hue-ink:          #241F1A;   /* Chữ chính — đen ấm, không phải đen tuyệt đối */
    --hue-ink-soft:      #5C5648;  /* Chữ phụ */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-soft: 0 4px 16px rgba(27, 42, 92, 0.08);
    --shadow-hover: 0 14px 30px rgba(27, 42, 92, 0.16);
}

/* ==========================================================================
   2. RESET & NỀN TẢNG
   ========================================================================== */
* { box-sizing: border-box; }

body {
    background-color: var(--hue-paper);
    color: var(--hue-ink);
    font-family: 'Be Vietnam Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Noto Serif', Georgia, serif;
    color: var(--hue-indigo);
    margin: 0 0 12px;
}

a { color: inherit; }

/* Khung nội dung dùng chung toàn site (trước đây thiếu — đã bổ sung) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.narrow-main {
    max-width: 700px;
    margin: 40px auto;
}

/* ==========================================================================
   3. (Đã gỡ dải họa tiết trang trí theo yêu cầu — bản sắc thương hiệu giờ
   đây thể hiện hoàn toàn qua bảng màu và kiểu chữ, không dùng hoa văn minh
   họa ở đầu/cuối trang.)
   ========================================================================== */
/* ==========================================================================
   4. HEADER / ĐIỀU HƯỚNG
   ========================================================================== */
.main-header {
    background: var(--hue-card);
    box-shadow: 0 2px 12px rgba(27, 42, 92, 0.10);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.logo {
    font-family: 'Noto Serif', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--hue-indigo);
    text-decoration: none;
    letter-spacing: 0.2px;
}

.logo span { color: var(--hue-lotus); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-item-link {
    color: var(--hue-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s;
}

.nav-item-link:hover { color: var(--hue-tim); }

.btn-post {
    background: linear-gradient(135deg, var(--hue-tim), var(--hue-tim-deep));
    color: #fff !important;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(92, 42, 107, 0.32);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-post:hover {
    background: linear-gradient(135deg, var(--hue-tim-deep), var(--hue-tim));
    transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
    .nav-item-link { display: none; }
}

/* ==========================================================================
   5. HERO BANNER
   ========================================================================== */
.hero-banner {
    position: relative;
    background: linear-gradient(135deg, var(--hue-indigo-deep) 0%, var(--hue-indigo) 55%, var(--hue-tim-deep) 100%);
    color: #fff;
    padding: 46px 20px 56px;
    border-radius: var(--radius-lg);
    text-align: center;
    margin-top: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(200, 155, 60, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 85% 80%, rgba(194, 59, 87, 0.14) 0%, transparent 50%);
    pointer-events: none;
}

.hero-banner h1 {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.hero-banner p {
    position: relative;
    font-size: 15.5px;
    color: #EFE6CE;
    opacity: 0.95;
    max-width: 620px;
    margin: 0 auto;
}

/* ==========================================================================
   6. BỘ LỌC TÌM KIẾM
   ========================================================================== */
.filter-section { margin-top: -26px; margin-bottom: 34px; position: relative; }

.search-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
    gap: 12px;
    background: var(--hue-card);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--hue-line);
}

.filter-select,
.filter-input {
    padding: 11px 12px;
    border: 1px solid #D9CFAE;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: 'Be Vietnam Pro', sans-serif;
    background-color: #fff;
    color: var(--hue-ink);
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--hue-gold);
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.18);
}

.btn-search {
    background: linear-gradient(135deg, var(--hue-gold), var(--hue-gold-deep));
    color: #fff !important;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 14px;
    padding: 11px 26px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(156, 117, 38, 0.35);
    transition: all 0.2s;
}

.btn-search:hover { filter: brightness(1.08); transform: translateY(-1px); }

.section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--hue-indigo);
}

/* ==========================================================================
   7. LƯỚI DANH SÁCH BĐS (CARD ITEM)
   ========================================================================== */
.grid-listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.card {
    background: var(--hue-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--hue-line);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--hue-gold);
}

.card-img {
    height: 200px;
    background: var(--hue-paper-alt);
    position: relative;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--hue-ink-soft);
    background: var(--hue-paper-alt);
    font-size: 13.5px;
}

.badge-status {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--hue-indigo);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.badge-vip {
    background: linear-gradient(135deg, var(--hue-lotus), var(--hue-lotus-deep)) !important;
}

.badge-featured {
    background: linear-gradient(135deg, var(--hue-gold), var(--hue-gold-deep)) !important;
}

.badge-verified {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--hue-jade);
    color: #fff;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.card-body { padding: 18px; }

.card-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.4;
    height: 44px;
    overflow: hidden;
    color: var(--hue-ink);
}

.card-title a { color: var(--hue-ink); text-decoration: none; }
.card-title a:hover { color: var(--hue-tim); }

.price-tag {
    font-size: 19px;
    font-weight: 800;
    color: var(--hue-lotus);
    margin-bottom: 8px;
}

.meta-info {
    font-size: 13px;
    color: var(--hue-ink-soft);
    line-height: 1.6;
    margin-bottom: 15px;
}

.btn-view {
    display: block;
    text-align: center;
    background: var(--hue-paper-alt);
    color: var(--hue-indigo);
    font-weight: 700;
    padding: 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s;
}

.btn-view:hover { background: var(--hue-indigo); color: #fff; }

.empty-state {
    grid-column: 1/-1;
    text-align: center;
    padding: 56px 20px;
    background: var(--hue-card);
    border-radius: var(--radius-md);
    border: 1px dashed var(--hue-line);
}
.empty-state p { font-size: 16px; color: var(--hue-ink-soft); margin-top: 8px; }

.pagination-wrapper { text-align: center; margin: 40px 0 60px; }
.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border-radius: var(--radius-sm);
    background: var(--hue-card);
    border: 1px solid var(--hue-line);
    color: var(--hue-indigo);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.pagination-wrapper .page-numbers.current {
    background: var(--hue-indigo);
    color: #fff;
    border-color: var(--hue-indigo);
}

/* ==========================================================================
   8. FORM DÙNG CHUNG (Ký gửi BĐS / Đặt lịch xem nhà)
   ========================================================================== */
.form-success-banner {
    background: #E4F2E9;
    border: 1px solid var(--hue-jade);
    color: var(--hue-jade-deep);
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    text-align: center;
}
.form-success-banner h2 { color: var(--hue-jade-deep); margin-bottom: 6px; }

.form-card {
    background: var(--hue-card);
    padding: 35px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hue-line);
    box-shadow: var(--shadow-soft);
}

.form-title {
    font-size: 24px;
    color: var(--hue-indigo);
    margin-bottom: 8px;
    text-align: center;
}

.form-subtitle {
    font-size: 14px;
    color: var(--hue-ink-soft);
    text-align: center;
    margin-bottom: 28px;
}

.field-group { margin-bottom: 16px; }
.field-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 16px;
}

.field-label {
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    color: var(--hue-ink);
    font-size: 14px;
}

.field-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #D9CFAE;
    border-radius: var(--radius-sm);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14.5px;
    color: var(--hue-ink);
    background: #fff;
}
.field-input:focus {
    outline: none;
    border-color: var(--hue-gold);
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.18);
}

.upload-box {
    background: var(--hue-paper);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--hue-gold);
    margin-bottom: 16px;
}
.upload-box label { color: var(--hue-tim); font-weight: 700; display: block; margin-bottom: 6px; }
.upload-box small { color: var(--hue-ink-soft); display: block; margin-top: 6px; }

.field-secure-box {
    background: #FBF2E3;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hue-gold);
    margin-bottom: 20px;
}
.field-secure-box label { color: var(--hue-gold-deep); }

.btn-submit-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--hue-indigo), var(--hue-indigo-deep));
    color: #fff;
    font-weight: 700;
    padding: 14px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}
.btn-submit-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ==========================================================================
   9. TRANG CHI TIẾT BĐS (single-bat_dong_san.php)
   ========================================================================== */
.listing-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
}

@media screen and (max-width: 900px) {
    .listing-layout { grid-template-columns: 1fr; }
}

.listing-title { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.listing-address { color: var(--hue-ink-soft); margin-bottom: 20px; }

.listing-gallery {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 25px;
    background: var(--hue-paper-alt);
    max-height: 450px;
}
.listing-gallery img { width: 100%; height: auto; display: block; }

.info-card {
    background: var(--hue-card);
    padding: 25px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hue-line);
    margin-bottom: 30px;
}

.info-card-title {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--hue-gold);
    display: inline-block;
    padding-bottom: 4px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 15px;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: var(--hue-ink);
}

.price-highlight {
    color: var(--hue-lotus);
    font-size: 18px;
}

.booking-card {
    background: var(--hue-card);
    padding: 25px;
    border-radius: var(--radius-md);
    border: 2px solid var(--hue-indigo);
    position: sticky;
    top: 90px;
    box-shadow: var(--shadow-soft);
}

.booking-card-title {
    font-size: 20px;
    color: var(--hue-indigo);
    margin-bottom: 8px;
    text-align: center;
}

.booking-card-subtitle {
    font-size: 13px;
    color: var(--hue-ink-soft);
    text-align: center;
    margin-bottom: 20px;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
footer.site-footer {
    background: linear-gradient(135deg, var(--hue-indigo-deep), #14265C);
    border-top: 4px solid var(--hue-gold);
    color: #C9C2E8;
    padding: 40px 0;
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

footer.site-footer strong { color: #fff; }

/* ==========================================================================
   11. RESPONSIVE CHUNG
   ========================================================================== */
@media screen and (max-width: 768px) {
    .hero-banner h1 { font-size: 24px; }
    .search-filter-form { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 1fr; }
}