/* Vibrant HCMC brand layer — shared by the public site (layouts/site) and the admin "Giao diện thương hiệu" preview.
   Spec: docs/design-system/README.md · values: VIBRANT_GUIDELINELOGO_FA_210524.pdf */
/* Bảng màu chính — VIBRANT_GUIDELINELOGO_FA_210524.pdf trang 11 (giá trị RGB in trong guideline) */
:root{--ink:#1B1A17;--paper:#FAF6EF;--brand-violet:#9B2891;--brand-pink:#E11E91;--brand-red:#EB1E23;--brand-orange:#F58C28;--brand-yellow:#FFCD00;--brand-light-green:#7DC350;--brand-mint:#4BA587;--brand-cyan:#00B4E1;--brand-deep-blue:#1E4687;
/* Bảng màu phụ trợ — trang 12–13 */
--brand-midnight:#001F60;--brand-gradient:linear-gradient(90deg,#ED0677 0%,#583F99 33%,#1568B3 66%,#88C86F 100%);
--ink-2:#4A453E;--muted:#6E675D;--line:#BDB6AB;--sand:#F4F1EC}
/* tint = brand 10% over --sand (hero bg) · deep = brand 20% into --ink (hero title) · soft = brand 12% over white */
.tone-violet{--tone:var(--brand-violet);--tone-tint:#EBDDE3;--tone-deep:#351D2F;--tone-soft:#F3E5F2}
.tone-pink{--tone:var(--brand-pink);--tone-tint:#F2DCE3;--tone-deep:#431B2F;--tone-soft:#FBE4F2}
.tone-red{--tone:var(--brand-red);--tone-tint:#F3DCD8;--tone-deep:#451B19;--tone-soft:#FDE4E5}
.tone-orange{--tone:var(--brand-orange);--tone-tint:#F4E7D8;--tone-deep:#47311A;--tone-soft:#FEF1E5}
.tone-yellow{--tone:var(--brand-yellow);--tone-tint:#F5EDD4;--tone-deep:#493E12;--tone-soft:#FFF9E0}
.tone-light-green{--tone:var(--brand-light-green);--tone-tint:#E8ECDC;--tone-deep:#2F3C22;--tone-soft:#EFF8EA}
.tone-mint{--tone:var(--brand-mint);--tone-tint:#E3E9E2;--tone-deep:#25362D;--tone-soft:#E9F4F1}
.tone-cyan{--tone:var(--brand-cyan);--tone-tint:#DCEBEB;--tone-deep:#16393F;--tone-soft:#E0F6FB}
.tone-deep-blue{--tone:var(--brand-deep-blue);--tone-tint:#DFE0E2;--tone-deep:#1C232D;--tone-soft:#E4E9F1}

/* Page hero: tinted band + line-art motif on the right (§3) */
.page-head{position:relative;overflow:hidden;background:var(--tone-tint,var(--sand));padding:44px 0 32px}
.page-head>.wrap{position:relative;z-index:1}
.page-head .h2,.page-head .crumbs{color:#000000}
.page-head .crumbs a{text-decoration-color:currentColor}
.page-head .intro{color:#000000}
.ph-motif{position:absolute;z-index:0;top:50%;right:max(16px,calc((100% - 1240px) / 2 + 32px));transform:translateY(-50%);width:clamp(150px,17vw,230px);aspect-ratio:1;background:var(--motif-c,var(--tone,var(--muted)));-webkit-mask:var(--motif) center/contain no-repeat;mask:var(--motif) center/contain no-repeat;pointer-events:none}
.motif-violet{--motif-c:var(--brand-violet)}.motif-pink{--motif-c:var(--brand-pink)}.motif-red{--motif-c:var(--brand-red)}.motif-orange{--motif-c:var(--brand-orange)}.motif-yellow{--motif-c:var(--brand-yellow)}.motif-light-green{--motif-c:var(--brand-light-green)}.motif-mint{--motif-c:var(--brand-mint)}.motif-cyan{--motif-c:var(--brand-cyan)}.motif-deep-blue{--motif-c:var(--brand-deep-blue)}
@media (max-width:1100px){.ph-motif{width:140px;opacity:.45}}
@media (max-width:768px){.ph-motif{top:16px;transform:none;width:84px;opacity:.3}}

/* Highlighted phrase in titles (§6) */
.hl{font-style:normal;color:var(--brand-red)}
.page-head .hl{color:var(--brand-red)}