@import "tailwindcss";

@layer base {
  html, body, #root, .app-container {
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

@layer components {
  .banner-location-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 80px;
    display: inline-block;
    vertical-align: bottom;
    cursor: help; /* Hiển thị biểu tượng giúp đỡ để gợi ý có tooltip */
  }

  @media (min-width: 640px) {
    .banner-location-text {
      max-width: 150px;
    }
  }
}