/* Viet Property Scout — VPS-V005E Corporate Theme
   LOCKED THEME RULES
   1. Main CTA: #0B625C + white
   2. Hover:    #084B47 + white
   3. Gold:     accent only (line/icon/badge/detail)
   4. No large gold buttons
   5. No gold/yellow background + black text
   6. Header:   white
   7. Footer / dark blocks: #17323A
   8. Main text: #263238
*/

:root{
    --vps-cta:#0B625C;
    --vps-cta-hover:#084B47;
    --vps-gold:#C7A04A;
    --vps-dark:#17323A;
    --vps-text:#263238;
    --vps-ivory:#F5F1E8;
    --vps-accent:#A63D3B;

    --primary:var(--vps-cta);
    --primary-100:#095752;
    --primary-200:#084B47;
    --primary-300:#073F3C;
    --primary--100:#27756F;
    --primary--200:#438883;
    --primary--300:#609B97;

    --primary-rgba-0:rgba(11,98,92,0);
    --primary-rgba-10:rgba(11,98,92,.10);
    --primary-rgba-20:rgba(11,98,92,.20);
    --primary-rgba-30:rgba(11,98,92,.30);
    --primary-rgba-40:rgba(11,98,92,.40);
    --primary-rgba-50:rgba(11,98,92,.50);
    --primary-rgba-60:rgba(11,98,92,.60);
    --primary-rgba-70:rgba(11,98,92,.70);
    --primary-rgba-80:rgba(11,98,92,.80);
    --primary-rgba-90:rgba(11,98,92,.90);

    /* Porto secondary is intentionally NOT gold.
       This prevents existing .btn-secondary / .bg-secondary components
       from becoming large gold blocks. */
    --secondary:var(--vps-cta);
    --secondary-100:#095752;
    --secondary-200:#084B47;
    --secondary-300:#073F3C;
    --secondary--100:#27756F;
    --secondary--200:#438883;
    --secondary--300:#609B97;

    --tertiary:var(--vps-accent);
    --quaternary:var(--vps-ivory);
    --dark:var(--vps-dark);

    --primary-inverse:#FFFFFF;
    --secondary-inverse:#FFFFFF;
    --tertiary-inverse:#FFFFFF;
    --quaternary-inverse:var(--vps-text);
    --dark-inverse:#FFFFFF;
}

/* ---------------------------------------------------------------
   LOGO GEOMETRY — ADMIN CONTROL REMAINS AUTHORITATIVE
---------------------------------------------------------------- */
#header .header-logo{min-width:0}
#header .header-logo .sc-brand{
    display:flex;
    align-items:center;
    min-width:0;
}
.sc-brand-image-header{
    display:block !important;
    width:var(--vps-header-logo-width,434px) !important;
    height:var(--vps-header-logo-height,60px) !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:left center !important;
}
.sc-brand-image-footer{
    display:block !important;
    width:var(--vps-footer-logo-width,434px) !important;
    height:var(--vps-footer-logo-height,60px) !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:left center !important;
}

/* ---------------------------------------------------------------
   BASE
---------------------------------------------------------------- */
html,
body{
    color:var(--vps-text) !important;
}
body,
p,
li,
td,
th,
label,
input,
select,
textarea{
    color:var(--vps-text);
}
a{
    color:var(--vps-cta);
}
a:hover,
a:focus{
    color:var(--vps-cta-hover);
}

/* ---------------------------------------------------------------
   HEADER — WHITE
---------------------------------------------------------------- */
#header .header-body,
#header .header-container,
#header .header-top{
    background:#FFFFFF !important;
}
#header .header-top{
    border-bottom:1px solid rgba(38,50,56,.08);
}
#header .header-body{
    border-top:2px solid var(--vps-gold) !important;
}
#header .header-nav-main nav > ul > li > a{
    color:var(--vps-text) !important;
}
#header .header-nav-main nav > ul > li > a.active,
#header .header-nav-main nav > ul > li:hover > a,
#header .header-nav-main nav > ul > li:focus > a{
    color:var(--vps-cta) !important;
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu{
    border-top-color:var(--vps-gold) !important;
}

