/*
Theme Name: 52pc-theme-child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* =========================================================================
   52PC.VN — CUSTOM CSS cho Flatsome
   Dán toàn bộ file này vào: Flatsome → Theme Options → Style → Custom CSS
   (hoặc child theme style.css). Sau khi lưu: Theme Options → Advanced →
   "Regenerate CSS" + xoá cache plugin.

   Mọi class đều có tiền tố .pc52- nên không đụng chạm phần còn lại của site.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. TOKENS
   ---------------------------------------------------------------------- */
:root{
  --pc52-blue:#0a64d6;
  --pc52-blue-dark:#0a4aa0;
  --pc52-blue-ink:#082a5e;
  --pc52-cyan:#19a7e0;
  --pc52-gold:#f5a623;
  --pc52-ink:#15233b;
  --pc52-text:#3b4a61;
  --pc52-muted:#6b7a92;
  --pc52-line:#e4eaf2;
  --pc52-soft:#f4f7fb;
  --pc52-radius:12px;
  --pc52-sh-sm:0 1px 2px rgba(16,42,80,.06), 0 2px 8px rgba(16,42,80,.05);
  --pc52-sh-md:0 10px 24px -8px rgba(16,42,80,.16);
  --pc52-sh-lg:0 24px 50px -16px rgba(16,42,80,.24);
}

/* Font Inter — bỏ qua nếu đã chọn Inter trong Theme Options → Typography */
body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }

html{ scroll-behavior:smooth; }

/* Neo cho menu #services, #pricing… (chừa chỗ cho header sticky) */
.pc52-anchor{ display:block; width:0; height:0; scroll-margin-top:100px; }

/* -------------------------------------------------------------------------
   1. RESET CHỐNG UX BUILDER  ── BẮT BUỘC GIỮ
   UX Builder bọc text trong <p>…<br></p> mỗi lần Save. Hai rule này khiến
   CSS bên dưới vẫn ăn sau khi mở builder và lưu lại.
   ---------------------------------------------------------------------- */
.text[class*="pc52-"] > p{
  margin:0!important; padding:0!important;
  color:inherit!important; font:inherit!important;
}
.text[class*="pc52-"] > p > br{ display:none!important; }
.text[class*="pc52-"] > p > a{ color:inherit; }

/* Flatsome cho .text sẵn margin-bottom:1em → về 0, khoảng cách khai báo
   tường minh ở từng khối bên dưới (mọi override đều dùng !important). */
.text[class*="pc52-"]{ margin:0; }

/* Ảnh trong ux_image không dính margin thừa */
.img[class*="pc52-"]{ margin:0!important; }

/* -------------------------------------------------------------------------
   2. NÚT (Flatsome đưa class lên chính thẻ <a class="button …">)
   ---------------------------------------------------------------------- */
