/* templates/blocks/customer-review/style.css */
/* v2.5.0 - Map 1:1 với JS Config */

.pf-cr-wrap{
  width:100%;
  margin:var(--pf-cr-section-m,0 0 40px 0);
  padding:var(--pf-cr-section-pad,0);
  background:var(--pf-cr-section-bg,transparent);
  border-radius:var(--pf-cr-section-br,0px);
  border-width:var(--pf-cr-section-bw,0px);
  border-style:var(--pf-cr-section-bs,solid);
  border-color:var(--pf-cr-section-bc,transparent);
  box-shadow:var(--pf-cr-section-shadow,none);
  box-sizing:border-box;
  position:relative;
}
.pf-cr-wrap *{box-sizing:border-box;}

.pf-cr-section-head{
  margin:0 0 18px 0;
  text-align:var(--pf-cr-head-align,left);
}
.pf-cr-section-title{
  margin:var(--pf-cr-head-m,0 0 20px 0);
  padding:var(--pf-cr-head-pad,0);
  color:var(--pf-cr-head-color,inherit);
  background:var(--pf-cr-head-bg,transparent);
  font-size:var(--pf-cr-head-fs,28px);
  font-weight:var(--pf-cr-head-fw,700);
  font-style:var(--pf-cr-head-fstyle,normal);
  text-transform:var(--pf-cr-head-tt,none);
  line-height:1.2;
  border-width:var(--pf-cr-head-bw,0px);
  border-style:var(--pf-cr-head-bs,solid);
  border-color:var(--pf-cr-head-bc,transparent);
  border-radius:var(--pf-cr-head-br,0px);
}

.pf-cr-list.is-grid{
  display:grid;
  grid-template-columns:repeat(var(--pf-cr-cols-pc,3),minmax(0,1fr));
  gap:var(--pf-cr-gap,20px);
}

.pf-cr-slider{position:relative;overflow:hidden;}
.pf-cr-track{
  display:flex;
  gap:var(--pf-cr-gap,20px);
  will-change:transform;
  transition:transform .35s ease;
}
.pf-cr-slide{
  min-width:calc((100% - (var(--pf-cr-gap,20px) * (var(--pf-cr-cols-pc,3) - 1))) / var(--pf-cr-cols-pc,3));
  flex:0 0 calc((100% - (var(--pf-cr-gap,20px) * (var(--pf-cr-cols-pc,3) - 1))) / var(--pf-cr-cols-pc,3));
}

.pf-cr-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  text-align:var(--pf-cr-card-align,left);
  background:var(--pf-cr-card-bg,#fff);
  color:var(--pf-cr-card-color,inherit);
  border-radius:var(--pf-cr-card-br,18px);
  border-width:var(--pf-cr-card-bw,0px);
  border-style:var(--pf-cr-card-bs,solid);
  border-color:var(--pf-cr-card-bc,transparent);
  box-shadow:var(--pf-cr-card-shadow,0 10px 30px rgba(0,0,0,.08));
  padding:var(--pf-cr-card-pad,24px);
  min-height:100%;
  transition:transform var(--pf-cr-motion-ms,450ms) ease, box-shadow var(--pf-cr-motion-ms,450ms) ease, opacity var(--pf-cr-motion-ms,450ms) ease;
}
.pf-cr-card:hover{
  transform:translateY(calc(var(--pf-cr-card-hover-y,6px) * -1));
}