/* ---------------------------------------------------------------
   CTA — ALL LARGE BUTTONS TEAL + WHITE
   Existing templates use both btn-primary and btn-secondary.
---------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
#header .btn-secondary,
#header .header-btn-collapse-nav,
button[type="submit"].btn-primary,
button[type="submit"].btn-secondary,
a.btn-primary,
a.btn-secondary{
    background:var(--vps-cta) !important;
    border-color:var(--vps-cta) !important;
    color:#FFFFFF !important;
}

.btn-primary *,
.btn-secondary *,
#header .btn-secondary *,
#header .header-btn-collapse-nav *{
    color:#FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
#header .btn-secondary:hover,
#header .btn-secondary:focus,
#header .header-btn-collapse-nav:hover,
#header .header-btn-collapse-nav:focus,
button[type="submit"].btn-primary:hover,
button[type="submit"].btn-secondary:hover,
a.btn-primary:hover,
a.btn-secondary:hover{
    background:var(--vps-cta-hover) !important;
    border-color:var(--vps-cta-hover) !important;
    color:#FFFFFF !important;
}

/* Prevent any legacy large secondary/gold blocks. */
.bg-secondary,
.text-bg-secondary{
    background-color:var(--vps-cta) !important;
    color:#FFFFFF !important;
}
.bg-secondary *,
.text-bg-secondary *{
    color:#FFFFFF !important;
}

/* ---------------------------------------------------------------
   GOLD — SMALL ACCENT ONLY
---------------------------------------------------------------- */
.text-color-secondary,
a.text-hover-secondary:hover,
.vps-gold-text{
    color:var(--vps-gold) !important;
}

.border-color-secondary,
.vps-gold-border{
    border-color:var(--vps-gold) !important;
}

.badge-warning,
.label-warning,
.vps-gold-badge{
    background:var(--vps-gold) !important;
    border-color:var(--vps-gold) !important;
    color:#FFFFFF !important;
}

.badge-warning *,
.label-warning *,
.vps-gold-badge *{
    color:#FFFFFF !important;
}

/* Small icons/details may use gold. Never make a large button gold. */
.vps-gold-icon,
.sc-accent-icon,
.sc-premium-icon{
    color:var(--vps-gold) !important;
}

/* Tab / fine-line accent */
.nav-tabs .nav-link.active,
.sc-search-tabs .active,
.sc-tabs .active{
    border-bottom-color:var(--vps-gold) !important;
}

/* ---------------------------------------------------------------
   DARK BLOCKS / FOOTER
---------------------------------------------------------------- */
#footer,
.bg-dark,
.text-bg-dark,
.vps-dark-block{
    background:var(--vps-dark) !important;
    color:#FFFFFF !important;
}
#footer *,
.bg-dark *,
.text-bg-dark *,
.vps-dark-block *{
    color:inherit;
}
#footer a{
    color:#FFFFFF;
}
#footer a:hover{
    color:var(--vps-gold) !important;
}
#footer{
    border-top:2px solid var(--vps-gold);
}

/* ---------------------------------------------------------------
   STANDARD COLOR HELPERS
---------------------------------------------------------------- */
.text-color-primary{color:var(--vps-cta) !important}
.bg-primary,
.text-bg-primary{
    background-color:var(--vps-cta) !important;
    color:#FFFFFF !important;
}
.bg-primary *,
.text-bg-primary *{
    color:#FFFFFF !important;
}
.btn-danger{
    background:var(--vps-accent) !important;
    border-color:var(--vps-accent) !important;
    color:#FFFFFF !important;
}
::selection{
    background:var(--vps-cta);
    color:#FFFFFF;
}

/* ---------------------------------------------------------------
   RESPONSIVE LOGO CAPS
---------------------------------------------------------------- */
@media (max-width:1399.98px){
    .sc-brand-image-header{
        width:min(var(--vps-header-logo-width,434px),360px) !important;
        height:auto !important;
    }
}
@media (max-width:1199.98px){
    .sc-brand-image-header{
        width:min(var(--vps-header-logo-width,434px),320px) !important;
        height:auto !important;
    }
}
@media (max-width:991.98px){
    .sc-brand-image-header{
        width:min(var(--vps-header-logo-width,434px),280px) !important;
        height:auto !important;
    }
}
@media (max-width:575.98px){
    .sc-brand-image-header{
        width:min(var(--vps-header-logo-width,434px),230px) !important;
        height:auto !important;
    }
    .sc-brand-image-footer{
        width:min(var(--vps-footer-logo-width,434px),230px) !important;
        height:auto !important;
    }
}