.button.pc52-btn,
.button.pc52-hotline{
  text-transform:none!important; letter-spacing:0!important;
  font-weight:600!important; border-radius:8px!important;
  min-height:0!important; line-height:1.2!important;
  border:1px solid transparent!important;
  transition:.15s!important;
}
.button.pc52-btn{
  font-size:16px!important; padding:13px 26px!important;
  margin:0 14px 0 0!important;
}
.button.pc52-btn--primary{
  background:linear-gradient(135deg,#1e90ff,#19a7e0)!important; color:#fff!important;
  box-shadow:0 14px 34px -10px rgba(25,167,224,.7), inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.button.pc52-btn--primary:hover{
  background:linear-gradient(135deg,#3aa0ff,#28b6ef)!important; transform:translateY(-2px);
}
.button.pc52-btn--ghost{
  background:rgba(255,255,255,.06)!important; color:#fff!important;
  border-color:rgba(255,255,255,.28)!important; box-shadow:none!important;
}
.button.pc52-btn--ghost:hover{ background:rgba(255,255,255,.12)!important; border-color:#fff!important; }
.button.pc52-btn--gold{
  background:var(--pc52-gold)!important; color:#3a2700!important; box-shadow:none!important;
}
.button.pc52-btn--gold:hover{ background:#e0951a!important; }

.button.pc52-hotline{
  background:#fff!important; color:var(--pc52-blue)!important;
  font-size:24px!important; font-weight:800!important; letter-spacing:.5px!important;
  padding:14px 28px!important; margin:0!important; box-shadow:none!important;
}
.button.pc52-hotline:hover{ background:var(--pc52-soft)!important; }
.button.pc52-hotline i{ font-size:24px!important; margin-right:10px!important; }

/* -------------------------------------------------------------------------
   3. HERO
   ---------------------------------------------------------------------- */
.pc52-hero{
  position:relative; overflow:hidden; color:#e7eefb;
  padding:78px 0 84px!important;
  background:
    radial-gradient(760px 460px at 80% 4%, rgba(25,167,224,.28), transparent 58%),
    radial-gradient(640px 480px at 6% 104%, rgba(245,166,35,.12), transparent 55%),
    linear-gradient(155deg,#06182f 0%, #0a2a5c 52%, #071c3a 100%)!important;
}
.pc52-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 70% at 75% 25%,#000,transparent 75%);
  mask-image:radial-gradient(70% 70% at 75% 25%,#000,transparent 75%);
}
.pc52-hero .section-content{ position:relative; z-index:1; }
.pc52-hero__row > .col{ padding-bottom:0; }

/* eyebrow */
.pc52-eyebrow{
  display:inline-flex!important; align-items:center; gap:9px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#cfe0f6; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius:30px;
  padding:8px 16px; margin-bottom:24px!important; backdrop-filter:blur(6px);
}
.pc52-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--pc52-gold); box-shadow:0 0 10px 1px rgba(245,166,35,.7);
}

.pc52-hero__title{ margin-bottom:18px!important; }
.pc52-hero__title h1{
  color:#fff!important; font-weight:800; line-height:1.2; letter-spacing:-.02em;
  font-size:clamp(2.1rem,4.4vw,3.25rem); margin:0!important;
}
.pc52-accent{
  background:linear-gradient(100deg,#4fb4ff,#19a7e0 60%,#9fd8ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pc52-hero__lead{
  color:#b9c9e4!important; font-size:18px; line-height:1.6;
  max-width:520px; margin-bottom:32px!important;
}

/* 3 chỉ số dưới hero */
.pc52-stats{
  margin:38px 0 0!important; padding-top:30px;
  border-top:1px solid rgba(255,255,255,.14);
}
.pc52-stats .col-inner{ padding:0; }
.pc52-stats__item{ padding-bottom:0!important; }
.pc52-stats__num{
  font-size:24px!important; font-weight:800; color:#fff!important;
  line-height:1.2; white-space:nowrap;
}
.pc52-stats__label{ font-size:14px!important; color:#9fb2d4!important; }

/* cột ảnh + 2 badge nổi */
.pc52-hero__visual .col-inner{ position:relative; }
.pc52-hero__visual .col-inner::before{
  content:""; position:absolute; z-index:0; inset:-6% -4% -10% -4%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(25,167,224,.55), rgba(25,167,224,0) 72%);
  filter:blur(20px);
}
.pc52-hv-image{
  position:relative; z-index:1; border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
}
.pc52-hv-image, .pc52-hv-image .img-inner{ height:486px!important; }
.pc52-hv-image img{ width:100%!important; height:100%!important; object-fit:cover!important; }
.pc52-hv-image::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(160deg, rgba(7,24,48,.10), rgba(7,24,48,.55));
}

.pc52-hv-badge{
  position:absolute!important; z-index:3;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7); border-radius:16px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
}
@keyframes pc52-floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.pc52-hv-shield{
  top:26px; left:-26px; display:flex!important; align-items:center; gap:12px;
  padding:13px 16px; animation:pc52-floaty 5s ease-in-out infinite;
}
.pc52-hv-shield::before{
  content:"✓"; flex:none; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; color:#fff; font-size:18px; font-weight:800;
  background:linear-gradient(135deg,var(--pc52-gold),#e0951a);
}
.pc52-hv-shield__tx b{ display:block; font-size:14px; color:var(--pc52-ink); font-weight:700; }
.pc52-hv-shield__tx small{ display:block; font-size:13px; color:var(--pc52-muted); }

.pc52-hv-swap{
  bottom:26px; left:-28px; right:38px; padding:16px 18px;
  animation:pc52-floaty 5.5s ease-in-out infinite .4s;
}
.pc52-hv-swap__row{
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
}
.pc52-hv-swap__row .old{
  flex:1; text-align:center; font-size:14px; color:var(--pc52-muted);
  padding:7px 0; border:1px dashed var(--pc52-line); border-radius:8px;
}
.pc52-hv-swap__row .arrow{ color:var(--pc52-blue); font-size:20px; font-weight:800; }
.pc52-hv-swap__row .new{
  flex:1; text-align:center; font-size:14px; font-weight:700; color:#fff;
  padding:8px 0; border-radius:8px;
  background:linear-gradient(135deg,var(--pc52-blue),var(--pc52-cyan));
}
.pc52-hv-swap__cap{ display:block; font-size:13px; color:var(--pc52-muted); font-weight:600; }

@media(prefers-reduced-motion:reduce){ .pc52-hv-badge{ animation:none!important; } }

/* -------------------------------------------------------------------------
   4. TRUST BAR
   ---------------------------------------------------------------------- */
.pc52-trust{
  background:#fff!important; border-bottom:1px solid var(--pc52-line);
  padding:30px 0 10px!important;
}
.pc52-trust__col{ padding-bottom:20px; }
.pc52-trust__col .col-inner{
  height:100%; display:flex; align-items:center; gap:14px; padding:16px 18px;
  border:1px solid var(--pc52-line); border-radius:var(--pc52-radius); background:#fff;
  box-shadow:var(--pc52-sh-sm); transition:transform .18s ease, box-shadow .18s ease;
}
.pc52-trust__col .col-inner:hover{ transform:translateY(-3px); box-shadow:var(--pc52-sh-md); }
.pc52-trust__col .col-inner::before{
  content:""; flex:none; width:32px; height:32px;
  background-repeat:no-repeat; background-position:center; background-size:32px 32px;
}
.pc52-trust__item b{ display:block; font-size:16px; color:var(--pc52-ink); font-weight:700; }
.pc52-trust__item span{ display:block; font-size:14px; color:var(--pc52-muted); }

/* -------------------------------------------------------------------------
   5. TIÊU ĐỀ SECTION dùng chung
   ---------------------------------------------------------------------- */
.pc52-sechead{ max-width:660px; margin:0 auto; padding-bottom:44px!important; }
.pc52-tag{
  display:inline-flex!important; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pc52-blue)!important;
}
.pc52-tag::before, .pc52-tag::after{
  content:""; width:22px; height:2px; border-radius:2px; flex:none;
  background:linear-gradient(90deg,transparent,var(--pc52-blue));
}
.pc52-tag::after{ transform:scaleX(-1); }
.pc52-sechead__title{ margin:14px 0!important; }
.pc52-sechead__title h2{
  color:var(--pc52-ink)!important; font-size:2rem; font-weight:800;
  line-height:1.2; letter-spacing:-.01em; margin:0!important;
}
.pc52-sechead__sub{ font-size:18px!important; color:var(--pc52-muted)!important; line-height:1.6; }

/* -------------------------------------------------------------------------
   6. DỊCH VỤ — 6 card
   ---------------------------------------------------------------------- */
.pc52-services{ padding:76px 0 56px!important; }
.pc52-cards__row > .col{ padding-bottom:20px; }
.pc52-card .col-inner{
  height:100%; background:#fff; border:1px solid var(--pc52-line);
  border-radius:var(--pc52-radius); overflow:hidden; position:relative;
  box-shadow:var(--pc52-sh-sm); transition:transform .18s ease, box-shadow .18s ease;
}
.pc52-card .col-inner:hover{ transform:translateY(-4px); box-shadow:var(--pc52-sh-md); }
.pc52-card .col-inner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:184px; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,42,94,.18) 0%, rgba(8,42,94,0) 45%);
}
.pc52-card__img, .pc52-card__img .img-inner{ height:184px!important; }
.pc52-card__img img{ width:100%!important; height:100%!important; object-fit:cover!important; }

