/* mamnon.co landing page (themes/service/page.blade.php): real app screenshots in a browser frame. */

.kd-hero-points {
  list-style: none;
  padding: 0;
  margin: -10px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.kd-hero-points li {
  font-weight: 500;
  color: #333;
}
.kd-hero-points i {
  color: #506CEA;
  margin-right: 6px;
}

/* Browser-window frame around a screenshot; the link opens the row's gallery. */
.kd-shot {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 30, 70, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(30, 50, 110, 0.35);
}
.kd-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  background: #f1f3f7;
  border-bottom: 1px solid rgba(15, 30, 70, 0.06);
}
.kd-shot-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.kd-shot-bar span:nth-child(2) { background: #febc2e; }
.kd-shot-bar span:nth-child(3) { background: #28c840; }
.kd-shot-bar em {
  margin-left: 10px;
  font-style: normal;
  font-size: 12px;
  color: #8a93a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kd-shot a {
  display: block;
  position: relative;
  cursor: zoom-in;
}
.kd-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.kd-shot-more {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(20, 30, 60, 0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.kd-shot a:hover .kd-shot-more { background: #506CEA; }

/* A device screenshot in a phone frame over the browser frame's lower-right corner
   (partials/screenshot $phone). The browser frame leaves room for it on the right. */
.kd-with-phone { position: relative; padding-bottom: 28px; }
.kd-with-phone .kd-shot { margin-right: 13%; }
.kd-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  max-width: 210px;
  border: 7px solid #1d2233;
  border-radius: 24px;
  overflow: hidden;
  background: #1d2233;
  box-shadow: 0 24px 50px -16px rgba(20, 30, 60, 0.55);
  cursor: zoom-in;
  transition: transform .2s ease;
}
.kd-phone:hover { transform: translateY(-4px); }
.kd-phone img { display: block; width: 100%; height: auto; border-radius: 17px; }

.kd-showcase .row + .row { margin-top: 100px; }
.kd-showcase .about-text h3 { margin-top: 15px; }
.kd-showcase .about-text p { margin-bottom: 0; }
.kd-showcase .about-text ul li i { color: #506CEA; margin-right: 6px; }

/* "Dễ dùng" cards: same look as the theme's feature cards, in a grid instead of a carousel. */
.kd-easy .single-features { height: calc(100% - 30px); cursor: default; }
.kd-easy .single-features i { color: #506CEA; }

.kd-roles .single-services { height: calc(100% - 30px); cursor: default; }

.kd-note {
  text-align: center;
  margin-top: 10px;
  color: #666;
}

@media (max-width: 991px) {
  .kd-showcase .row + .row { margin-top: 60px; }
  .kd-showcase .about-text { margin-bottom: 25px; }
}
@media (max-width: 575px) {
  .kd-shot-bar { height: 24px; }
  .kd-shot-bar em { display: none; }
  .kd-shot-more { right: 8px; bottom: 8px; font-size: 12px; padding: 4px 10px; }
  .kd-with-phone { padding-bottom: 16px; }
  .kd-phone { width: 27%; border-width: 4px; border-radius: 14px; }
  .kd-phone img { border-radius: 10px; }
}