/* v141 - Header responsive safeguard
   Prevent the site title from being covered by action buttons when the browser width changes. */

/* Desktop/tablet landscape: allow the two header groups to wrap naturally before they collide. */
@media (min-width: 901px) {
  body .vtw-app-header .vtw-app-header-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .vtw-app-header .vtw-app-title {
    flex: 1 1 340px !important;
    min-width: 260px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body .vtw-app-header .vtw-app-title-text,
  body .vtw-app-header .vtw-app-title > span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .vtw-app-header .vtw-header-actions {
    flex: 1 1 760px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body .vtw-app-header .vtw-user-header-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .vtw-app-header .vtw-account-box {
    min-width: 0 !important;
    max-width: min(270px, 28vw) !important;
  }

  body .vtw-app-header .vtw-account-text,
  body .vtw-app-header .vtw-user-email {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* At narrower desktop widths, give the title its own row instead of squeezing it behind buttons. */
@media (min-width: 901px) and (max-width: 1280px) {
  body .vtw-app-header .vtw-app-title {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body .vtw-app-header .vtw-app-title-text,
  body .vtw-app-header .vtw-app-title > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  body .vtw-app-header .vtw-header-actions {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* Mobile keeps the existing compact action layout, but title and actions can never share/overlap the same box. */
@media (max-width: 900px) {
  body .vtw-app-header .vtw-app-header-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  body .vtw-app-header .vtw-app-title {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .vtw-app-header .vtw-app-title-text,
  body .vtw-app-header .vtw-app-title > span {
    min-width: 0 !important;
    max-width: calc(100% - 40px) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  body .vtw-app-header .vtw-header-actions {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* v185 - compact title/logo, giữ chữ sắc nét và không bị cắt */
@media (min-width: 901px) {
  body .vtw-app-header .vtw-app-title {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(520px, 38vw) !important;
    min-width: 300px !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  body .vtw-app-header .vtw-app-title-text,
  body .vtw-app-header .vtw-app-title > span {
    font-size: 13px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body .vtw-app-header .vtw-header-actions {
    flex: 1 1 auto !important;
  }
}
@media (min-width: 901px) and (max-width: 1280px) {
  body .vtw-app-header .vtw-app-title {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body .vtw-app-header .vtw-app-title-text,
  body .vtw-app-header .vtw-app-title > span {
    white-space: normal !important;
    line-height: 1.25 !important;
  }
}
@media (max-width: 900px) {
  body .vtw-app-header .vtw-app-title-text,
  body .vtw-app-header .vtw-app-title > span {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}