.pc52-card__body{
  position:relative; z-index:2; padding:24px!important;
  font-size:14px; color:var(--pc52-text);
}
/* Icon nằm trong vùng trắng của card (không còn ô nền nên không đè lên ảnh nữa) */
.pc52-card__body::before{
  content:""; display:block; width:32px; height:32px; margin:0 0 12px;
  background-repeat:no-repeat; background-position:center; background-size:32px 32px;
}
.pc52-card__body h3{
  font-size:18px!important; font-weight:800; color:var(--pc52-ink)!important;
  line-height:1.2; margin:0 0 8px!important;
}
.pc52-card__body p{ font-size:14px; color:var(--pc52-text); margin:0; }

/* -------------------------------------------------------------------------
   7. BẢNG GIÁ
   ---------------------------------------------------------------------- */
.pc52-pricing{ padding:76px 0!important; }
.pc52-price__row > .col{ padding-bottom:20px; }
.pc52-price .col-inner{
  height:100%; position:relative; background:#fff;
  border:1px solid var(--pc52-line); border-radius:var(--pc52-radius);
  padding:30px 22px; box-shadow:var(--pc52-sh-sm);
}
.pc52-price--feat .col-inner{
  border:1.5px solid var(--pc52-blue); box-shadow:var(--pc52-sh-md);
  background:linear-gradient(180deg,#f5f9ff,#fff);
}
.pc52-price__pill{
  position:absolute!important; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--pc52-blue); color:#fff!important;
  font-size:13px!important; font-weight:600; white-space:nowrap;
  padding:4px 12px; border-radius:20px; z-index:2;
}
.pc52-price__name{
  font-size:14px!important; color:var(--pc52-text)!important; font-weight:600;
  min-height:42px; display:flex!important; align-items:center; justify-content:center;
}
.pc52-price__amt{
  font-size:2rem!important; font-weight:800; color:var(--pc52-blue-ink)!important;
  letter-spacing:-.02em; margin:8px 0 2px!important; line-height:1.2;
}
.pc52-price__note{ font-size:13px!important; color:var(--pc52-muted)!important; }
.pc52-price__footcol{ padding:8px 15px 0!important; }
.pc52-price__foot{ font-size:14px!important; color:var(--pc52-muted)!important; }

