/* ==========================================================================
   Component: why-tecostore
   Khối "Vì sao chọn chúng tôi" (4 ô icon) — nạp on-demand qua
   teco_render_component('why-tecostore').
   ========================================================================== */
.why{padding-block:clamp(64px,8vw,112px)}
.why .eyebrow{color:var(--orange)}
.why__head{text-align:center}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.why__item{text-align:center;padding:8px 28px}
.why__item+.why__item{border-left:1px solid color-mix(in srgb,var(--orange) 35%,transparent)}
.why__ico{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--paper);
  border:2px solid var(--orange);color:var(--orange-ink);
  display:flex;align-items:center;justify-content:center;
}
.why__ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why__item h3{margin:0 0 6px;font-size:1.0625rem;color:var(--ink)}
.why__item p{margin:0;font-size:.875rem;color:var(--ink-2)}

@media (max-width:820px){
  .why__grid{grid-template-columns:1fr 1fr;gap:28px 0}
  .why__item:nth-child(3){border-left:0}
  .why__item{border-left:1px solid color-mix(in srgb,var(--orange) 35%,transparent);border-top:0}
  .why__item:nth-child(1),.why__item:nth-child(2){border-top:0}
  .why__item:nth-child(odd){border-left:0}
}