/* ================================================================
   styles_v2.css — Enhancement only (KHÔNG phá layout gốc)
   Load SAU: bootstrap, main.css, project.css, pagination_min.css
   Chỉ override màu sắc, font, visual — giữ nguyên float/grid/width
   Tông màu: #004d40 / #007b5e / #049774 (xanh lá bất động sản)
   ================================================================ */

/* ── 1. CSS VARIABLES ─────────────────────────────────────────── */
:root {
    --c-primary:   #007b5e;
    --c-primary-d: #004d40;
    --c-primary-l: #049774;
    --c-accent:    #006A39;
    --c-bg-soft:   #f0f7f4;
    --c-border:    #dde8e4;
    --c-text:      #2C2C2C;
    --c-muted:     #6b7280;
    --c-white:     #ffffff;
    --c-red:       #c62828;
    --c-gold:      #b57e10;
    --radius:      6px;
    --shadow:      0 2px 8px rgba(0,75,58,.10);
    --trans:       .2s ease;
}

/* ── 2. GLOBAL FONT & BODY ────────────────────────────────────── */
/* Dùng !important để thắng Open Sans được set bởi project.css */
html, body {
    font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif !important;
    color: var(--c-text) !important;
}

/* Google Font import — đặt ở đây để không cần sửa HTML */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

/* ── 3. HEADINGS ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--c-primary-d);
    font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif !important;
}
/* Project page: giữ nguyên gradient gold cho h2 trong project */
/* (project.css dùng -webkit-text-fill-color nên sẽ tự override) */

/* ── 4. LINK BASE ─────────────────────────────────────────────── */
a { transition: color var(--trans); }
a:hover { color: var(--c-primary-l); }

/* ── 5. SIDEBAR TITLE (home-title, sidebar-title) ────────────── */
/* Nâng cấp màu xanh từ #296347 → tông xanh chính */
.home-title,
.sidebar-title {
    background-color: var(--c-primary-d) !important;
    border-radius: 4px 4px 0 0;
}
.home-title a,
.sidebar-title a {
    background: var(--c-red) !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    letter-spacing: .3px;
}

/* ── 6. SIDEBAR CONTENT ──────────────────────────────────────── */
.sidebar-form {
    background: linear-gradient(135deg, var(--c-primary-d), var(--c-primary)) !important;
    border-radius: 4px;
}
.sidebar-content {
    border-color: var(--c-border) !important;
    border-top: none;
}

/* ── 7. SECTION TITLE ────────────────────────────────────────── */
.section-title {
    color: var(--c-primary-d) !important;
    border-bottom: 3px solid var(--c-primary) !important;
    font-weight: 700;
    letter-spacing: .3px;
}

/* ── 8. BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb { background: transparent !important; }
.breadcrumb li a {
    color: var(--c-primary) !important;
    font-weight: 600;
}
.breadcrumb li a:hover { color: var(--c-primary-l) !important; }

/* ── 9. CONTENT AREA – article/post ─────────────────────────── */
.content a                  { color: var(--c-primary); }
.content a:hover            { color: var(--c-primary-l); }
.content li::before         { color: var(--c-primary); }
.content h2.active,
.content h3.active,
.content h4.active {
    background: var(--c-bg-soft) !important;
    border-left: 4px solid var(--c-primary) !important;
    color: var(--c-primary) !important;
    padding-left: 10px;
    border-radius: 0 4px 4px 0;
}
.content ul.tags li a {
    background: var(--c-bg-soft);
    color: var(--c-accent);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    transition: all var(--trans);
}
.content ul.tags li a:hover {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}

/* ── 10. ARTICLE LIST ────────────────────────────────────────── */
.article-section {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.article {
    border-bottom-color: var(--c-border) !important;
    transition: background var(--trans);
}
.article:hover { background: var(--c-bg-soft); }
.article picture img { border-radius: var(--radius); }

/* ── 11. LISTING ITEM CARDS ──────────────────────────────────── */
.listing-item {
    border-color: var(--c-border) !important;
    border-radius: 8px !important;
    transition: box-shadow var(--trans), transform var(--trans) !important;
}
.listing-item:hover {
    box-shadow: 0 6px 20px rgba(0,75,58,.14) !important;
    transform: translateY(-2px);
}
.listing-image img {
    transition: transform .35s ease !important;
}
.listing-item:hover .listing-image img {
    transform: scale(1.04) !important;
}
.listing-info h3 a { color: var(--c-accent) !important; }
.listing-info h3 a:hover { color: var(--c-primary-l) !important; }
.price-area .price {
    background: #fde8e8 !important;
    color: var(--c-red) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}
.price-area .area {
    background: var(--c-bg-soft) !important;
    color: var(--c-accent) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}
.poster { border-top-color: var(--c-border) !important; }

/* ── 12. CARD (Bootstrap) ────────────────────────────────────── */
.card {
    border-color: var(--c-border) !important;
    box-shadow: var(--shadow) !important;
    transition: box-shadow var(--trans), transform var(--trans) !important;
}
.card:hover {
    box-shadow: 0 6px 20px rgba(0,75,58,.14) !important;
    transform: translateY(-2px);
}

/* ── 13. PAGINATION ──────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
    color: var(--c-primary) !important;
    border-color: var(--c-border) !important;
    transition: all var(--trans) !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    color: var(--c-primary-d) !important;
    background-color: var(--c-bg-soft) !important;
    border-color: var(--c-primary) !important;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-white) !important;
}

/* ── 14. BUTTONS ─────────────────────────────────────────────── */
.btn-success {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    transition: background var(--trans) !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--c-primary-d) !important;
    border-color: var(--c-primary-d) !important;
}
#sendButton {
    background: linear-gradient(135deg, var(--c-primary-d), var(--c-primary-l)) !important;
    border: 0 !important;
    transition: opacity var(--trans) !important;
}
#sendButton:hover { opacity: .88 !important; }

