:root{--ink:#17212e;--blue:#164f87;--red:#cb2530;--muted:#586574;--ice:#f5f7f9;--content:1160px}
body{line-height:1.6;overflow-x:clip}a,button,summary{touch-action:manipulation}:focus-visible{outline:3px solid #1768aa;outline-offset:5px}img{height:auto}
header{max-width:var(--content);padding:0 28px;height:72px;gap:24px}.brand{font-size:21px;letter-spacing:-.035em;white-space:nowrap}nav{font-size:14px;gap:24px}.phone{padding:11px 18px;font-size:14px;white-space:nowrap}.preview{font-size:12px;padding:6px 16px;letter-spacing:0}
.hero{max-width:var(--content);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;min-height:0;padding:38px 28px 44px;background:none}.hero h1{font-size:clamp(36px,3.7vw,52px);line-height:1.19;letter-spacing:-.035em;margin:14px 0 18px;font-weight:700}.hero-audience{display:block;font-size:.6em;font-weight:500;letter-spacing:-.02em;line-height:1.4;margin:8px 0 19px;max-width:460px}.hero h1 em{display:block;color:var(--blue)}.hero-copy>p:not(.kicker){font-size:16px;line-height:1.7;margin:16px 0}.kicker{font-size:12px;line-height:1.7;letter-spacing:.13em;color:var(--muted)}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:22px}.primary,.solution-copy>a{min-height:44px;margin-top:0;font-size:14px;padding:11px 20px;gap:12px;border-radius:24px}.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--blue);font-size:14px;font-weight:600}.text-link:hover,.secondary-link:hover{text-decoration:underline;text-underline-offset:5px}
.hero-stage{height:clamp(330px,34vw,430px);isolation:isolate}.hero-tile{width:51%;aspect-ratio:1.5;border-radius:16px;border-color:#e1e7ed;box-shadow:0 14px 26px #1a385a15;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;translate:0 var(--depth-y,0px)}.t1{left:1%;top:14%;transform:rotateY(3deg) rotateZ(-1.2deg)}.t2{right:0;top:3%;transform:rotateY(-3deg) rotateZ(1deg)}.t3{left:0;bottom:12%;transform:rotateY(3deg) rotateZ(1deg)}.t4{right:0;bottom:4%;transform:rotateY(-3deg) rotateZ(-1deg)}.hero-tile:after{opacity:1;transform:none;left:10px;bottom:9px;font-size:12px;line-height:1.4;padding:6px 9px;background:#fffefc;color:var(--ink);max-width:calc(100% - 20px)}
.section-intro{max-width:var(--content);margin:auto;padding:26px 28px 6px;border-top:1px solid #e8ebef}.section-intro h2{font-size:28px;letter-spacing:-.025em;margin:8px 0 0;line-height:1.3}.solution{max-width:var(--content);margin:auto;min-height:0;padding:36px 28px;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:54px;overflow:visible;border-bottom:1px solid #e8ebef}.solution.alt{background:transparent}.solution-copy>span{display:block;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.09em;color:var(--muted)}.solution-copy h2{font-size:36px;line-height:1.25;letter-spacing:-.03em;margin:10px 0 12px}.solution-copy p{font-size:16px;line-height:1.65;margin:0 0 14px;max-width:500px}.micro-info{list-style:none;padding:0;margin:12px 0 18px;color:var(--muted);font-size:14px;line-height:1.6}.micro-info li{margin:6px 0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}.micro-info strong{color:var(--ink);font-weight:600}.solution-copy>a{background:var(--ink)}.solution-copy>a.secondary-link{background:none;color:var(--blue);padding:10px 0;margin-left:12px}.featured .solution-copy>a:not(.secondary-link){background:var(--red)}
.visual{border-radius:18px;box-shadow:none;will-change:auto;transition:transform .5s,box-shadow .5s}.visual img{aspect-ratio:1.5;object-fit:cover;transition:transform .5s}.visual:hover img{transform:none}.visual:hover{box-shadow:none}.cargo-utility{grid-template-columns:minmax(0,1fr) 245px;padding-top:24px;padding-bottom:24px;gap:40px}.cargo-utility .solution-copy h2{font-size:26px}.cargo-utility .solution-copy p{max-width:660px;font-size:14px;margin-bottom:8px}.cargo-utility .solution-copy>a{background:none;color:var(--blue);padding-left:0}.cargo-utility .visual{max-width:245px}
.trust-block{max-width:var(--content);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:56px 28px}.trust-block h2{font-size:36px;line-height:1.25;letter-spacing:-.03em;margin:12px 0 18px}.trust-copy>p:not(.kicker){font-size:16px;color:var(--muted)}.trust-copy .entity-description{font-size:14px!important}.proof-points{margin:0}.proof-points>div{display:flex;flex-direction:column-reverse;padding:10px 0 16px;border-bottom:1px solid #e8ebef}.proof-points dd{font-size:36px;font-weight:600;line-height:1.25;letter-spacing:-.03em;margin:0 0 5px}.proof-points dd span{font-size:19px}.proof-points dt{font-size:14px;color:var(--muted)}.source-note{font-size:12px!important;line-height:1.65!important;color:var(--muted);margin-top:14px}
.process{max-width:var(--content);margin:auto;background:var(--ice);padding:40px 28px;text-align:left;border-radius:18px}.process h2,.section-heading h2{font-size:30px;line-height:1.3;letter-spacing:-.025em;margin:10px 0}.process>div{max-width:none;margin:24px 0 12px;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.process article{padding:0 16px;border-color:#dbe1e7}.process article:first-child{padding-left:0}.process b{font-size:20px;color:var(--blue)}.process h3{font-size:16px;margin:8px 0}.process p{font-size:14px;line-height:1.6}
.utility-section{max-width:var(--content);margin:auto;padding:44px 28px;border-bottom:1px solid #e8ebef}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading>p{font-size:14px;color:var(--muted);margin:0}.utility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.utility-grid details,.utility-grid article{min-width:0;border-top:1px solid #dbe1e7;padding:15px 0 0}.utility-grid summary{font-size:16px;min-height:44px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}.utility-grid summary::-webkit-details-marker{display:none}.utility-grid summary span{font-size:22px;color:var(--blue)}.utility-grid details[open] summary span{transform:rotate(45deg)}.utility-grid h3{font-size:16px;margin:4px 0 10px}.utility-grid p{font-size:14px;line-height:1.7;color:var(--muted);margin:10px 0}.aftercare-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:18px}.aftercare-bottom .source-note{max-width:480px}
.knowledge-strip{max-width:var(--content);margin:auto;padding:32px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.knowledge-strip h2{font-size:22px;line-height:1.4;letter-spacing:-.02em;margin:6px 0}.knowledge-strip p:not(.kicker){font-size:14px;color:var(--muted);margin:8px 0}.partners{max-width:var(--content);margin:auto;padding:20px 28px;display:block;min-height:0;background:none}.partners h2{font-size:12px;margin-bottom:12px;color:var(--muted)}.partner-marquee{mask-image:none;overflow:visible}.partner-track{animation:none;width:auto;flex-wrap:wrap;gap:8px 20px;font-size:14px}.partner-track [aria-hidden="true"]{display:none}.site-footer{max-width:var(--content);padding:34px 28px;gap:30px;font-size:14px}.site-footer .brand{font-size:20px}.footer-contact a{min-height:36px;overflow-wrap:anywhere}.open-overlay{display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero-tile:hover,.hero-tile:focus-visible{transform:translateZ(20px) scale(1.03);box-shadow:0 20px 36px #14355525;z-index:10}a.visual:hover,a.visual:focus-visible{transform:translateY(-4px);box-shadow:0 18px 30px #183e5c14}a.visual:hover img,a.visual:focus-visible img{transform:scale(1.025)}}
@media(max-width:1000px){.hero{gap:18px}.hero h1{font-size:40px}.hero-stage{height:360px}.hero-actions{gap:6px 14px}.solution{gap:28px}.solution-copy h2{font-size:32px}.solution-copy>a.secondary-link{margin-left:0}.trust-block{gap:32px}.site-footer{gap:24px;grid-template-columns:1fr 1.25fr 1fr}}
@media(max-width:820px){header{height:66px;padding:0 22px;gap:12px}nav{display:none}.brand{font-size:20px}.phone{font-size:14px;padding:10px 15px}.hero{grid-template-columns:1fr;padding:26px 22px 18px;gap:12px}.hero h1{font-size:40px;margin-top:10px}.hero-audience{max-width:480px;margin-bottom:14px}.hero-copy>p:not(.kicker){font-size:16px}.hero-stage{height:260px;max-width:460px;width:100%;margin:4px auto 0}.hero-tile{width:47%;border-radius:14px;translate:none!important}.t1{left:1%;top:3%}.t2{right:0;top:0}.t3{left:0;bottom:4%}.t4{right:0;bottom:1%}.hero-tile:after{font-size:12px;padding:4px 7px;left:6px;bottom:6px;max-width:calc(100% - 12px)}.section-intro{padding:24px 22px 0}.section-intro h2{font-size:25px}.solution{padding:28px 22px;gap:20px;grid-template-columns:1fr}.solution-copy h2{font-size:30px;margin-top:9px}.solution-copy>span{font-size:12px}.micro-info{font-size:14px}.solution .visual{width:100%;max-width:390px;justify-self:center}.solution .visual img{max-height:235px;aspect-ratio:1.5;object-fit:contain}.cargo-utility{grid-template-columns:minmax(0,1fr) 115px;gap:16px}.cargo-utility .visual{max-width:115px}.cargo-utility .solution-copy h2{font-size:23px}.trust-block{grid-template-columns:1fr;padding:36px 22px;gap:20px}.trust-block h2{font-size:30px}.proof-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.proof-points dd{font-size:28px}.proof-points dd span{font-size:14px}.proof-points dt{font-size:12px}.process{padding:30px 22px;border-radius:0}.process h2,.section-heading h2{font-size:27px}.process>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.process article,.process article:first-child{border:0;padding:0}.process h3{font-size:16px}.utility-section{padding:32px 22px}.section-heading{display:block;margin-bottom:18px}.section-heading>p{margin-top:12px}.utility-grid{gap:18px;grid-template-columns:1fr}.utility-grid p{max-width:600px}.aftercare-bottom{display:block}.knowledge-strip{padding:26px 22px;display:block}.knowledge-strip h2{font-size:22px}.partners{padding:20px 22px}.site-footer{grid-template-columns:1fr;padding:30px 22px;gap:22px}.preview{font-size:12px}.desktop-break{display:none}}
@media(max-width:430px){.hero h1{font-size:36px}.hero-audience{font-size:23px;line-height:1.4}.hero-actions{gap:4px 16px}.hero-stage{height:228px}.hero-tile{width:48%}.hero-tile:after{font-size:12px}.hero .kicker{font-size:12px;letter-spacing:.07em}.solution-copy h2{font-size:28px}.micro-info li{grid-template-columns:85px minmax(0,1fr);gap:6px}.proof-points{gap:10px}.proof-points dd{font-size:25px}.proof-points dd span{font-size:12px}.proof-points dt{font-size:12px}.cargo-utility{grid-template-columns:minmax(0,1fr) 96px}.cargo-utility .solution-copy h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-tile,.visual,.visual img{transform:none!important;translate:none!important;transition:none!important}.partner-track{animation:none!important}}
/* One final pass after rendered review: avoid inherited giant CTA arrows and covered tile labels. */
.solution-copy a span{font-size:16px;line-height:1;color:inherit;font-weight:500}
.hero-tile{width:49%}.t1{top:7%}.t2{top:0}.t3{bottom:0}.t4{bottom:6%}
@media(max-width:820px){.hero{padding-top:18px;padding-bottom:18px}.hero-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto;max-width:410px;perspective:none}.hero-tile{position:relative;inset:auto;width:100%;aspect-ratio:1.55;transform:none}.hero h1{margin:8px 0 12px}.hero-audience{margin:6px 0 12px}.hero-copy>p:not(.kicker){margin:12px 0;line-height:1.55}.hero-actions{margin-top:14px}}
@media(max-width:430px){.hero h1{font-size:32px}.hero-audience{font-size:20px}.hero h1 em{font-size:30px}.hero-stage{gap:10px}.hero .kicker{letter-spacing:.04em}.hero-tile:after{font-size:12px}.hero-actions{gap:2px 14px}.hero-copy>p:not(.kicker){font-size:16px}.hero-tile.t4:after{content:'Hàng hóa XNK'}}
.anchor-alias{position:absolute;width:0;height:0;pointer-events:none}

/* Stronger spatial interaction for the four product cards. */
.hero-stage{perspective:900px;transform-style:preserve-3d}
.hero-tile{
  --base-y:0deg;--base-z:0deg;--pointer-x:0deg;--pointer-y:0deg;--lift:0px;--zoom:1;
  transform:translateZ(var(--lift)) rotateX(var(--pointer-y)) rotateY(calc(var(--base-y) + var(--pointer-x))) rotateZ(var(--base-z)) scale(var(--zoom));
  transform-origin:50% 55%;transform-style:preserve-3d;will-change:transform,filter;
  box-shadow:0 15px 28px #092b4b22,0 3px 8px #0a31551a;
  transition:transform .52s cubic-bezier(.16,1,.3,1),box-shadow .52s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.hero-tile img{transform:translateZ(18px) scale(1.035);transition:transform .55s cubic-bezier(.16,1,.3,1),filter .4s ease}
.hero-tile:before{content:"";position:absolute;inset:-45%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.12) 54%,transparent 66%);opacity:0;transform:translateX(var(--shine-x,-65%)) rotate(8deg) translateZ(30px);transition:opacity .25s ease;mix-blend-mode:screen}
.hero-tile:after{z-index:3;box-shadow:0 8px 22px #102c4624;transform:translateZ(34px)}
.t1{--base-y:5deg;--base-z:-1.6deg}.t2{--base-y:-5deg;--base-z:1.6deg}.t3{--base-y:5deg;--base-z:1.6deg}.t4{--base-y:-5deg;--base-z:-1.6deg}
.section-visual{position:relative;background:#edf4f9;transform:perspective(1100px) rotateX(0deg) rotateY(0deg);transform-origin:center;box-shadow:0 12px 28px #12395716,0 2px 7px #12395712}
.section-visual:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.62);border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.section-visual img{transform:scale(1.015);filter:saturate(1.03) contrast(1.015)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-tile:hover,.hero-tile:focus-visible,.hero-tile.is-tilting{--lift:26px;--zoom:1.04;z-index:12;filter:saturate(1.045) contrast(1.02);box-shadow:0 30px 58px #082e5138,0 10px 20px #0e3e6720}
  .hero-tile:hover img,.hero-tile:focus-visible img,.hero-tile.is-tilting img{transform:translateZ(24px) scale(1.065)}
  .hero-tile:hover:before,.hero-tile:focus-visible:before,.hero-tile.is-tilting:before{opacity:.34}
  .solution:nth-of-type(odd) .section-visual:hover,.solution:nth-of-type(odd) .section-visual:focus-visible{transform:perspective(1100px) translateY(-7px) rotateX(1.8deg) rotateY(-3deg);box-shadow:18px 26px 44px #12395722}
  .solution:nth-of-type(even) .section-visual:hover,.solution:nth-of-type(even) .section-visual:focus-visible{transform:perspective(1100px) translateY(-7px) rotateX(1.8deg) rotateY(3deg);box-shadow:-18px 26px 44px #12395722}
  .section-visual:hover img,.section-visual:focus-visible img{transform:scale(1.045);filter:saturate(1.045) contrast(1.02)}
}
@media(max-width:820px){
  .hero-stage{perspective:none}.hero-tile{--base-y:0deg;--base-z:0deg;transform:none!important;filter:none!important;will-change:auto}.hero-tile img{transform:none}.hero-tile:before{display:none}
  .section-visual,.section-visual:hover,.section-visual:focus-visible{transform:none!important;box-shadow:0 10px 24px #12395716}.section-visual img{transform:none!important}
}
@media(prefers-reduced-motion:reduce){.hero-tile:before{display:none}.hero-tile img,.section-visual img{filter:none!important}}

/* Focused claims journey and verified PVI partnership showcase. */
.claims{max-width:var(--content);margin:0 auto;padding:58px 28px;border-top:1px solid #e8ebef}
.claims-heading{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);column-gap:56px;align-items:end;margin-bottom:28px}
.claims-heading .kicker{grid-column:1/-1;margin:0 0 8px}.claims-heading h2{font-size:36px;line-height:1.22;letter-spacing:-.035em;margin:0}.claims-heading>p:not(.kicker){font-size:15px;color:var(--muted);margin:0;max-width:560px}
.claims-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:42px;align-items:center}
.claims-visual{margin:0}.claims-visual img{aspect-ratio:1.5;object-fit:cover;border-radius:18px;box-shadow:0 18px 44px #12395720}.claims-visual figcaption{font-size:12px;color:var(--muted);margin-top:9px}
.claims-steps{list-style:none;padding:0;margin:0}.claims-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid #dbe1e7}.claims-steps li:last-child{border-bottom:1px solid #dbe1e7}.claims-steps li>span{font-size:13px;font-weight:700;color:var(--blue);padding-top:2px}.claims-steps h3{font-size:16px;line-height:1.4;margin:0 0 5px}.claims-steps p{font-size:14px;line-height:1.62;color:var(--muted);margin:0}
.claims-footer{display:flex;align-items:center;justify-content:space-between;gap:34px;margin-top:26px}.claims-footer .primary{margin:0;white-space:nowrap}.claims-footer p{font-size:12px;line-height:1.6;color:var(--muted);max-width:660px;margin:0}
.partners{max-width:none;margin:0;padding:48px 0 54px;display:block;overflow:hidden;background:#f6f8fa;border-top:1px solid #e5e9ed;border-bottom:1px solid #e5e9ed}
.partners-heading{max-width:var(--content);margin:0 auto 24px;padding:0 28px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:48px;align-items:end}.partners-heading .kicker{grid-column:1/-1;margin:0 0 8px}.partners-heading h2{font-size:28px;line-height:1.3;letter-spacing:-.025em;margin:0;color:var(--ink);text-transform:none}.partners-heading>p:not(.kicker){font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.partner-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.partner-track{display:flex;width:max-content;flex-wrap:nowrap;align-items:stretch;gap:18px;padding:0 9px;animation:partner-photo-scroll 48s linear infinite;color:var(--ink)}
.partner-card{display:block;flex:0 0 270px;padding:8px;background:#fff;border:1px solid #e1e6eb;border-radius:16px;box-shadow:0 8px 22px #15385312;transition:transform .35s ease,box-shadow .35s ease}.partner-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px}.partner-card span{display:block;padding:11px 5px 7px}.partner-card strong{display:block;font-size:14px;line-height:1.4}.partner-card small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px}.partner-card:hover,.partner-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 30px #15385320}.partner-marquee:hover .partner-track,.partner-marquee:focus-within .partner-track{animation-play-state:paused}
@keyframes partner-photo-scroll{to{transform:translateX(calc(-50% - 9px))}}
@media(max-width:820px){.claims{padding:40px 22px}.claims-heading,.claims-layout{grid-template-columns:1fr}.claims-heading{gap:10px;margin-bottom:22px}.claims-heading h2{font-size:30px}.claims-layout{gap:22px}.claims-steps li{grid-template-columns:38px minmax(0,1fr)}.claims-footer{align-items:flex-start;flex-direction:column;gap:14px}.partners{padding:38px 0 42px}.partners-heading{grid-template-columns:1fr;gap:8px;padding:0 22px}.partners-heading h2{font-size:25px}.partner-track{animation-duration:58s}.partner-card{flex-basis:235px}}
@media(prefers-reduced-motion:reduce){.partner-marquee{overflow-x:auto;mask-image:none}.partner-track{animation:none!important}.partner-card{transition:none!important}}

/* Vầng sáng nền hero: dựng lại radial-gradient đã gỡ, nhưng có chiều sâu và thở chậm. */
.hero{position:relative}
.hero-copy,.hero-stage{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════════
   TẦNG NÂNG CẤP — Taste Skill lever 1 (typography) + 3 (hiệu chỉnh)
   Sàn cỡ chữ: nội dung có nghĩa ≥16px, nhãn phụ ≥13px, không còn 11-12px.
   Thang bo góc có luật: nút = viên thuốc, thẻ/ảnh = 16px, chip nhỏ = 10px.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --r-pill:999px;   /* mọi thứ bấm được */
  --r-card:16px;    /* thẻ, ảnh, khối */
  --r-chip:10px;    /* nhãn nhỏ, ô nhập */
  --tap:44px;       /* vùng bấm tối thiểu */
}

/* — sàn cỡ chữ — */
body{font-size:16px;line-height:1.6}
nav{font-size:15px}
.phone{font-size:15px;min-height:var(--tap);display:inline-flex;align-items:center}
.preview{font-size:13px;padding:9px 12px;line-height:1.5}
.kicker{font-size:13px;letter-spacing:.1em}
.primary,.solution-copy>a,.text-link,.secondary-link{font-size:16px;min-height:var(--tap)}
.micro-info,.micro-info li{font-size:16px;line-height:1.6}
.process p,.process h3{font-size:16px}
.process h3{font-weight:700}
.claims-steps p,.claims-steps h3,.claims-footer p{font-size:16px;line-height:1.65}
.solution-copy p,.hero-copy>p:not(.kicker){font-size:16px}
.hero-tile:after{font-size:13px}
.partner-track,.partner-card small{font-size:15px}
.partner-card strong{font-size:16px}
footer,.site-footer,.site-footer p,.site-footer address,.footer-contact a{font-size:15px;line-height:1.7}
.proof-points dt{font-size:13px;line-height:1.5}
.source-note,.entity-description,figcaption{font-size:15px;line-height:1.6}

/* — thang bo góc thống nhất — */
.primary,.solution-copy>a,.phone,.text-link,.secondary-link,.pill,.marquee-pause{border-radius:var(--r-pill)}
.hero-tile,.visual,.partner-card,.claims-visual,.claims-visual img{border-radius:var(--r-card)}
.hero-tile:after,.proof-points>div{border-radius:var(--r-chip)}

/* — vùng bấm và focus — */
a,button{-webkit-tap-highlight-color:transparent}
.primary,.solution-copy>a,.text-link,.secondary-link,.phone,.marquee-pause{
  display:inline-flex;align-items:center;justify-content:center;
}
:focus-visible{outline:3px solid var(--blue,#063d79);outline-offset:3px;border-radius:4px}

/* ═══════════════════════════════════════════════════════════════════
   LỚP CHIỀU SÂU HERO — CSS 3D thật, không phải ảnh phẳng nghiêng.
   Ba mặt cong đặt ở ba độ sâu translateZ khác nhau trong không gian
   preserve-3d của .hero-stage. Perspective có sẵn 900px lo phần chiếu,
   nên các lớp tự giãn cách theo luật phối cảnh, và parallax giữa chúng
   là parallax thật chứ không phải dịch chuyển giả.
   ═══════════════════════════════════════════════════════════════════ */
/* ---- LỚP CHIỀU SÂU: xem khối "MẶT PHẲNG 3D" ở cuối file ---- */

/* nền tĩnh thay thế khi WebGL không chạy: chính ba lớp trên đã là nền tĩnh */


/* Chữ và CTA phải nằm trên vùng nền yên — không lớp nào chạy dưới cột chữ */
.hero-copy{position:relative;z-index:2}
.hero-stage{position:relative;z-index:1}

/* ── Tương tác thẻ: siết đúng biên độ brief (tilt 4-6°, nâng 16-24px, zoom 1.03-1.05) ── */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-tile.is-tilting{
    transform:perspective(900px)
      rotateY(var(--pointer-x,0deg)) rotateX(var(--pointer-y,0deg))
      translateY(-20px) translateZ(24px) scale(1.04);
    box-shadow:0 26px 48px #14355526;
    z-index:10;
  }
}

/* ── Marquee: 50s/vòng theo brief, dừng khi hover/focus hoặc khi bấm tạm dừng ── */
.partner-track{animation-duration:50s}
.partner-marquee:focus-within .partner-track{animation-play-state:paused}
.partner-track[data-paused="true"]{animation-play-state:paused}
.marquee-pause{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap);padding:10px 18px;margin:0 0 14px;
  background:#fff;border:1px solid #d3dde6;color:var(--ink,#071f43);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.marquee-pause:hover{border-color:#9db6cc}

/* ── Phá thế lặp: 4 khối sản phẩm đang giống hệt nhau, đảo chiều khối thứ 2 ── */
@media(min-width:821px){
  .solution.alt{direction:rtl}
  .solution.alt>*{direction:ltr}
}

/* ── Reduced motion: mọi thứ đứng yên, giữ nguyên bố cục ── */
@media(prefers-reduced-motion:reduce){
  .hero-depth span{transition:none!important;transform:translateZ(var(--z))!important}
  .partner-track{animation:none!important}

}

/* ── Mobile: bỏ lớp chiều sâu cho nhẹ, bốn lựa chọn phải rõ và không chồng ── */
@media(max-width:820px){
  .hero-depth{display:none}
  .marquee-pause{margin-left:22px}
}

/* ── Parallax theo cuộn, làm bằng nền tảng thay vì JS nghe sự kiện scroll ── */
@supports (animation-timeline: view()){
  @media (min-width:821px) and (prefers-reduced-motion:no-preference){
    .hero-tile{animation:tile-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .t1{--drift:12px}.t2{--drift:-12px}.t3{--drift:24px}.t4{--drift:-24px}
    @keyframes tile-drift{from{translate:0 calc(var(--drift) * -1)}to{translate:0 var(--drift)}}
  }
}

/* ── Hiệu chỉnh sàn chữ: hai chỗ có luật đặc hiệu cao hơn hoặc !important ── */
.cargo-utility .solution-copy p,.solution .solution-copy p{font-size:16px;line-height:1.65}
.entity-description{font-size:15px!important;line-height:1.6}
.source-note{font-size:14px;line-height:1.55}

/* ── Vùng bấm 44px cho điều hướng và các link nhỏ ── */
nav a{display:inline-flex;align-items:center;min-height:var(--tap,44px)}
header .brand{display:inline-flex;align-items:center;min-height:var(--tap,44px)}
.footer-contact a,.site-footer a{display:inline-flex;align-items:center;min-height:36px}
.skip:focus{min-height:var(--tap,44px);display:inline-flex;align-items:center}
.partner-card{display:block;min-height:var(--tap,44px)}

/* ── Sàn chữ, lượt cuối: bốn luật cũ dùng !important hoặc đặc hiệu cao hơn ── */
.trust-copy .entity-description{font-size:15px!important;line-height:1.6!important}
.source-note,.trust-block .source-note{font-size:14px!important;line-height:1.6!important}
.claims-visual figcaption{font-size:14px;line-height:1.55}
.partners-heading>p:not(.kicker){font-size:15px;line-height:1.65}

/* ── Sửa lỗi do tầng nâng cấp gây ra: inline-flex nuốt dấu cách trong logo ── */
header .brand{display:inline-block;min-height:0;padding:11px 0;line-height:1.2}
.skip{min-height:var(--tap,44px)}
.footer-contact a{min-height:var(--tap,44px)}

/* eyebrow hero còn 12px do luật đặc hiệu cũ, kéo về 13px cho khớp sàn */
.hero .kicker,.hero-copy .kicker{font-size:13px}

/* ── Logo gốc PVI (file nguyên bản từ CDN PVI, không chỉnh sửa) + tên đơn vị ── */
.brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap,44px);padding:0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.brand img{width:auto;height:34px;display:block;flex:0 0 auto}
.brand span{font-weight:600}
.site-footer .brand img{height:30px}
@media(max-width:820px){.brand img{height:29px}.brand{font-size:18px;gap:8px}}

/* ═══════════════════════════════════════════════════════════════════
   MẶT PHẲNG 3D SAU CỤM SẢN PHẨM
   Ba mặt cong thật, xoay trong không gian preserve-3d của .hero-stage
   (perspective 900px có sẵn). Mỗi mặt có cạnh và bóng đổ riêng nên mắt
   đọc ra được thứ tự trước sau — đó là "độ chồng lớp rõ".
   Lớp gần dịch nhiều hơn lớp xa khi rê chuột: parallax thật, không giả.
   ═══════════════════════════════════════════════════════════════════ */
.hero-depth{
  position:absolute;inset:-22% -14%;z-index:0;pointer-events:none;
  transform-style:preserve-3d;
  background:radial-gradient(58% 52% at 62% 38%,#dceefc 0,rgba(238,248,255,.55) 46%,transparent 74%);
}
.hero-depth span{
  position:absolute;display:block;
  transform-style:preserve-3d;will-change:transform;
  transform:translateZ(var(--z)) rotateY(var(--ry)) rotateX(var(--rx)) translate3d(var(--px,0),var(--py,0),0);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(135deg,rgba(198,226,248,.92) 0,rgba(232,245,255,.68) 52%,rgba(248,252,255,.45) 100%);
  border:1px solid rgba(22,79,135,.16);
  box-shadow:0 26px 52px rgba(11,52,94,.13),0 2px 6px rgba(11,52,94,.06);
}
/* xa nhất: to, nghiêng mạnh, bo một góc rất lớn cho ra dáng mặt cong */
.hero-depth .d1{--z:-250px;--ry:-24deg;--rx:9deg;
  inset:2% 26% 26% 2%;border-radius:38px 120px 38px 96px;opacity:.9}
/* giữa: đúng vị trí vầng sáng cũ 78%/35% */
.hero-depth .d2{--z:-140px;--ry:-15deg;--rx:5deg;
  inset:8% 2% 34% 40%;border-radius:104px 32px 88px 32px;opacity:.82}
/* gần nhất: nhỏ, đậm cạnh nhất, làm điểm tựa dưới cụm thẻ */
.hero-depth .d3{--z:-64px;--ry:-28deg;--rx:11deg;
  inset:52% 20% 2% 22%;border-radius:32px 84px 32px 72px;opacity:.7}

/* trôi rất chậm, chỉ transform nên không đụng layout */
@media (prefers-reduced-motion:no-preference){
  .hero-depth .d1{animation:depth-drift-a 19s ease-in-out infinite alternate}
  .hero-depth .d2{animation:depth-drift-b 23s ease-in-out infinite alternate}
  .hero-depth .d3{animation:depth-drift-a 27s ease-in-out infinite alternate reverse}
}
@keyframes depth-drift-a{
  from{translate:0 0}
  to{translate:14px -12px}
}
@keyframes depth-drift-b{
  from{translate:0 0}
  to{translate:-12px 10px}
}

/* logo không được xuống dòng */
.brand{flex-wrap:nowrap;white-space:nowrap}
/* mặt phẳng 3D không được tràn xuống section dưới */
.hero{overflow:hidden}
.hero-depth{inset:-26% -16%}

/* rule inline-block cũ (cứu dấu cách khi logo còn là chữ) giờ làm logo ảnh xuống dòng */
header .brand{display:inline-flex;align-items:center;gap:10px;padding:0;flex-wrap:nowrap;white-space:nowrap}

/* point cloud 3D: phủ trọn vùng cụm sản phẩm, nằm sau thẻ, không bắt chuột */


@media(prefers-reduced-motion:reduce){#hero-cloud{display:none}}

/* ── Cân lại lớp nền: point cloud làm chính, mặt phẳng CSS lùi về làm khí quyển ── */
.hero-depth{inset:-42% -26%}
.hero-depth .d1{opacity:.34}
.hero-depth .d2{opacity:.3}
.hero-depth .d3{opacity:.26}
.hero-depth span{box-shadow:0 20px 44px rgba(11,52,94,.07);border-color:rgba(22,79,135,.10)}

/* ═══════════════════════════════════════════════════════════════════
   DÒNG HẠT CHẢY DỌC — canvas cố định toàn màn hình, nằm dưới mọi nội dung.
   Phải đặt ngoài .hero vì .hero-stage có perspective, mà perspective tạo
   containing block khiến position:fixed bị neo vào nó thay vì vào viewport.
   ═══════════════════════════════════════════════════════════════════ */
#hero-cloud{position:fixed;inset:0;width:100vw;height:100vh;display:block;pointer-events:none;z-index:0}
body>.preview,body>header,body>main,body>footer,body>.skip{position:relative;z-index:1}

/* hai section này nền đục sẽ cắt đứt dòng chảy, làm trong nhẹ để nó liền mạch */
.process{background:rgba(238,248,255,.78)}
.partners{background:rgba(255,255,255,.72)}


@media(prefers-reduced-motion:reduce){#hero-cloud{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   CHÂN TRANG — nền riêng để chữ không đọ nhau với dòng hạt phía sau,
   phân cấp rõ ba cột, dải cuối nhắc lại trạng thái bản thử.
   Toàn bộ dữ liệu pháp nhân, địa chỉ, số điện thoại giữ nguyên không đổi.
   ═══════════════════════════════════════════════════════════════════ */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0,#fff 42%);
  border-top:1px solid #e1eaf1;
  max-width:none;padding:52px max(28px,calc((100vw - var(--content,1220px))/2)) 0;
  grid-template-columns:1.35fr 1.25fr 1fr;gap:56px;align-items:start;
}
.footer-label{
  display:block;margin-bottom:12px;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
.site-footer address strong,.footer-contact strong{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px
}
.site-footer .brand{margin-bottom:4px}
.site-footer .brand img{height:36px}
.footer-identity p{margin:12px 0 0}
.footer-identity strong:not(.footer-label){color:var(--ink);font-weight:700}
.footer-contact a{color:#165a9c;font-weight:700}
.footer-contact a:first-of-type{font-size:19px;letter-spacing:-.01em}

.footer-bottom{
  grid-column:1/-1;margin-top:44px;padding:18px 0 24px;
  border-top:1px solid #e8eef4;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
  color:var(--muted);font-size:14px
}
.footer-bottom p{margin:0}

@media(max-width:820px){
  .site-footer{grid-template-columns:1fr;gap:26px;padding:34px 22px 0}
  .footer-bottom{margin-top:28px;padding:16px 0 22px;display:block}
  .footer-bottom p+p{margin-top:6px}
}

/* ═══════════════════════════════════════════════════════════════════
   QUẦNG SÁNG SAU CHỮ — chữ phải luôn thắng dải hạt, bất kể nó đi đường nào.
   Cần thiết vì các khối đảo chiều có chữ nằm bên phải, đúng chỗ dải đậm nhất.
   Dùng radial mềm, không phải hộp trắng, nên không lộ cạnh trên nền trắng.
   ═══════════════════════════════════════════════════════════════════ */
.hero-copy,.solution-copy,.section-intro,.claims-heading,.partners-heading,.trust-copy,.process>div,.claims-steps{position:relative}
.hero-copy::before,.solution-copy::before,.section-intro::before,.claims-heading::before,
.partners-heading::before,.trust-copy::before,.claims-steps::before{
  content:"";position:absolute;inset:-22px -30px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.94) 0,rgba(255,255,255,.80) 58%,rgba(255,255,255,0) 100%);
}

/* Hai nút CTA trong khối sản phẩm đang dính sát nhau (cách 0px) nên nhìn như đè lên nhau. */
.solution-copy>a{margin:14px 20px 0 0}

/* ── Đối tác theo nhóm sản phẩm: danh sách kẻ chỉ dưới dải ảnh; nguồn PVI bấm được, nguồn khác ghi bằng chữ ── */
.partner-groups{max-width:var(--content);margin:40px auto 0;padding:0 28px}
.partner-groups h3{font-size:20px;line-height:1.35;letter-spacing:-.015em;margin:0 0 16px;color:var(--ink)}
.pg-group{background:#fff;border:1px solid #e1e6eb;border-radius:var(--r-card,16px);box-shadow:0 8px 22px #1538530d;overflow:hidden}
.pg-group+.pg-group{margin-top:16px}
.pg-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding:18px 24px 14px;border-bottom:1px solid #e8edf2;background:linear-gradient(180deg,#f7f9fb,#fff)}
.pg-group-head h4{margin:0;padding-left:12px;border-left:3px solid var(--blue);font-size:17px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.pg-group-head p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.pg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-list li{border-top:1px solid #eef2f5}
.pg-list li:nth-child(-n+2){border-top:0}
.pg-list li:nth-child(odd){border-right:1px solid #eef2f5}
.pg-item{display:flex;flex-direction:column;gap:4px;height:100%;min-height:var(--tap,44px);padding:16px 24px 16px}
.pg-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.pg-name strong{font-size:16px;line-height:1.4;color:var(--ink);transition:color .2s}
.pg-date{display:inline-block;padding:1px 8px;border-radius:999px;background:#eef3f8;color:var(--blue);font-size:13px;line-height:1.6;font-weight:600;font-variant-numeric:tabular-nums}
.pg-desc{font-size:15px;line-height:1.55;color:var(--muted)}
.pg-src{margin-top:2px;font-size:13px;line-height:1.5;color:#5d6b7a}
a.pg-item .pg-src{color:var(--blue);font-weight:600}
a.pg-item .pg-src span{display:inline-block;margin-left:4px;transition:transform .2s}
a.pg-item{transition:background-color .2s}
a.pg-item:hover,a.pg-item:focus-visible{background:#f5f8fb}
a.pg-item:hover strong,a.pg-item:focus-visible strong{color:var(--blue)}
a.pg-item:hover .pg-src span,a.pg-item:focus-visible .pg-src span{transform:translate(2px,-2px)}
@media(max-width:820px){
  .partner-groups{margin-top:30px;padding:0}
  .partner-groups h3{font-size:19px;margin-bottom:12px}
  .pg-group-head{display:block;padding:16px 16px 12px}
  .pg-group-head p{margin-top:4px}
  .pg-list{grid-template-columns:1fr}
  .pg-list li:nth-child(2){border-top:1px solid #eef2f5}
  .pg-list li:nth-child(odd){border-right:0}
  .pg-item{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.pg-name strong,a.pg-item,a.pg-item .pg-src span{transition:none}}
/* Link chéo sang trang giải pháp của baohiempvi-vn (chủ site yêu cầu 15/10/2026), nằm dưới bốn thẻ sản phẩm */
.hero-all{grid-column:2;justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:-6px;padding:10px 20px;border:1px solid #c9dcef;border-radius:999px;background:#fff;color:var(--blue);font-size:15px;font-weight:700;box-shadow:0 10px 24px rgba(6,61,121,.08);transition:border-color .2s,box-shadow .2s,transform .2s}
.hero-all span{transition:transform .2s}
.hero-all:hover{border-color:var(--blue);box-shadow:0 14px 30px rgba(6,61,121,.14);transform:translateY(-1px)}
.hero-all:hover span{transform:translate(2px,-2px)}
@media(max-width:820px){.hero-all{grid-column:1;justify-self:center;margin-top:4px}}