/* Card chat AI mobile: du chu, an vien teal PNG 2 ben/goc. */
@media (max-width: 767px) {
  /* Bề mặt lấy ĐÚNG của thẻ "Hoàn tiền lên đến 20%" và "Dịch vụ yêu thích" — ba thẻ liền
     nhau trên trang chủ giờ cùng một bộ (nền teal nổi khối, viền kính 28%, bóng teal).
     Trước đây thẻ này để nền xanh đen rgba(4,42,39,.92) nên đứng cạnh hai thẻ kia thấy lệch. */
  .apph-hotro247 {
    overflow: hidden !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background-color: rgb(17, 94, 89) !important;
    background-image:
      radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.2), transparent 55%),
      radial-gradient(80% 70% at 0% 100%, rgba(232, 163, 23, 0.1), transparent 50%),
      linear-gradient(145deg, rgba(15, 118, 110, 0.14) 0%, rgba(20, 184, 166, 0.12) 48%, rgba(13, 148, 136, 0.14) 100%) !important;
    box-shadow:
      0 12px 32px rgba(15, 118, 110, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }

  .apph-hotro247-top {
    position: relative !important;
    aspect-ratio: 2.22 / 1 !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 0 !important;
    background: #d7eee8 !important;
    background-image: none !important;
  }

  /* LỖI CŨ: .apph-hotro247-bg vốn to hơn khung (width/height >100%, dịch âm top/left) để phóng
     to ảnh rồi cắt viền — nhưng làm vậy chính HÌNH DẠNG của lớp này (và góc bo riêng của nó,
     vốn không có border-radius) lệch khỏi góc bo 20px của khung ngoài .apph-hotro247. Ảnh gốc
     tự vẽ góc bo THẬT của nó (bán kính ~79px trên ảnh gốc, ~17px quy đổi) — hai đường cong góc
     bo (của khung CSS và của chính ảnh) không trùng nhau, hở ra một dải màu ngoài thẻ (teal đậm)
     kẹp giữa hai đường viền cong khác bán kính = đúng lỗi "viền chồng viền khác màu".

     SỬA: giữ nguyên khung (100% x 100%, đúng bo góc 20px của .apph-hotro247-top), chỉ phóng to
     ẢNH BÊN TRONG bằng background-size/position (không đổi kích thước khung nữa) — khung và ảnh
     giờ dùng chung đúng 1 đường cong duy nhất, ảnh chỉ đơn thuần bị crop bên trong khung đó như
     background-image bình thường, không còn 2 đường cong lệch nhau. */
  .apph-hotro247-bg {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("/assets/images/apph-hotro247-anh.png?v=chu3") !important;
    background-size: 105% 102.1% !important;
    background-position: 50% 80.95% !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  /* right nới từ 34% -> 27%: ở chữ 13px, cụm "Chat với nhantien365.com ngay nhé!" cần ~220px,
     mà 34% chỉ chừa ~213px nên chữ "nhé!" bị đẩy xuống dòng thứ 3. 27% cho ~239px, vừa đủ
     một dòng mà vẫn dừng trước linh vật (linh vật bắt đầu từ ~71% bề ngang thẻ). */
  .apph-hotro247-chu {
    position: absolute;
    z-index: 2;
    left: 9%;
    right: 27%;
    top: 11%;
  }

  .apph-hotro247-tieude {
    margin: 0 0 4px;
    font-size: 18px !important;
    font-weight: 800;
    line-height: 1.2;
    color: #0a3f3a;
  }

  .apph-hotro247-loi {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    /* nowrap: HTML đã tự ngắt 2 dòng bằng <br> đúng chỗ mong muốn. Để normal thì dòng 2
       ("Chat với nhantien365.com ngay nhé!") tự vỡ tiếp, rớt chữ "nhé!" xuống dòng 3 —
       nowrap giữ mỗi dòng liền mạch, chỉ xuống dòng đúng tại <br>. */
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.35;
    color: #14524c;
  }

  .apph-hotro247-nut {
    position: absolute !important;
    inset: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    display: block !important;
    gap: 0 !important;
    z-index: 2;
  }

  .apph-hotro247-ai {
    position: absolute !important;
    left: 7% !important;
    width: 66% !important;
    top: 70% !important;
    height: 25% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 12px 0 48px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Bỏ nowrap/clip: ở 13px chữ "Chat cùng nhantien365.com" không còn vừa 1 dòng trong viên
     thuốc, cắt bớt (text-overflow:clip) sẽ mất luôn phần domain. Cho xuống dòng tự nhiên —
     nút cao 25% thẻ nên 2 dòng vẫn thoải mái, không tràn. */
  .apph-hotro247-ai-chu {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    color: #0a3f3a;
    white-space: normal;
    text-align: left;
  }

  .apph-hotro247-goi {
    position: absolute !important;
    left: 76% !important;
    width: 16% !important;
    top: 68% !important;
    height: 28% !important;
    flex: none !important;
    display: block !important;
  }
}

/* Máy nhỏ (≤360px): CHỮ GIỮ NGUYÊN 13px như mọi máy khác — yêu cầu là chữ 13 đồng nhất,
   không hạ xuống 12px nữa.

   Đo thật ở máy 350px: dòng "Chat với nhantien365.com ngay nhé!" dài 217px mà khung chỉ
   213px -> tràn 4px. Không hạ cỡ chữ, mà lấy thêm chỗ theo 2 hướng: đẩy mép trái ra
   (9% -> 7%) và siết nhẹ khoảng cách chữ (-0.01em ≈ -4px cho cả dòng). Tổng cộng dư ~8px,
   dòng nằm gọn mà chữ vẫn đúng 13px và không tiến sát linh vật hơn. */
@media (max-width: 360px) {
  .apph-hotro247-chu { left: 7% !important; }
  .apph-hotro247-loi { letter-spacing: -0.01em !important; }
  .apph-hotro247-ai { padding: 0 8px 0 42px !important; }
  .apph-hotro247-ai-chu { letter-spacing: -0.02em; }
}