/*
 * Mua Chung Tool — responsive normalization
 *
 * File này được nạp sau các stylesheet component. Chỉ chứa các quy tắc
 * liên quan đến kích thước, khoảng cách và overflow theo viewport để dễ
 * rà soát độc lập mà không phải sửa lại style của từng component.
 */

*,
*::before,
*::after{box-sizing:border-box}

img,
svg,
video,
iframe{max-width:100%}

.mct-page,
.mct-shop,
.mct-product-page{min-width:0;max-width:100%;overflow-x:clip}

/* Divi có thể thêm giới hạn chiều rộng cho main/section ở một số phiên bản.
 * Các landing VPS phải giữ nền full-bleed, chỉ phần .container mới giới hạn
 * chiều rộng nội dung. */
body.mct-page .shell>main.vps-usecase-page,
body.mct-page .shell>main.mct-vps-ubuntu-page{
  display:block;
  width:100vw!important;
  max-width:100vw!important;
  min-width:0;
  margin-inline:calc((100% - 100vw)/2)!important;
  box-sizing:border-box;
}

body.mct-page .shell>main.vps-usecase-page>section,
body.mct-page .shell>main.mct-vps-ubuntu-page>section{
  display:block;
  width:100%!important;
  max-width:none!important;
  min-width:0;
  margin-inline:0!important;
}

body.mct-page .shell>section,
body.mct-page .shell>main>section{
  width:100%!important;
  max-width:none!important;
  margin-right:0!important;
  margin-left:0!important;
}

body.mct-page .shell>main,
body.mct-page .shell>section{
  width:100%!important;
  max-width:none!important;
  min-width:0;
  margin-right:0!important;
  margin-left:0!important;
  background-color:var(--paper);
}

body.mct-page .shell>main>section,
body.mct-page .shell>section{
  display:block;
  position:relative;
  width:100%!important;
  max-width:none!important;
}

@media (max-width:1080px){
  .mct-shop>.container,
  .mct-product-page{width:100%;max-width:100%;}
}

@media (max-width:760px){
  .container,
  .mct-shop>.container{width:100%;max-width:none;padding-right:20px;padding-left:20px}

  .mct-product-page{width:100%;max-width:none;padding-right:0;padding-left:0}
  .mct-product-page .mct-product-layout,
  .mct-product-page .mct-product-visual,
  .mct-product-page .mct-product-summary,
  .mct-product-page .woocommerce-product-gallery,
  .mct-product-page .woocommerce-product-gallery__wrapper{width:100%;min-width:0;max-width:100%}
  .mct-product-page .mct-product-layout{grid-template-columns:minmax(0,1fr)!important;gap:24px}
  .mct-product-page .mct-product-visual{position:static}
  .mct-product-page img.zoomImg{display:none!important}

  .mct-config-selection-grid,
  .mct-server-fields,
  .mct-app-grid,
  .mct-config-summary{min-width:0}
  .mct-plan-menu,
  .mct-term-menu,
  .mct-os-menu{max-width:100%;}

  .woocommerce-cart .mct-shop .container>.woocommerce,
  .woocommerce-checkout form.checkout{min-width:0}
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #customer_details{max-width:100%;}
  .technical-table{width:100%;max-width:100%;overflow:hidden}
  .technical-table .tech-row{min-width:0;overflow-wrap:anywhere}
  .technical-table .tech-row b{min-width:0;overflow-wrap:anywhere}
  .woocommerce table.shop_table{width:100%;max-width:100%;table-layout:fixed}
  .woocommerce table.shop_table td,.woocommerce table.shop_table th{overflow-wrap:anywhere;word-break:break-word}
  .mct_support_tab{display:none!important}
}

@media (max-width:460px){
  .mct-shop>.container,
  .mct-product-page{padding-right:14px;padding-left:14px}
  .mct-product-page .mct-product-layout{gap:20px}
  .mct-product-purchase form.cart{grid-template-columns:minmax(0,1fr) 68px;gap:10px}
  .mct-product-purchase form.cart .single_add_to_cart_button{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}