.ce-proof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 66px 0 54px !important;
  background:
    radial-gradient(ellipse 38% 80% at -6% 35%, rgba(89, 184, 194, .36), transparent 72%),
    radial-gradient(ellipse 38% 70% at 106% 95%, rgba(213, 79, 146, .38), transparent 72%),
    linear-gradient(110deg, rgba(20, 38, 58, .82), rgba(24, 39, 60, .87)),
    var(--veas-proof-image, none) center 55% / cover no-repeat;
  color: #fff;
  font-family: var(--veas-font, 'Barlow', Arial, sans-serif);
}

.ce-proof::before,
.ce-proof::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 115px;
  height: 115px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .78) 1.2px, transparent 1.7px);
  background-size: 19px 19px;
  pointer-events: none;
}
.ce-proof::before { left: 2.1%; top: 27%; }
.ce-proof::after { display: none; }
.ce-proof > .section-bg {
  background-color: transparent !important;
  background-image:
    url('assets/coatings-stats/border-top-right.png'),
    url("https://coatings-vietnam.com/wp-content/uploads/2026/10/vnpf-coatings-74517005ed5c.webp"),
    url("https://coatings-vietnam.com/wp-content/uploads/2026/10/vnpf-coatings-d61c62073e2a.webp") !important;
  background-position:
    calc(100% + 72px) -38px,
    -72px calc(100% + 64px),
    calc(100% + 72px) calc(100% + 64px) !important;
  background-size: min(36vw, 560px) auto, min(38vw, 600px) auto, min(38vw, 600px) auto !important;
  background-repeat: no-repeat !important;
  opacity: .7;
  pointer-events: none;
}
.ce-proof > .section-content { position: relative; z-index: 1; }

.ce-proof .ce-proof__grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: min(1500px, calc(100% - 76px));
  max-width: none;
  margin: 0 auto !important;
}
.ce-proof .ce-proof__grid > .col {
  width: auto;
  max-width: none;
  min-width: 0;
  flex-basis: auto;
  padding: 0;
}
.ce-proof .ce-proof__heading {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 20px;
}
.ce-proof .ce-proof__heading .col-inner { max-width: none; }
#main .ce-proof .ce-proof__title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.1vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.018em;
}
.ce-proof .ce-proof__title::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin: 13px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--veas-accent, #d54f92) 0 55%, var(--veas-secondary, #59b8c2) 55% 100%);
}
.ce-proof .ce-proof__item {
  position: relative;
  min-height: 190px;
  padding: 110px 16px 0 !important;
  text-align: center;
}
.ce-proof .ce-proof__item .col-inner { position: static; }
.ce-proof .ce-proof__item + .ce-proof__item .col-inner::before {
  content: '';
  position: absolute;
  top: 126px;
  bottom: 8px;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, .42);
}
.ce-proof .ce-proof__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 98px;
  height: 98px;
  transform: translateX(-50%);
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(140deg, #ec65ac, #ce3f90);
  box-shadow: 0 5px 22px rgba(10, 26, 49, .13), inset 0 2px 8px rgba(255, 255, 255, .18);
}
.ce-proof .ce-proof__item:nth-child(odd)::before {
  background: linear-gradient(140deg, #62c7d2, #23a7b9);
}
.ce-proof .ce-proof__item::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  background: #fff;
  -webkit-mask: var(--ce-proof-icon) center / contain no-repeat;
  mask: var(--ce-proof-icon) center / contain no-repeat;
  pointer-events: none;
}
.ce-proof .ce-proof__item--visitors { --ce-proof-icon: url('coatings-stats-visitors.svg'); }
.ce-proof .ce-proof__item--facebook { --ce-proof-icon: url('coatings-stats-facebook.svg'); }
.ce-proof .ce-proof__item--email { --ce-proof-icon: url('coatings-stats-email.svg'); }
.ce-proof .ce-proof__item--website { --ce-proof-icon: url('coatings-stats-website.svg'); }
.ce-proof .ce-proof__item--media { --ce-proof-icon: url('coatings-stats-media.svg'); }

