/* ==========================================================================
   Component: why-tecotec
   Khối "Tại sao chọn TECOTEC Group?" — nạp on-demand qua
   teco_render_component('why-tecotec').
   ========================================================================== */
.tg{padding-block:clamp(64px,8vw,112px);background:var(--paper-2)}
.tg .eyebrow{color:var(--orange)}
.tg__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:stretch}
.tg__lead{display:flex;flex-direction:column}
.tg__lead h2{margin-top:6px;font-size:clamp(1.75rem,3.4vw,2.75rem)}
.tg__quote{margin:18px 0 0;padding-left:18px;border-left:4px solid var(--orange);font-size:1.0625rem;color:var(--ink-2);line-height:1.6}
.tg__tall{
  width:100%;flex:1;min-height:200px;margin-top:28px;border-radius:var(--radius-card);overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%,rgba(255,153,0,.9),transparent 50%),
    radial-gradient(circle at 80% 55%,rgba(20,110,180,.85),transparent 55%),
    radial-gradient(circle at 30% 90%,rgba(255,184,77,.8),transparent 50%),
    var(--dark);
}
.tg__tall img{width:100%;height:100%;object-fit:cover;display:block}

.tg__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 36px}
.tg__list li{min-width:0}
.tg__n{display:block;font-family:"Inter",sans-serif;font-size:2.5rem;font-weight:500;line-height:1;color:var(--orange);margin-bottom:8px}
.tg__list h3{margin:0 0 6px;font-size:.9375rem;letter-spacing:.3px;text-transform:uppercase;color:var(--ink)}
.tg__list p{margin:0;font-size:.875rem;color:var(--ink-2);line-height:1.6}

@media (max-width:900px){
  .tg__grid{grid-template-columns:1fr;gap:28px}
  .tg__lead{position:static}
  .tg__tall{flex:none;aspect-ratio:16/9;min-height:0}
  .tg__list{grid-template-columns:1fr}
}