* {
    box-sizing: border-box;
    margin: 0;
  }
  body {
    padding: 0 !important;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    background-color: #efefef;
  }
  .zalo_zinstant_full > div {
    display: none !important;
  }
  .zalo_zinstant_full .zalo_zinstant_layout {
    display: block !important;
  }
  /* Common styles */
  
  .zalo_zinstant_star_bg_5 {
    display: none !important;
  }
  .zalo_zinstant_map_image_slide_item,
  .zalo_zinstant_card_open_utility_top_action_suffix,
  .zalo_zinstant_button_icon {
    background-size: cover;
  }
  
  .zalo_zinstant_card_open_utility_top_action {
    display: flex;
    flex-direction: row;
    padding: 8px 16px;
    position: relative;
    align-items: center;
  }
  
  .zalo_zinstant_map_image_slide_item,
  .zalo_zinstant_map_image_slide_item_img {
    width: 100%;
    aspect-ratio: 16/9;
  }
  
  .zalo_zinstant_card_open_utility_bottom {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
  }
  
  .qr,
  .zalo_zinstant_code_image_wrapper:has(.zalo_zinstant_code_image_type_),
  .zalo_zinstant_card_open_utility_bottom_code:has(
      .zalo_zinstant_card_open_utility_bottom_code_image_type_0
    ) {
    background-image: url("https://stc-oa.zdn.vn/uploads/2023/08/24/80f949f59354ed3c95ebd1c793e692c7.png");
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 140px !important;
    aspect-ratio: 1/1;
    background-position: center;
    padding: 0 !important;
  }
  .zalo_zinstant_code_image_wrapper > .zalo_zinstant_code_image_type_ {
    opacity: 0;
  }
  .barcode,
  .zalo_zinstant_card_open_utility_bottom_code:has(
      .zalo_zinstant_card_open_utility_bottom_code_image_type_9
    ),
  .zalo_zinstant_code_image_wrapper:has(.zalo_zinstant_code_image_type_9) {
    background-image: url("https://stc-oa.zdn.vn/uploads/2024/08/01/barcode.06caf6d62b07966bfcd9329742a466fc.png");
    background-repeat: no-repeat;
    min-width: 100% !important;
    aspect-ratio: 3/1;
    background-size: cover;
    background-position: center;
  }
  
  .barcode .zalo_zinstant_card_open_utility_bottom_code_image,
  .zalo_zinstant_card_open_utility_bottom_code_image_type_9,
  .zalo_zinstant_card_open_utility_bottom_code_image_type_0,
  .zalo_zinstant_code_image_type_9 {
    width: unset !important;
  }
  .zalo_zinstant_ticket_divider_half_circlez,
  .zalo_zinstant_vertical_line {
    background-size: cover;
  }
  .zalo_zinstant_ticket_banner {
    background-position: center;
    background-repeat: no-repeat;
  }
  .zalo_zinstant_header_ticket_img,
  .zalo_zinstant_banner_icon,
  .zalo_zinstant_banner {
    background-repeat: no-repeat;
  }
  .zalo_zinstant_ticket_info {
    max-width: 220px;
    width: fit-content !important;
  }
  .zalo_zinstant_map_info_key_title,
  .zalo_zinstant_map_info_value_title {
    word-break: break-word;
  }
  /* Preview styles - Background none */
  .preview-container {
    margin: 12px auto;
    max-width: 375px;
    width: 375px;
    overflow: hidden;
  }
  
  /* Preview styles - Background mobile */
  .preview-container-mobile.body {
    background-color: unset;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .preview-container-mobile .preview-container {
    max-width: 400px;
    width: 400px;
    height: 800px;
    background-image: url("https://stc-oa.zdn.vn/uploads/2023/08/24/078db76da831ec1dfe9efcfb33d82651.png");
    background-repeat: no-repeat;
    background-size: 400px 800px;
    padding: 0 8px;
  }
  .preview-container-mobile #preview-content {
    height: calc(100% - 32px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  
  .preview-container-mobile .zalo_zinstant_full {
    max-width: 600px;
    width: 400px;
    max-height: 652px;
    overflow: auto;
    border-radius: 10px;
  }
  
  /* Fix preview issue */
  .icon-copy-otp,
  .zalo_zinstant_banner_icon.text-otp {
    height: 24px !important;
  }
  .text-code {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zalo_zinstant_vertical_line {
    background-image: url("https://stc-oa.zdn.vn/uploads/2023/09/15/1280ce7cc4cff782dd0fc745a121de96.png") !important;
  }
  .zalo_zinstant_vertical_line_circle {
    display: block !important;
  }
  .zalo_zinstant_card_open_utility_top_action_prefix {
    background-size: contain;
  }
  
  .zalo_zinstant_code_wrapper + .zalo_zinstant_banner_title_wrapper {
    margin-top: -4px;
  }
  
  @media screen and (max-width: 576px) {
    .preview-container-mobile #preview-content {
      align-items: flex-start;
    }
    .preview-container-mobile .preview-container {
      width: 400px;
      max-height: 100vh;
      background: none;
    }
    .preview-container-mobile .zalo_zinstant_full {
      width: 375px;
    }
    .preview-container .zalo_zinstant_full {
      max-width: 375px;
      width: 100vw;
      min-width: 320px;
    }
  }
  
  /* Styles for swipe slider */
  .swiper {
    max-width: 100% !important;
  }
  .zalo_zinstant_map_image_slider .swiper-slide {
    aspect-ratio: 16 / 9;
  }
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: 0;
  }
  .swiper-pagination-bullet {
    background-color: #f4f4f6 !important;
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background-color: #989bae !important;
    opacity: 1;
  }
  a.zalo_zinstant_map_image_slide_item_link {
    width: 100%;
    height: 100%;
  }
  .zz_layout_wrapper > *:not(.zz_section_container) {
    display: none !important;
  }

  
  .swiper-slide:has(.zz_carousel_item) {
    max-width: 90% !important;
  }