/* ===== LAYOUT ===== */
  .dn-sec {
      padding: 60px 0;
      background: #fff
  }

  .dn-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px
  }

  .dn-title {
      font-size: 40px;
      margin-bottom: 32px;
      color: #fff
  }

  .dn-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 45px 40px;
  }

  .dn-service {
      width: 100%;
      overflow: hidden
  }

  /* ===== PILL ===== */
  .dn-pill {
      border: 1px solid #fff;
      display: inline-block;
      color: #fff;
      padding: 9px 26px;
      border-radius: 999px;
      font-weight: 800;
      margin-bottom: 16px;
  }

  /* ===== SWIPER FIX ===== */
  .dn-service .swiper {
      width: 100% !important;
      overflow: hidden
  }

  .dn-service .swiper-wrapper {
      display: flex !important
  }

  .dn-service .swiper-slide {
      width: calc((100% - 24px)/2) !important;
      flex-shrink: 0;
      border: 1px solid #fff;
      border-radius: 10px;
  }

  /* ===== ITEM ===== */
  .dn-item {
      display: block;
      text-decoration: none
  }

  .dn-item img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      /* border-radius:16px; */
  }

  .dn-item span {
      display: block;
      text-align: center;
      margin-top: 12px;
      margin-bottom: 12px;
      color: #fff;
  }

  /* ===== NAV ===== */
  .dn-nav {
      position: relative;
      height: 60px;
      margin-top: 14px
  }

  .dn-prev,
  .dn-next {
      position: absolute;
      top: 20px;
      width: 45px;
      height: 35px;
      border-radius: 8px;
  }

  .dn-prev {
      left: 0;
      border: 1px solid #fff;
  }

  .dn-next {
      left: 52px;
      border: 1px solid #fff;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
      font-size: 14px;
      color: #fff
  }

  .dn-prev.swiper-button-prev:after {
      color: #fff
  }

  /* ===== PAGINATION ===== */
  .dn-pagination {
      margin-top: 14px
  }

  .dn-pagination .swiper-pagination-bullet {
      background: #d9d9d9;
      opacity: 1
  }

  .dn-pagination .swiper-pagination-bullet-active {
      background: #2c3e50;
  }

  /* === FORCE SHOW NAV (Swiper hay tự ẩn) === */
  .dn-prev,
  .dn-next {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
  }

  .swiper-button-disabled {
      opacity: 1 !important;
      pointer-events: auto !important;
  }

  /* CLICK FULL BOX prev / next */
  .dn-prev,
  .dn-next {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }

  /* disable pointer-events trên icon để click xuyên vào button */
  .dn-prev::after,
  .dn-next::after {
      pointer-events: none;
  }

  .dn-sec {
      background-image: url(https://cdn.diemnhangroup.com/noithatdiemnhan/2025/02/Rectangle-10-1-min-1-1.webp);
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: 50% 50%;
  }

  /* ===== PAGINATION LUÔN 3 DOT ===== */
  .dn-pagination {
      display: flex;
      justify-content: center;
      gap: 6px;
  }

  /* Ẩn toàn bộ */
  .dn-pagination .swiper-pagination-bullet {
      display: none;
  }

  /* Chỉ hiện 3 dot */
  .dn-pagination .swiper-pagination-bullet:nth-child(1),
  .dn-pagination .swiper-pagination-bullet:nth-child(2),
  .dn-pagination .swiper-pagination-bullet:nth-child(3) {
      display: inline-block;
  }

  .dn-service.dn-no-nav .dn-nav {
      display: none !important;
  }

  /* hover nhích lên – KHÔNG BỊ CẮT */
  .dn-service .swiper {
      padding-top: 10px;
      /* chừa chỗ để nhích lên */
  }

  .dn-service .swiper-slide {
      transition: margin-top 0.25s ease;
  }

  .dn-service .swiper-slide:hover {
      margin-top: -8px;
  }

  /* ===== MOBILE ===== */
  @media(max-width:991px) {
      .dn-grid {
          grid-template-columns: 1fr
      }

      .dn-service .swiper-slide {
          width: 100% !important
      }

      .dn-item img {
          height: 200px
      }
  }

  @media(max-width:768px) {

      .dn-prev,
      .dn-next {
          top: 25px;
      }

      .dn-nav {
          height: 65px
      }

      .dn-grid {
          gap: 25px 40px;
      }
  }