/* ── 15. FORM INPUTS ─────────────────────────────────────────── */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,123,94,.12) !important;
    outline: none !important;
}

/* ── 16. PWS TABS (active tab màu xanh lá) ───────────────────── */
.pws_tabs_container ul.pws_tabs_controll li a.pws_tab_active {
    background-color: var(--c-primary) !important;
    color: var(--c-white) !important;
    border-color: var(--c-primary) !important;
}
.pws_tabs_container ul.pws_tabs_controll li a:hover {
    background-color: var(--c-bg-soft) !important;
    color: var(--c-primary) !important;
}

/* ── 17. FEATURE BOX ─────────────────────────────────────────── */
.feature-section { background-color: var(--c-bg-soft); }
.feature-section .box-header { background-color: var(--c-primary) !important; }
.feature-section .feature-box {
    border-radius: var(--radius) !important;
    transition: box-shadow var(--trans), transform var(--trans) !important;
}
.feature-section .feature-box:hover {
    box-shadow: 0 6px 20px rgba(0,75,58,.14) !important;
    transform: translateY(-3px);
}

/* ── 18. DETAIL BDS ──────────────────────────────────────────── */
.detail-bds,
.detail-bds .breadcrumb {
    background: var(--c-white) !important;
}
.thumbnails img {
    border-radius: var(--radius) !important;
    border: 2px solid transparent !important;
    transition: border-color var(--trans) !important;
    cursor: pointer;
}
.thumbnails img:hover { border-color: var(--c-primary) !important; }

.detail-box {
    background: var(--c-bg-soft) !important;
    border-radius: var(--radius) !important;
}
.detail-box div {
    background: var(--c-white) !important;
    border-radius: var(--radius) !important;
    border-left: 3px solid var(--c-primary) !important;
}

/* ── 19. ITEM LIST (property detail panels) ─────────────────── */
.item-list li {
    background: var(--c-bg-soft) !important;
    border-radius: var(--radius) !important;
    border-left: 3px solid var(--c-primary) !important;
}

/* ── 20. FOOTER ──────────────────────────────────────────────── */
footer .footer-main .footer-col > .footer-header {
    color: var(--c-white);
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    margin-bottom: 10px;
}
footer .footer-main a { transition: color var(--trans); }

/* ── 21. IMAGES – subtle hover scale (toàn cục, nhẹ nhàng) ──── */
/* Override project.css img:hover scale từ 1.01 → nhẹ hơn */
img:hover {
    transform: scale(1.01) !important;
    transition: .4s ease !important;
}
/* Riêng listing image được scale cao hơn (đã set ở trên qua .listing-item:hover) */

/* ── 22. SCROLLBAR (Webkit) ──────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
    background: var(--c-primary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-primary-d); }

/* ── 23. SELECTION COLOR ─────────────────────────────────────── */
::selection {
    background: var(--c-primary);
    color: var(--c-white);
}

/* ── 24. SEARCH SECTION HERO ─────────────────────────────────── */
.top_index .search-section .hero-banner {
    height: 600px !important;
}

/* ── 25. ARTICLE GRID (articles section) ────────────────────── */
.articles article .article-content h3 a { color: #111; }
.articles article .article-content h3 a:hover { color: var(--c-primary); }

/* ── 26. TEXT-PRIMARY ────────────────────────────────────────── */
.text-primary { color: var(--c-primary-d) !important; }

/* ── 27. BANGIADUAN ──────────────────────────────────────────── */
.bangiaduan img { width: auto; height: 230px; }

/* ── 28. FIXED REGISTER BUTTON ──────────────────────────────── */
.div_button_reg {
    position: fixed;
    left: calc((1180px) + (100% - 1180px) / 2);
    top: 216px;
    font-weight: 400;
    width: 193px;
    z-index: 10000;
    font-size: 18px;
    height: 193px;
}
.sub_menu_reg {
    background: #D81B21;
    border-radius: 5px 5px 0 0;
    transform: rotate(90deg);
    color: var(--c-white);
    text-transform: uppercase;
    position: absolute;
    padding: 5px 10px;
    left: -80px;
    font-weight: 400;
    z-index: 10000;
    top: 80px;
    font-size: 18px;
    transition: all .5s ease;
}
.div_button_reg:hover > .sub_menu_reg {
    height: 192px;
    line-height: 192px;
    border-radius: 50%;
    top: 0;
    transform: rotate(0deg);
    text-shadow: 1px 1px 1px #333;
    color: var(--c-white);
    text-decoration: none;
}

/* ── 29. MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container { max-width: 100% !important; padding: 0 !important; }
    .listing-grid { padding: 5px !important; }
}