.pf-cr-quote{
  position:absolute;
  top:14px;
  right:18px;
  color:var(--pf-cr-quote-color,#e5e7eb);
  font-size:var(--pf-cr-quote-fs,52px);
  line-height:1;
  font-weight:700;
  pointer-events:none;
}

.pf-cr-top{
  display:flex;
  align-items:flex-start;
  gap:14px;
  justify-content:var(--pf-cr-card-justify,flex-start);
}

.pf-cr-avatar-wrap{
  flex:0 0 auto;
  margin:var(--pf-cr-avatar-m,0);
}
.pf-cr-avatar{
  width:var(--pf-cr-avatar-size,72px);
  height:var(--pf-cr-avatar-size,72px);
  border-radius:var(--pf-cr-avatar-br,999px);
  object-fit:var(--pf-cr-avatar-fit,cover);
  display:block;
  border-width:var(--pf-cr-avatar-bw,0px);
  border-style:var(--pf-cr-avatar-bs,solid);
  border-color:var(--pf-cr-avatar-bc,transparent);
}
.pf-cr-avatar--placeholder{
  background:#e5e7eb;
}

.pf-cr-meta-wrap{
  min-width:0;
  flex:1 1 auto;
}

.pf-cr-name{
  margin:var(--pf-cr-name-m,0);
  padding:var(--pf-cr-name-pad,0);
  color:var(--pf-cr-name-color,inherit);
  background:var(--pf-cr-name-bg,transparent);
  font-size:var(--pf-cr-name-fs,20px);
  font-weight:var(--pf-cr-name-fw,700);
  font-style:var(--pf-cr-name-fstyle,normal);
  text-transform:var(--pf-cr-name-tt,none);
  text-align:var(--pf-cr-name-align,left);
  line-height:1.25;
  border-width:var(--pf-cr-name-bw,0px);
  border-style:var(--pf-cr-name-bs,solid);
  border-color:var(--pf-cr-name-bc,transparent);
  border-radius:var(--pf-cr-name-br,0px);
}

.pf-cr-role{
  margin:var(--pf-cr-role-m,4px 0 0 0);
  padding:var(--pf-cr-role-pad,0);
  color:var(--pf-cr-role-color,#6b7280);
  background:var(--pf-cr-role-bg,transparent);
  font-size:var(--pf-cr-role-fs,14px);
  font-weight:var(--pf-cr-role-fw,500);
  font-style:var(--pf-cr-role-fstyle,normal);
  text-transform:var(--pf-cr-role-tt,none);
  text-align:var(--pf-cr-role-align,left);
  line-height:1.4;
  border-width:var(--pf-cr-role-bw,0px);
  border-style:var(--pf-cr-role-bs,solid);
  border-color:var(--pf-cr-role-bc,transparent);
  border-radius:var(--pf-cr-role-br,0px);
}

.pf-cr-rating{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pf-cr-rating-gap,3px);
  margin:var(--pf-cr-rating-m,12px 0 0 0);
  justify-content:var(--pf-cr-rating-align,flex-start);
  color:var(--pf-cr-rating-color,#f59e0b);
  font-size:var(--pf-cr-rating-fs,18px);
  line-height:1;
}
.pf-cr-star{opacity:.22;}
.pf-cr-star.is-full{opacity:1;}

.pf-cr-content{
  margin:var(--pf-cr-content-m,16px 0 0 0);
  padding:var(--pf-cr-content-pad,0);
  color:var(--pf-cr-content-color,inherit);
  background:var(--pf-cr-content-bg,transparent);
  font-size:var(--pf-cr-content-fs,15px);
  font-weight:var(--pf-cr-content-fw,400);
  font-style:var(--pf-cr-content-fstyle,normal);
  text-transform:var(--pf-cr-content-tt,none);
  line-height:var(--pf-cr-content-lh,1.7);
  text-align:var(--pf-cr-content-align,left);
  border-width:var(--pf-cr-content-bw,0px);
  border-style:var(--pf-cr-content-bs,solid);
  border-color:var(--pf-cr-content-bc,transparent);
  border-radius:var(--pf-cr-content-br,0px);
}

.pf-cr-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.pf-cr-arrow,.pf-cr-dot{appearance:none;border:none;outline:none;cursor:pointer;}
.pf-cr-arrow{width:40px;height:40px;border-radius:999px;background:#111827;color:#fff;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center; transition: opacity .2s;}
.pf-cr-arrow:hover{opacity:.8;}

.pf-cr-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;}
.pf-cr-dot{width:10px;height:10px;border-radius:999px;background:rgba(17,24,39,.22); transition: background .2s;}
.pf-cr-dot.is-active{background:#111827;}

.pf-cr-card[data-motion="fade-up"],.pf-cr-card[data-motion="fade"],.pf-cr-card[data-motion="zoom-in"]{opacity:0;}
.pf-cr-card[data-motion="fade-up"]{transform:translateY(18px);}
.pf-cr-card[data-motion="zoom-in"]{transform:scale(.96);}
.pf-cr-card.is-inview{opacity:1 !important;transform:none !important;}

@media (max-width:991px){
  .pf-cr-list.is-grid{grid-template-columns:repeat(var(--pf-cr-cols-tablet,2),minmax(0,1fr));}
  .pf-cr-slide{
    min-width:calc((100% - (var(--pf-cr-gap,20px) * (var(--pf-cr-cols-tablet,2) - 1))) / var(--pf-cr-cols-tablet,2));
    flex-basis:calc((100% - (var(--pf-cr-gap,20px) * (var(--pf-cr-cols-tablet,2) - 1))) / var(--pf-cr-cols-tablet,2));
  }
}

@media (max-width:767px){
  .pf-cr-list.is-grid{grid-template-columns:repeat(var(--pf-cr-cols-mobile,1),minmax(0,1fr));}
  .pf-cr-slide{
    min-width:calc((100% - (var(--pf-cr-gap,20px) * (var(--pf-cr-cols-mobile,1) - 1))) / var(--pf-cr-cols-mobile,1));
    flex-basis:calc((100% - (var(--pf-cr-gap,20px) * (var(--pf-cr-cols-mobile,1) - 1))) / var(--pf-cr-cols-mobile,1));
  }
  .pf-cr-card{padding:18px;}
  .pf-cr-name{font-size:calc(var(--pf-cr-name-fs,20px) - 2px);}
  .pf-cr-section-title{font-size:calc(var(--pf-cr-head-fs,28px) - 4px);}
}