#main .ce-proof .ce-proof__value {
  margin: 0 0 1px;
  color: #fff;
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.ce-proof .ce-proof__label {
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.3;
}

/* Native Flatsome Button: text, PDF link and target stay editable in UX Builder. */
.ce-proof .ce-proof__report {
  grid-column: 1 / -1;
  margin-top: 30px;
  text-align: center;
}
.ce-proof .ce-proof__report .col-inner { max-width: none; }
#main .ce-proof .button.ce-proof__report-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 56px;
  max-width: 100%;
  margin: 0;
  padding: 14px 25px;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(110deg, #263c51, #2d3952) padding-box,
    linear-gradient(100deg, #56d2db 0%, #80badc 48%, #ee5ca7 100%) border-box !important;
  box-shadow: 0 8px 24px rgba(5, 17, 33, .22);
  color: #fff !important;
  font-family: var(--veas-font, 'Barlow', Arial, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
#main .ce-proof .ce-proof__report-button > span {
  min-width: 0;
  white-space: normal;
}
.ce-proof .ce-proof__report-button::before,
.ce-proof .ce-proof__report-button::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  background: #fff;
  pointer-events: none;
}
.ce-proof .ce-proof__report-button::before {
  width: 23px;
  height: 23px;
  background: #7edce3;
  -webkit-mask: url('coatings-report-document.svg') center / contain no-repeat;
  mask: url('coatings-report-document.svg') center / contain no-repeat;
}
.ce-proof .ce-proof__report-button::after {
  width: 18px;
  height: 18px;
  -webkit-mask: url('coatings-report-open.svg') center / contain no-repeat;
  mask: url('coatings-report-open.svg') center / contain no-repeat;
}
#main .ce-proof .button.ce-proof__report-button:hover {
  background:
    linear-gradient(110deg, #315368, #4a3657) padding-box,
    linear-gradient(100deg, #73e5eb, #f48abb) border-box !important;
  box-shadow: 0 8px 28px rgba(73, 199, 214, .16), 0 5px 20px rgba(229, 79, 152, .15);
}
#main .ce-proof .button.ce-proof__report-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

@media (max-width: 900px) {
  .ce-proof .ce-proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-proof .ce-proof__item { margin-bottom: 26px; }
  .ce-proof .ce-proof__item + .ce-proof__item .col-inner::before { display: none; }
}
@media (max-width: 600px) {
  .ce-proof { padding: 50px 0 44px !important; }
  .ce-proof > .section-bg {
    background-position:
      calc(100% + 34px) -18px,
      -38px calc(100% + 34px),
      calc(100% + 38px) calc(100% + 34px) !important;
    background-size: 250px auto, 285px auto, 285px auto !important;
    opacity: .52;
  }
  .ce-proof .ce-proof__grid { width: calc(100% - 28px); grid-template-columns: minmax(0, 1fr); }
  .ce-proof .ce-proof__heading { margin-bottom: 26px; }
  #main .ce-proof .ce-proof__title { font-size: clamp(27px, 8vw, 34px); }
  .ce-proof .ce-proof__item {
    width: calc(100% - 56px) !important;
    min-height: 96px;
    margin-bottom: 12px;
    padding: 13px 0 0 94px !important;
    text-align: left;
  }
  .ce-proof .ce-proof__item::before {
    top: 8px;
    left: 0;
    width: 74px;
    height: 74px;
    transform: none;
  }
  .ce-proof .ce-proof__item::after {
    top: 28px;
    left: 20px;
    width: 34px;
    height: 34px;
    transform: none;
  }
  #main .ce-proof .ce-proof__value { font-size: 31px; }
  .ce-proof .ce-proof__label { font-size: 14px; }
  .ce-proof .ce-proof__report {
    margin-top: 20px;
    /* Match the space reserved for the floating contact rail beside the stats. */
    padding: 0 56px 0 0 !important;
  }
  #main .ce-proof .button.ce-proof__report-button {
    gap: 10px;
    min-height: 54px;
    padding: 13px 16px;
    font-size: 14px;
    letter-spacing: .025em;
  }
  .ce-proof::before,
  .ce-proof::after { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  #main .ce-proof .button.ce-proof__report-button { transition: none; }
}
