/*
Theme Name:   THP Real Estate
Description:  Child theme của Hello Elementor cho THP Real Estate
Author:       THP Real Estate
Template:     hello-elementor
Version:      1.0.9
Text Domain:  thp
*/

/* ═══════════════════════════════════════════════
   FONT: SF Pro — dùng FONT HỆ THỐNG (không tải file).
   SF Pro là font hệ thống Apple; -apple-system/BlinkMacSystemFont dùng bản có sẵn
   trên máy, KHÔNG tải file 1.3MB (trước đây tải SF-Pro.woff làm chậm LCP nặng).
   Mọi nơi dùng font-family:'SF Pro' sẽ tự fallback sang font hệ thống đẹp tương đương.
   ═══════════════════════════════════════════════ */
@font-face {
    font-family: 'SF Pro';
    src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ĐÔNG ĐÔ LAND — Font body chính: UTM Avo (WOFF2 tối ưu, TTF fallback).
   Đường dẫn relative theo theme để không phụ thuộc domain. Đặt file .woff2/.ttf trong /fonts/. */
@font-face {
    font-family: 'UTM Avo';
    src: url('fonts/UTMAvo.woff2') format('woff2'),
         url('fonts/UTM_Avo.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UTM Avo';
    src: url('fonts/UTMAvoBold.woff2') format('woff2'),
         url('fonts/UTM_AvoBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UTM Avo';
    src: url('fonts/UTMAvoItalic.woff2') format('woff2'),
         url('fonts/UTM_AvoItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'UTM Avo';
    src: url('fonts/UTMAvoBoldItalic.woff2') format('woff2'),
         url('fonts/UTM_AvoBold_Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Cormorant Garamond (tiêu đề lớn) được enqueue trong functions.php để tránh @import giữa file CSS. Còn lại dùng UTM Avo. */

/* ═══════════════════════════════════════════════
   BRAND TOKENS
   ═══════════════════════════════════════════════ */
:root {
    --gold:        #C9922A;
    --gold-light:  #E8B84B;
    --gold-dark:   #8B6014;
    --bg:          #886d49;
    --thp-bg-unified: #886d49;
    --white:       #F5F0E8;
    --muted:       rgba(245, 240, 232, 0.65);
    --font-body:   'UTM Avo', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:  'UTM Avo','SF Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --thp-font-body: var(--font-body);
    --thp-font-serif: var(--font-serif);
}

/* ═══════════════════════════════════════════════
   GLOBAL BASE — chỉ base, không điều khiển layout/scroll/background Elementor
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.thp-home {
    background: var(--bg);
    color: var(--white);
}
::-webkit-scrollbar { width: 4px; }
body.thp-home::-webkit-scrollbar-track { background: var(--bg); }
body.thp-home::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
body.thp-home ::selection,
#thp-lp ::selection { background: var(--gold); color: var(--bg); }

/* ═══════════════════════════════════════════════
   HIDE HELLO ELEMENTOR HEADER/FOOTER
   ═══════════════════════════════════════════════ */
.site-header,
.site-footer { display: none; }

/* ═══════════════════════════════════════════════
   TYPOGRAPHY — không ép màu để tránh xung đột Elementor/background
   ═══════════════════════════════════════════════ */
body,
body p,
body span,
body a,
body li,
body td,
body button,
body input,
body textarea,
body label,
.elementor-widget-text-editor p,
.elementor-button {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--font-serif);
    line-height: 1.1;
}

/* THP v15.1 — root typography sạch, không khóa màu/global !important */
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
.elementor-heading-title > a {
    font-family: inherit;
}

body button,
body input,
body textarea,
body select {
    font-family: var(--font-body);
}


/* ═══════════════════════════════════════════════
   HOME SECTION TYPOGRAPHY — chỉ scope theo ID section, không điều khiển height/scroll
   ═══════════════════════════════════════════════ */
#section-about h1,
#section-about h2,
#section-about h3,
#section-about .elementor-heading-title,
#section-numbers h1,
#section-numbers h2,
#section-numbers h3,
#section-numbers .elementor-heading-title,
#section-news h1,
#section-news h2,
#section-news h3,
#section-news .elementor-heading-title,
#section-contact h1,
#section-contact h2,
#section-contact h3,
#section-contact .elementor-heading-title {
    color: var(--white);
    font-family: var(--font-serif);
}

/* ═══════════════════════════════════════════════
   HERO SWIPER — chỉ giữ style visual, plugin thp-scroll điều khiển fullpage/height
   ═══════════════════════════════════════════════ */
.thp-hero-sw {
    width: 100%;
    min-height: 100svh;
}
.thp-hero-sw .swiper-slide {
    width: 100%;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
}
.thp-hero-sw .swiper-pagination {
    bottom: 44px;
    left: 80px;
    text-align: left;
    width: auto;
}
.thp-hero-sw .swiper-pagination-bullet {
    background: rgba(245, 240, 232, 0.4);
    opacity: 1;
    width: 8px;
    height: 8px;
}
.thp-hero-sw .swiper-pagination-bullet-active {
    background: var(--gold);
    width: 26px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .thp-hero-sw,
    .thp-hero-sw .swiper-slide {
        min-height: 100svh;
    }
    .thp-hero-sw .swiper-pagination {
        left: 24px;
        bottom: 24px;
    }
}

/* ═══════════════════════════════════════════════
   LANDING PROJECT TYPOGRAPHY SCOPE
   ═══════════════════════════════════════════════ */
#thp-lp.thp-mcc-white h1,
#thp-lp.thp-mcc-white h2,
#thp-lp.thp-mcc-white h3,
#thp-lp.thp-mcc-white h4,
#thp-lp.thp-mcc-white h5,
#thp-lp.thp-mcc-white h6,
#thp-lp.thp-mcc-white .elementor-heading-title {
    font-family: 'UTM Avo','SF Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}

/* THP v7 cleanup:
   - Không điều khiển #thp-wrap, scroll-snap, #section-projects trong theme style.css.
   - Fullpage/Project scroll do plugin THP Scroll xử lý duy nhất.
   - Elementor pages tự quản lý background/layout của chính nó. */


/* =========================================================
   THP Project Filters - match News tab style
   Scope only project catalog/filter UI, no global override.
========================================================= */
.thp-duan-catalog-v34[data-thp-catalog="du-an"] .thp-duan-filter button,
body.thp-page-projects .thp-duan-filter button,
body.thp-page-projects .thp-project-filter button,
body.thp-page-projects .thp-filter button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-family: "UTM Avo", "SF Pro", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.25px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.thp-duan-catalog-v34[data-thp-catalog="du-an"] .thp-duan-filter button.is-active,
body.thp-page-projects .thp-duan-filter button.is-active,
body.thp-page-projects .thp-project-filter button.is-active,
body.thp-page-projects .thp-filter button.is-active {
    background: #FCB900 !important;
    border-color: #FCB900 !important;
    color: #111111 !important;
    text-shadow: none !important;
}

.thp-duan-catalog-v34[data-thp-catalog="du-an"] .thp-duan-filter button:hover,
body.thp-page-projects .thp-duan-filter button:hover,
body.thp-page-projects .thp-project-filter button:hover,
body.thp-page-projects .thp-filter button:hover {
    background: #FCB900 !important;
    border-color: #FCB900 !important;
    color: #111111 !important;
    transform: none !important;
}

@media (max-width: 767px) {
    .thp-duan-catalog-v34[data-thp-catalog="du-an"] .thp-duan-filter button,
    body.thp-page-projects .thp-duan-filter button,
    body.thp-page-projects .thp-project-filter button,
    body.thp-page-projects .thp-filter button {
        min-height: 32px !important;
        padding: 8px 14px !important;
        font-size: 10px !important;
        letter-spacing: 1.05px !important;
    }
}