/* Theme "tpr" — Quỳnh Anh under the Tâm Phát Real brand.
   Brand cues taken from tamphatreal.com: royal-blue header (#083a91), deep navy text (#0a1d3e),
   bright blue headings/links (#167ac6), light grey surfaces, Roboto, rounded cards, pill buttons.
   Loaded after style.css; only overrides. */
:root{
  --ink:#0a1d3e;
  --plum:#083a91;          /* brand band (TPR header blue) */
  --plum-deep:#061f4f;     /* footer / deepest navy */
  --gold:#167ac6;          /* accent: CTA, links, rules */
  --gold-soft:#d5e5f6;
  --paper:#f3f6fa;
  --card:#ffffff;
  --line:#dbe3ee;
  --muted:#56677f;
  --on-plum:#ffffff;
  --on-plum-muted:#c2d3ee;
  --display:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:10px;
  --shadow:0 14px 34px -20px rgba(6,31,79,.45);
}

/* Type: TPR uses strong Roboto caps headings */
h1,h2{font-weight:700;letter-spacing:.01em}
h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.12}
h2{font-size:clamp(1.55rem,3.4vw,2.25rem);line-height:1.22;color:#0b5cad}
.band h2,.p-hero h1{color:#fff}
h3{font-weight:500}
.fact b,.dist b,.stat b,.unit-nums b,.num b,.brand-name,.steps li::before,.faq summary::after{font-weight:700}
.brand-name{font-size:1.15rem;letter-spacing:0}
.hl p{font-weight:500}

/* Logo */
.brand-logo{width:40px;height:40px;object-fit:contain;flex:none}

/* Buttons: pill, blue on light, white on blue */
.btn{border-radius:999px;letter-spacing:.08em}
.btn-gold:hover{background:#0f63a6}
.p-hero .btn-gold,.band .lead-wrap .loc-text .btn-gold{background:#fff;color:var(--plum)}
.p-hero .btn-gold:hover{background:var(--gold-soft)}
.tabs,.tab,.chip,.field,.form .opts span,.offer-pill,.badge{border-radius:999px}
.tabs{padding:5px}

/* Header */
.topbar{background:rgba(255,255,255,.96)}
body::before{background:#fff}

/* Image slots + hero overlays in navy instead of plum */
.ph{background:linear-gradient(135deg,#e3ecf8,#f1f5fb)}
.p-hero .ph{background:linear-gradient(160deg,#0b4fb3,#061f4f)}
.p-hero::after{background:linear-gradient(180deg,rgba(6,31,79,.2) 0%,rgba(6,31,79,.55) 45%,rgba(6,31,79,.93) 100%)}
.p-hero .tagline{color:#e6eefb}
.fact{background:rgba(6,31,79,.72)}
.advisor-chip{color:#e6eefb}
.face{background:#dbe8f7}
.hl p{background:linear-gradient(180deg,transparent,rgba(6,31,79,.9))}
.arch .ph{background:linear-gradient(180deg,#0b4fb3,#061f4f)}
.arch::after{border-color:var(--gold)}
dialog.modal::backdrop{background:rgba(6,31,79,.6)}
dialog.lightbox::backdrop{background:rgba(3,15,40,.92)}

/* Bands */
.band .eyebrow{color:#9cc4f0}
.svc div{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}

/* Mobile action bar: white bar like TPR's light UI */
.actionbar{background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(6,31,79,.35)}
.actionbar .a-call{background:#eaf1fa;color:var(--ink)}
.actionbar .a-quote{background:var(--gold)}