/* -------------------------------------------------------------------------
   8. QUY TRÌNH
   ---------------------------------------------------------------------- */
.pc52-process{ padding:76px 0 52px!important; }
.pc52-steps__row > .col{ padding-bottom:24px; }
.pc52-step__num{
  width:44px; height:44px; border-radius:8px;
  background:var(--pc52-blue); color:#fff!important;
  display:grid!important; place-items:center;
  font-size:18px!important; font-weight:800; margin-bottom:16px!important;
}
.pc52-step__body{ font-size:14px; color:var(--pc52-text); }
.pc52-step__body h4{
  font-size:18px!important; font-weight:800; color:var(--pc52-ink)!important;
  line-height:1.2; margin:0 0 6px!important;
}
.pc52-step__body p{ font-size:14px; color:var(--pc52-text); margin:0; }

/* -------------------------------------------------------------------------
   9. THU CŨ ĐỔI MỚI
   ---------------------------------------------------------------------- */
.pc52-promo{ padding:0 0 76px!important; }
.pc52-promo__card{ padding-bottom:0!important; }
/* ">" là bắt buộc: nếu không, padding sẽ áp cả cho .col-inner của 2 cột bên trong */
.pc52-promo__card > .col-inner{
  background:var(--pc52-blue-ink); color:#fff;
  border-radius:var(--pc52-radius); padding:52px 48px;
}
.pc52-promo__text{ padding-bottom:0!important; }
.pc52-promo__title h2{
  color:#fff!important; font-size:2rem; font-weight:800; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 14px!important;
}
.pc52-promo__lead{ font-size:16px!important; color:#bcd2f0!important; margin-bottom:26px!important; }

.pc52-compare{ margin-bottom:26px!important; }
.pc52-compare__row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:14px 18px; margin-bottom:12px;
}
.pc52-compare__row:last-child{ margin-bottom:0; }
.pc52-compare__row .old{ font-size:14px; color:#9db6da; }
.pc52-compare__row .vs{ font-size:13px; font-weight:700; color:var(--pc52-gold); }
.pc52-compare__row .new{ font-size:14px; font-weight:700; color:#fff; }

.pc52-promo__photo{ padding-bottom:0!important; }
.pc52-promo__img{
  position:relative; border-radius:var(--pc52-radius); overflow:hidden;
  box-shadow:var(--pc52-sh-lg);
}
.pc52-promo__img, .pc52-promo__img .img-inner{ height:340px!important; }
.pc52-promo__img img{ width:100%!important; height:100%!important; object-fit:cover!important; }
.pc52-promo__img::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(135deg, rgba(10,100,214,.28), rgba(8,42,94,.10));
}

/* -------------------------------------------------------------------------
   10. CTA CUỐI
   ---------------------------------------------------------------------- */
.pc52-cta{ padding:0 0 76px!important; }
.pc52-cta__box{ padding-bottom:0!important; }
.pc52-cta__box .col-inner{
  position:relative; overflow:hidden; border-radius:16px; color:#fff;
  padding:66px 30px; box-shadow:var(--pc52-sh-lg);
  background:
    radial-gradient(600px 280px at 12% -20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--pc52-blue) 0%, var(--pc52-blue-ink) 100%);
}
.pc52-cta__box .col-inner::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:22px 22px;
}
.pc52-cta__box .col-inner > *{ position:relative; z-index:1; }
.pc52-cta__title h2{
  color:#fff!important; font-size:2rem; font-weight:800; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 12px!important;
}
.pc52-cta__sub{ font-size:18px!important; color:#dce9fb!important; margin-bottom:28px!important; }

/* -------------------------------------------------------------------------
   11. FOOTER (UX Block)
   ---------------------------------------------------------------------- */
.pc52-footer{ background:#0c1828!important; color:#9db1d2; padding:56px 0 26px!important; }
.img.pc52-footer__logo{ margin:0 0 14px!important; width:auto!important; }
.pc52-footer__logo .img-inner{ display:inline-block; }
.pc52-footer__logo img{
  height:42px!important; width:auto!important; object-fit:contain;
  background:#fff; border-radius:8px; padding:5px 8px;
}
.pc52-footer__about{ font-size:14px!important; max-width:300px; color:#8ea4c6!important; }
.pc52-footer__head h4{
  color:#fff!important; font-size:16px!important; font-weight:800;
  margin:0 0 16px!important;
}
.pc52-footer__list ul{ list-style:none!important; margin:0!important; padding:0!important; }
.pc52-footer__list li{ margin:0 0 10px!important; font-size:14px; color:#9db1d2; }
.pc52-footer__list a{ color:#9db1d2!important; }
.pc52-footer__list a:hover{ color:#fff!important; }
.pc52-footer__botrow{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; margin-top:8px; }
.pc52-footer__botcol{ padding-bottom:0!important; }
.pc52-footer__bot{ font-size:13px!important; color:#6f84a6!important; }

/* -------------------------------------------------------------------------
   12. HEADER (Header Builder) — thêm class pc52-nav-cta cho nút hotline
   ---------------------------------------------------------------------- */
.header-main{ height:68px!important; }
.header-main .nav > li > a{
  font-size:14px!important; font-weight:500!important;
  color:var(--pc52-text)!important; text-transform:none!important; letter-spacing:0!important;
}
.header-main .nav > li > a:hover{ color:var(--pc52-blue)!important; }
.button.pc52-nav-cta{
  background:var(--pc52-blue)!important; color:#fff!important;
  border-radius:8px!important; padding:10px 20px!important; margin:0!important;
  font-weight:600!important; font-size:14px!important;
  text-transform:none!important; letter-spacing:0!important; min-height:0!important;
}
.button.pc52-nav-cta:hover{ background:var(--pc52-blue-dark)!important; }

/* -------------------------------------------------------------------------
   13. ICON (SVG nhúng dạng data-URI — không bị UX Builder xoá khi lưu)
   ---------------------------------------------------------------------- */
.pc52-trust__col.pc52-ic--save .col-inner::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}
.pc52-trust__col.pc52-ic--shield .col-inner::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.pc52-trust__col.pc52-ic--support .col-inner::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E");
}
.pc52-trust__col.pc52-ic--home .col-inner::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
}

.pc52-card__body.pc52-ic--wrench::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-.7-.7-2.5z'/%3E%3C/svg%3E");
}
.pc52-card__body.pc52-ic--chip::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9 9h6v6H9z'/%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2'/%3E%3C/svg%3E");
}
.pc52-card__body.pc52-ic--brush::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l4-1 11-11-3-3L4 17z'/%3E%3Cpath d='M14 5l3 3'/%3E%3C/svg%3E");
}
.pc52-card__body.pc52-ic--disc::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
.pc52-card__body.pc52-ic--chair::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19v2M18 19v2'/%3E%3Cpath d='M5 10h14l-1 9H6z'/%3E%3Cpath d='M8 10V6a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
.pc52-card__body.pc52-ic--bolt::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a64d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   14. RESPONSIVE  (breakpoint của Flatsome: medium ≤849px, small ≤549px)
   ---------------------------------------------------------------------- */
@media (max-width:849px){
  .pc52-hero{ padding:56px 0 60px!important; }
  .pc52-hero__row > .col{ padding-bottom:24px; }
  .pc52-hero__title h1{ font-size:2.25rem; }
  .pc52-hv-image, .pc52-hv-image .img-inner{ height:420px!important; }
  .pc52-hv-shield{ left:0; }
  .pc52-hv-swap{ left:0; right:24px; }
  .pc52-sechead__title h2,
  .pc52-promo__title h2,
  .pc52-cta__title h2{ font-size:1.75rem; }
  .pc52-promo__card > .col-inner{ padding:40px 30px; }
  .pc52-promo__text{ padding-bottom:30px!important; }
}

@media (max-width:549px){
  .pc52-hero{ padding:40px 0 44px!important; }
  .pc52-hero__title h1{ font-size:2rem; }
  .pc52-hero__lead{ font-size:16px; }
  .pc52-hero__text .button.pc52-btn{
    display:block!important; width:100%!important; text-align:center;
    margin:0 0 12px!important;
  }
  .pc52-stats{ margin-top:30px!important; padding-top:24px; }
  .pc52-stats__num{ font-size:20px!important; }
  .pc52-hv-image, .pc52-hv-image .img-inner{ height:300px!important; }
  .pc52-hv-shield{ top:12px; left:10px; }
  .pc52-hv-swap{ bottom:12px; left:10px; right:12px; }

  .pc52-services{ padding:56px 0 36px!important; }
  .pc52-pricing{ padding:56px 0!important; }
  .pc52-process{ padding:56px 0 32px!important; }
  .pc52-promo{ padding:0 0 56px!important; }
  .pc52-cta{ padding:0 0 56px!important; }
  .pc52-sechead{ padding-bottom:32px!important; }
  .pc52-trust{ padding:24px 0 4px!important; }

  .pc52-promo__card > .col-inner{ padding:32px 18px; }
  .pc52-compare__row{ padding:12px 14px; gap:10px; margin-bottom:10px; }
  .pc52-promo__lead{ margin-bottom:20px!important; }
  .pc52-compare{ margin-bottom:22px!important; }
  /* nút là inline-block nên line-box đã chừa sẵn ~32px phía dưới */
  .pc52-promo__text{ padding-bottom:24px!important; }
  .pc52-cta__box .col-inner{ padding:48px 22px; }
  .button.pc52-hotline{
    font-size:18px!important; display:block!important; width:100%!important;
    text-align:center; padding:14px 10px!important;
  }
  .pc52-footer__about{ max-width:none; }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}