/* Khối "Vì sao chọn PVI" trên trang chủ: chép từ baohiempvi-vn (why-pvi.module.css), đổi tên lớp sang wp-*,
   dùng font của pvihcm. Chữ tối thiểu 13px. HTML sinh bằng tools/gen-why-pvi.mjs, hiệu ứng ở why-pvi.js. */
.why-pvi{max-width:var(--content,1220px);margin:0 auto;padding:48px 28px;scroll-margin-top:84px}
.wp-card{background:#fff;border:1px solid #d7e5f2;border-radius:18px;display:flex;flex-direction:column;gap:14px;padding:22px 26px;box-shadow:0 18px 40px rgba(7,63,120,.06)}
.wp-head{align-items:baseline;display:flex;flex-wrap:wrap;gap:4px 14px}
.wp-head small{color:#0b57b6;font-size:13px;font-weight:800;letter-spacing:.06em}
.wp-head h2{color:#0b57b6;font-size:clamp(21px,2.4vw,27px);font-weight:800;line-height:1.25;letter-spacing:-.02em;margin:0}
.wp-brand-red{color:#c8262d;text-shadow:0 3px 10px rgba(200,38,45,.18)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wp-brand-red{-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg,#c8262d 0%,#c8262d 38%,#ff7a7e 48%,#ffd0d2 50%,#ff7a7e 52%,#c8262d 62%,#c8262d 100%);background-size:250% 100%;color:transparent;-webkit-text-fill-color:transparent;animation:wpShine 3.6s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(200,38,45,.22));text-shadow:none}
}
@keyframes wpShine{0%{background-position:100% 0}60%,100%{background-position:0 0}}

.wp-row{align-items:center;display:flex;gap:22px}
.wp-figure{align-items:center;display:flex;flex:0 0 168px;flex-direction:column;gap:8px;margin:0;text-align:center}
.wp-figure figcaption{color:#1d4b78;display:flex;flex-direction:column;font-size:14px;font-weight:600;gap:2px;line-height:1.4}
.wp-figure figcaption span{color:#56718f;font-weight:400}
.wp-figure figcaption a{color:#1465d9;font-weight:600}

/* Biểu đồ thị phần: data-phase done (HTML gốc) → armed (chờ, JS) → play → done; data-pop: lát PVI bật ra */
.wp-market-figure{flex:0 0 auto}
.wp-market{align-items:center;display:flex;gap:18px}
.wp-donut{flex:none;height:150px;position:relative;width:150px}
.wp-donut svg{display:block;height:100%;overflow:visible;transition:transform 1.1s cubic-bezier(.34,1.45,.5,1),opacity .45s ease;width:100%}
.wp-market[data-phase="armed"] .wp-donut svg{opacity:0;transform:rotate(-150deg) scale(.5)}
.wp-slice{cursor:pointer;transition:stroke-dasharray .75s cubic-bezier(.3,.7,.3,1),transform .55s cubic-bezier(.34,1.8,.5,1),opacity .2s ease}
.wp-slice[data-dim]{opacity:.3}
.wp-halo{opacity:0;pointer-events:none;transform-box:fill-box}
.wp-market[data-pop] .wp-halo{animation:wpHalo 2.4s ease-out .2s infinite}
@keyframes wpHalo{0%{opacity:.5;stroke-width:28}70%,100%{opacity:0;stroke-width:46}}
.wp-badge{background:#1465d9;border:2px solid #fff;border-radius:999px;box-shadow:0 6px 14px rgba(20,101,217,.35);color:#fff;font-size:13px;font-weight:800;line-height:1;padding:5px 8px;position:absolute;transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.34,1.9,.5,1);white-space:nowrap}
.wp-market[data-pop] .wp-badge{transform:translate(-50%,-50%) scale(1)}
.wp-center{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;line-height:1;pointer-events:none;position:absolute}
.wp-center b{color:#09264c;font-size:18px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.wp-center span{color:#34506f;font-size:13px;font-weight:700;line-height:1.2;margin-top:3px;max-width:80px;text-align:center}

.wp-legend{display:grid;gap:4px;list-style:none;margin:0;min-width:0;padding:0;text-align:left;width:210px}
.wp-legend li{align-items:center;border-radius:9px;color:#34506f;cursor:default;display:grid;font-size:14px;gap:3px 8px;grid-template-columns:10px minmax(0,1fr) auto;line-height:1.3;padding:3px 7px 4px;transition:background-color .2s ease,opacity .35s ease,transform .55s cubic-bezier(.34,1.5,.5,1)}
.wp-market[data-phase="play"] .wp-legend li{transition-delay:var(--d)}
.wp-market[data-phase="armed"] .wp-legend li{opacity:0;transform:translateX(22px)}
.wp-legend li:focus-visible{outline:2px solid #1465d9;outline-offset:1px}
.wp-market .wp-legend li[data-dim]{opacity:.4}
.wp-legend li[data-pvi]{background:#eaf2fd;color:#09264c;font-weight:700}
.wp-legend i{background:var(--c);border-radius:3px;height:10px;width:10px}
.wp-legend span{white-space:nowrap}
.wp-legend b{color:#09264c;font-variant-numeric:tabular-nums;font-weight:700}
.wp-legend em{background:#eef3f9;border-radius:4px;display:block;grid-column:1/-1;height:5px;overflow:hidden}
.wp-legend em::after{background:var(--c);border-radius:4px;content:"";display:block;height:100%;transition:width 1s cubic-bezier(.2,.8,.2,1);width:var(--w)}
.wp-market[data-phase="play"] .wp-legend em::after{transition-delay:calc(var(--d) + .25s)}
.wp-market[data-phase="armed"] .wp-legend em::after{width:0}

/* Giấy chứng nhận AM Best */
.wp-cert{border:1px solid #e0ebf6;border-radius:10px;box-shadow:0 6px 16px rgba(9,38,76,.08);display:block;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;width:150px}
.wp-cert:hover,.wp-cert:focus-visible{box-shadow:0 10px 22px rgba(9,38,76,.16);transform:translateY(-2px)}
.wp-cert img{display:block;height:auto;width:100%}
.wp-sources a{display:inline-block;font-weight:600;padding:6px 2px}

/* Dải công trình */
.wp-projects{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-width:0}
.wp-strip{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);overflow:hidden}
.wp-strip:focus-visible{border-radius:14px;outline:2px solid #1465d9;outline-offset:4px}
.wp-track{animation:wpStrip 55s linear infinite;display:flex;gap:14px;list-style:none;margin:0;padding:0;width:max-content}
.wp-strip:hover .wp-track,.wp-strip:focus-within .wp-track{animation-play-state:paused}
@keyframes wpStrip{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
.wp-tile{display:flex;flex:0 0 176px;flex-direction:column;gap:6px;width:176px}
.wp-photo{border-radius:14px;box-shadow:0 8px 18px rgba(9,38,76,.12);display:block;height:104px;overflow:hidden;position:relative;width:176px}
.wp-photo::after{background:linear-gradient(180deg,transparent 55%,rgba(4,30,58,.28));content:"";inset:0;pointer-events:none;position:absolute}
.wp-photo img{display:block;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.72,.24,1);width:100%}
.wp-tile:hover .wp-photo img{transform:scale(1.06)}
.wp-photo-tag{background:rgba(255,255,255,.92);border-radius:999px;color:#34506f;font-size:13px;font-weight:600;left:8px;line-height:1;padding:5px 8px;position:absolute;top:8px;z-index:1}
.wp-tile-link{color:inherit;display:flex;flex-direction:column;gap:6px;text-decoration:none}
.wp-tile-link:hover .wp-tile-name{color:#1465d9}
.wp-tile-link:focus-visible{border-radius:14px;outline:2px solid #1465d9;outline-offset:3px}
.wp-tile-name{color:#09264c;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.wp-slogan{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);overflow:hidden}
.wp-slogan-track{animation:wpSlogan 16s linear infinite;display:flex;width:max-content}
.wp-slogan:hover .wp-slogan-track{animation-play-state:paused}
.wp-slogan-track span{color:#c8262d;font-size:16px;font-weight:800;line-height:1.5;padding-right:64px;white-space:nowrap}
@keyframes wpSlogan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wp-note{color:#56718f;font-size:14px!important;line-height:1.5;margin:0!important}

@media (prefers-reduced-motion:reduce){
  .wp-track,.wp-slogan-track{animation:none}
  .wp-slice,.wp-cert,.wp-donut svg,.wp-legend li,.wp-legend em::after,.wp-badge{transition:none}
  .wp-brand-red{animation:none;background-position:100% 0}
  .wp-slogan-track span[aria-hidden]{display:none}
  .wp-market[data-pop] .wp-halo{animation:none}
  .wp-strip{overflow-x:auto}
}
@media (max-width:900px){.wp-row{flex-wrap:wrap;justify-content:space-around}.wp-projects{flex-basis:100%}}
@media (max-width:820px){.why-pvi{padding:32px 20px}}
@media (max-width:640px){
  .wp-card{padding:17px 18px}
  .wp-row{gap:16px 8px}
  .wp-figure,.wp-market-figure{flex:1 1 100%}
  .wp-donut{height:132px;width:132px}
  .wp-market{gap:12px;justify-content:center}
  .wp-center b{font-size:16px}
  .wp-legend{flex:1 1 auto;width:auto}
  .wp-cert{width:132px}
  .wp-tile{flex-basis:148px;width:148px}
  .wp-photo{height:88px;width:148px}
}
@media (max-width:380px){
  .wp-donut{height:116px;width:116px}
  .wp-center b{font-size:15px}
  .wp-market{gap:8px}
  .wp-legend li{gap:3px 6px;padding:3px 5px 4px}
}