/**
 * Module CSS: 23-showcase-mosaic.css
 * Trích nguyên văn dòng 1059-1164 của pctech-homepage.css gốc.
 * Không đổi nội dung — chỉ tách file theo đúng marker sẵn có trong code gốc.
 */
    /* ── Showcase mosaic ── */
    .showcase-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 200px 200px;
      gap: 16px;
    }
    .showcase-mosaic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow);
      transition: transform 0.4s, box-shadow 0.4s;
    }
    .showcase-mosaic img:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }
    .showcase-mosaic .mosaic-large {
      grid-row: span 2;
    }
    .services-grid.services-bento {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto auto;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 24px;
    }
    .service-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 28px;
      border: 1px solid var(--gray-200);
      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
      position: relative;
      overflow: hidden;
    }
    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--orange));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s;
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card.ai { border-color: var(--green); }
    .service-card.ai::before { background: var(--green); }
    .service-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      margin-bottom: 16px;
      background: var(--blue-light);
    }
    .service-card.ai .service-icon { background: var(--green-light); }
    .service-card h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--blue-dark);
      margin-bottom: 8px;
    }
    .service-card p {
      font-size: 0.9rem;
      color: var(--gray-500);
      margin-bottom: 16px;
    }
    .service-link {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--orange);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap 0.2s;
    }
    .service-link:hover { gap: 8px; }
    .badge-online {
      position: absolute;
      top: 16px; right: 16px;
      background: var(--orange);
      color: var(--white);
      font-size: 0.7rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 50px;
      text-transform: uppercase;
    }
    .service-remote-featured .badge-online {
      top: 16px;
      left: 16px;
      right: auto;
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.35);
    }