/* =========================================================
   Global Responsive Fixes (Frontend)
   - Load this file LAST to override older fixed-width rules
   - Mục tiêu: mobile không vỡ khung (menu / bảng / ảnh / iframe / URL dài)
   ========================================================= */

/* 1) Chống tràn ngang do chuỗi dài (URL/slug) */
.xq-content,
.xq-content p,
.xq-content li,
.xq-content a,
.xq-content span{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 2) Ảnh/Media không tràn khung */
.xq-content img,
.xq-content video,
.xq-content canvas{
  max-width:100%;
  height:auto;
}

.xq-content iframe,
.xq-content embed,
.xq-content object{
  max-width:100%;
}

/* 3) Tables: ưu tiên cuộn ngang thay vì phá layout */
@media (max-width: 900px){
  .xq-content table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* 4) Utility: embed responsive (YouTube/iframe)
   - bọc iframe vào <div class="xq-embed is-16x9"> ... </div>
*/
.xq-embed{ position:relative; width:100%; max-width:100%; }
.xq-embed.is-16x9{ padding-top:56.25%; }
.xq-embed.is-4x3{ padding-top:75%; }
.xq-embed > iframe{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  border:0;
}

/* 5) Top menu: chia 2 cột rõ ràng trên màn nhỏ */
@media (max-width: 560px){
  .xq-topnav{ flex-wrap:wrap; }
  .xq-topnav-item{
    flex:0 0 50%;
    border-right:1px solid var(--xq-border2);
    border-bottom:1px solid var(--xq-border2);
  }
  .xq-topnav-item:nth-child(2n){ border-right:none; }
  .xq-topnav-item:nth-last-child(-n+2){ border-bottom:none; }
}

/* 6) Form/search: input không bị tràn */
@media (max-width: 480px){
  .xq-search input{ width:100%; max-width:100%; }
}