/* Vietnamese localization overrides.
 * Load after /default/static/css/index.css.
 */

/* Keep translated copy and technical product names inside their containers. */
html[lang|="vi"] body {
  overflow-wrap: break-word;
}

/* Desktop navigation and multi-level product menus. */
html[lang|="vi"] .navigation > li > a {
  white-space: nowrap;
}
.navigation{
    gap: 10px 50px;
}
html[lang|="vi"] .navigation .nav-dropdown {
  width: max-content;
  min-width: 242px;
  max-width: min(400px, calc(100vw - 32px));
  white-space: normal;
}

html[lang|="vi"] .nav-dropdown li a {
  align-items: flex-start;
  line-height: 24px;
  overflow-wrap: break-word;
  padding-block: 10px;
}

html[lang|="vi"] .nav-dropdown li p {
  min-width: 0;
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
  html[lang|="vi"] .navigation {
    gap: 10px 20px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  html[lang|="vi"] .navigation {
    gap: 10px 12px;
    font-size: 14px;
  }

  /* Prevent the two-line Vietnamese heading from leaving the light area of
   * the homepage About-section background at narrow desktop widths. */
  html[lang|="vi"] .main1 .m1-title {
    font-size: 30px;
    line-height: 40px;
  }
}

/* Long headings may reflow without clipping. */
html[lang|="vi"] .m1-title,
html[lang|="vi"] .p1m1-title,
html[lang|="vi"] .p2m1-title,
html[lang|="vi"] .p2m2-title,
html[lang|="vi"] .s2m1-title,
html[lang|="vi"] .s2m1-s-title,
html[lang|="vi"] .n2m1-title,
html[lang|="vi"] .pop-form .pf-title {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Allow translated text inside flex layouts to use the available width. */
html[lang|="vi"] .faq .faq-top p,
html[lang|="vi"] .m7-s-det li > div,
html[lang|="vi"] .move-on li > div,
html[lang|="vi"] .fo-ul li > * {
  min-width: 0;
}

/* Text-bearing controls remain single-line and container-safe. */
html[lang|="vi"] .m1-btn a,
html[lang|="vi"] .p1m1-ipt a,
html[lang|="vi"] .n1m1-t-list a,
html[lang|="vi"] .fo-form .form-btn button,
html[lang|="vi"] .pf-form .pf-form-btn button,
html[lang|="vi"] .su2m1-btn a {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[lang|="vi"] .m5-form .form-btn input,
html[lang|="vi"] .c1m2-form input[type="submit"] {
  box-sizing: border-box;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Breadcrumbs and category tabs wrap as complete items. */
html[lang|="vi"] .paging-top,
html[lang|="vi"] .m2-s-tab,
html[lang|="vi"] .m3-tab,
html[lang|="vi"] .n1m1-t-list {
  flex-wrap: wrap;
}

/* Keep article and specification tables within the page viewport. */


@media screen and (max-width: 767px) {
  html[lang|="vi"] .faq li {
    padding-inline: 14px;
  }

  html[lang|="vi"] .faq .faq-top p {
    line-height: 26px;
  }

  html[lang|="vi"] .paging-top {
    overflow-wrap: anywhere;
  }
}