/* Trang "Phần mềm làm nhanh" (19/10/2026) – chỉ nạp ở trang này, bổ sung cho pillar-tech.css */
.pf-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px 14px 5px 5px; border: 1px solid rgba(227,30,36,.45); border-radius: 999px; background: rgba(227,30,36,.08); font-size: 13.5px; font-weight: 600; color: inherit; }
.pf-badge span { padding: 4px 10px; border-radius: 999px; background: #E31E24; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.pf-hero__vis { position: relative; min-height: 340px; }
.pf-win { background: #fff; color: #1f2330; border: 1px solid #d9dde4; border-radius: 12px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); overflow: hidden; max-width: 440px; }
.pf-win__bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; background: #f3f4f7; border-bottom: 1px solid #e3e6ec; font-size: 12.5px; color: #5b6270; }
.pf-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3d7de; }
.pf-win__bar i:first-child { background: #ff6b64; } .pf-win__bar i:nth-child(2) { background: #ffbd2e; } .pf-win__bar i:nth-child(3) { background: #28c840; }
.pf-win__bar span { margin-left: 8px; font-weight: 600; }
.pf-win__bd { padding: 14px; }
.pf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pf-kpis p { margin: 0; padding: 10px; border: 1px solid #e3e6ec; border-radius: 8px; }
.pf-kpis small { display: block; font-size: 11.5px; color: #6b7280; }
.pf-kpis b { font-size: 20px; font-weight: 800; color: #1f2330; }
.pf-rows { list-style: none; margin: 0; padding: 0; }
.pf-rows li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 2px; border-top: 1px solid #eceef2; font-size: 13px; }
.pf-rows em { font-style: normal; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pf-rows .ok { background: #e3f6e8; color: #187a36; } .pf-rows .wait { background: #fff1d6; color: #9a6200; } .pf-rows .new { background: #e3ecff; color: #1d4fb3; }
.pf-phone { position: absolute; right: 0; bottom: 18px; width: 190px; padding: 10px; border: 2px solid #2a2f3d; border-radius: 28px; background: #111522; box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); }
.pf-phone__scr { padding: 14px 12px 16px; border-radius: 20px; background: #f5f6f9; color: #1f2330; }
.pf-phone__top { margin: 0 0 10px; font-weight: 800; font-size: 14px; }
.pf-phone__c { margin-bottom: 8px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #e3e6ec; }
.pf-phone__c b { display: block; font-size: 13px; } .pf-phone__c span { font-size: 11.5px; color: #6b7280; }
.pf-phone__c--red { background: #E31E24; border-color: #E31E24; } .pf-phone__c--red b, .pf-phone__c--red span { color: #fff; }
.pf-hero__vis .pt-note { position: absolute; left: 0; bottom: -6px; margin: 0; }

.pf-strip { background: #E31E24; color: #fff; }
.pf-strip__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pf-strip__in p { margin: 0; padding: 16px 18px; border-left: 1px solid rgba(255,255,255,.28); }
.pf-strip__in p:first-child { border-left: 0; }
.pf-strip__in b { display: block; font-size: 16px; }
.pf-strip__in span { font-size: 13.5px; opacity: .92; }

.pf-guar { position: relative; padding: clamp(48px, 6vw, 88px) 0; background: linear-gradient(135deg, #9d0f15, #d3181f 60%, #e8353a); color: #fff; overflow: hidden; }
.pf-guar::after { content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%; border: 56px solid rgba(255,255,255,.07); }
.pf-guar__in { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
.pf-guar__k { margin: 0 0 12px; font: 700 13px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.pf-guar h2 { margin: 0 0 16px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.15; font-weight: 800; color: #fff; }
.pf-guar p { max-width: 58ch; margin: 0 0 14px; line-height: 1.7; color: rgba(255,255,255,.94); }
.pf-guar .pf-guar__fine { font-size: 14px; opacity: .85; }
.pf-guar__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pf-guar__steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.pf-guar__steps b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #c5161d; font-size: 16px; }
.pf-guar__steps strong { display: block; margin-bottom: 2px; font-size: 16px; }
.pf-guar__steps span { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.92); }

.pf-ex { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pf-ex__c { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.04); }
.pf-ex__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pf-ex__b { padding: 18px 20px 22px; }
.pf-ex__tag { margin: 0 0 8px; font: 600 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: #ff8d90; }
.pf-ex__b h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.pf-ex__b p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; opacity: .9; }

@media (min-width: 900px) { .pf-guar__in { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
@media (max-width: 760px) {
  .pf-strip__in { grid-template-columns: 1fr 1fr; }
  .pf-strip__in p:nth-child(3) { border-left: 0; }
  .pf-hero__vis { min-height: 0; padding-bottom: 28px; }
  .pf-phone { position: relative; right: auto; bottom: auto; margin: -40px 0 0 auto; width: 170px; }
  .pf-hero__vis .pt-note { bottom: 0; }
}

/* Banner nổi bật trên trang Thiết kế website / Công nghệ */
.pf-promo { position: relative; background: linear-gradient(120deg, #a5111a, #dc1c23 62%, #ee3b40); color: #fff; overflow: hidden; }
.pf-promo::after { content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 44px solid rgba(255,255,255,.08); }
.pf-promo__in { position: relative; z-index: 1; display: grid; gap: 18px; align-items: center; padding: 26px 0; }
.pf-promo__k { margin: 0 0 6px; display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; color: #c5161d; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.pf-promo h2 { margin: 6px 0 6px; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; font-weight: 800; color: #fff; }
.pf-promo p { margin: 0; max-width: 64ch; line-height: 1.6; color: rgba(255,255,255,.94); font-size: 15px; }
.pf-promo .pt-btn { justify-self: start; white-space: nowrap; }
@media (min-width: 820px) { .pf-promo__in { grid-template-columns: 1fr auto; gap: 32px; } }

/* chỉnh sau lần xem đầu */
.pf-hero__vis .pf-win { max-width: none; width: calc(100% - 96px); }
.pf-guar .pt-btn--w { background: #fff !important; color: #b3121a !important; border-color: #fff !important; }
.pf-guar .pt-btn--w:hover { background: #fdecec !important; }
.pf-guar .pt-btn--o { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.8) !important; }
.pf-guar .pt-btn--o:hover { background: rgba(255,255,255,.14) !important; }
.pf-promo .pt-btn--w { background: #fff !important; color: #b3121a !important; border-color: #fff !important; }
#nhanh-re .pt-log { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pf-promo .pf-promo__k { color: #c5161d !important; background: #fff !important; }
.pf-promo h2 { color: #fff !important; }
.pf-hero__vis .pf-win { width: calc(100% - 150px); min-width: 320px; }
.pf-kpis b { font-size: 17px; }
.pf-rows li { font-size: 12.5px; }
@media (max-width: 760px) { .pf-hero__vis .pf-win { width: 100%; min-width: 0; } }
.pf-hero__vis .pf-win { width: min(390px, calc(100% - 210px)); }
@media (max-width: 760px) { .pf-hero__vis .pf-win { width: 100%; } .pf-phone { margin: 14px 0 0 auto; } }