/* ============================================================
   VNYC Profile Kit 2026 — restyle cards/sections to match the
   official Capability Profile (Hồ sơ năng lực): cream cards with
   gold top-border, hexagon number badges, subtle gold bubbles.
   Loaded LAST (CSS-only override, reversible). No HTML changes.
   ============================================================ */
:root{ --pk-ivory:#F7F4EC; --pk-gold:#BDA632; --pk-gold-d:#9C8826; --pk-navy:#052338; --pk-navy2:#044C7F; }

/* ── Card families → cream + gold top-border (Profile card) ── */
.value-v2, .about-value-card, .svc-hub-card, .petal{
  background:var(--pk-ivory) !important;
  border:1px solid rgba(189,166,50,.20) !important;
  border-top:3px solid var(--pk-gold) !important;
  border-radius:4px !important;
  box-shadow:0 10px 30px rgba(5,35,56,.06) !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
.value-v2:hover, .about-value-card:hover, .svc-hub-card:hover, .petal:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(5,35,56,.12) !important;
  border-top-color:var(--pk-gold-d) !important;
}
.value-v2__title, .about-value-card h3, .svc-hub-card h3, .petal h3{
  font-family:'Lato',sans-serif !important; color:var(--pk-navy2) !important;
}
.value-v2__desc, .about-value-card p, .svc-hub-card p, .petal p{ color:#5b6470 !important; }

/* ── Number badges → gold hexagon (pointy-top) with white numeral ── */
.value-v2__num, .petal-num{
  background:var(--pk-gold) !important; color:#fff !important;
  font-family:'Lato',sans-serif !important;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  width:44px !important; height:48px !important; min-width:44px !important; flex:0 0 44px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:0 !important; font-weight:800 !important; font-size:1.05rem !important;
  letter-spacing:0 !important; box-shadow:none !important; line-height:1 !important;
  margin:0 auto 16px !important; text-indent:0 !important;
}
.petal{ text-align:center; }
/* icon wrap → small gold-tinted hexagon accent (keep emoji) */
.value-v2__icon-wrap{ background:rgba(189,166,50,.12) !important; border-radius:8px !important; }

/* ── about-value-card: add hexagon icon frame (no number there) ── */
.about-value-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:50px; font-size:1.4rem;
  background:rgba(189,166,50,.12);
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ── svc-hub-card: gold "more" link + hexagon icon tint ── */
.svc-hub-card__more{ color:var(--pk-gold-d) !important; font-weight:700; }
.svc-hub-card__icon{ filter:none; }

/* ── Subtle gold "bubbles" bottom-right of values/commitments sections ── */
.values-v2__group, .values-v2__grid, .about-values-grid, .svc-hub-grid{ position:relative; }
.values-v2__group::after, .about-values-grid::after{
  content:""; position:absolute; right:-18px; bottom:-26px; width:120px; height:120px;
  background:
    radial-gradient(circle at 70% 70%, rgba(189,166,50,.16) 0 26px, transparent 27px),
    radial-gradient(circle at 38% 40%, rgba(189,166,50,.10) 0 14px, transparent 15px),
    radial-gradient(circle at 90% 30%, rgba(189,166,50,.08) 0 8px, transparent 9px);
  pointer-events:none; z-index:0;
}
@media (max-width:820px){ .values-v2__group::after, .about-values-grid::after{ display:none; } }