/* ============================================================
   MT.NET.VN PRO6 V22
   Category normalization + Global floating controls
   ============================================================ */

/* Category page normalized to /san-phammtwebs */
.pro6-category-page-v22{max-width:1600px;margin:0 auto}
.pro6-category-heading-actions{display:flex;gap:7px;flex-wrap:wrap}
.pro6-category-strip-v22{
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;
  align-items:stretch;
}
.pro6-category-strip-v22 .pro6-category-card{
  min-width:0!important;
  min-height:112px!important;
  height:112px!important;
  padding:9px 7px!important;
  overflow:hidden;
}
.pro6-category-strip-v22 .pro6-category-icon{
  flex:0 0 auto;
  width:54px!important;
  height:54px!important;
}
.pro6-category-strip-v22 .pro6-category-icon.image{
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.pro6-category-strip-v22 .pro6-category-icon.image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:54px!important;
  max-height:54px!important;
  padding:4px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:10px!important;
  background:#f7f8fa!important;
}
.pro6-category-strip-v22 .pro6-category-card b{
  display:-webkit-box!important;
  width:100%;
  min-height:26px;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size:10px!important;
  line-height:1.25!important;
  text-align:center;
}
.pro6-category-strip-v22 .pro6-category-card.active{
  box-shadow:inset 0 0 0 1px #246bfd,0 7px 18px rgba(36,107,253,.08);
}
.pro6-category-info-v22{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin:0 0 15px;
  padding:14px;
  border:1px solid #e4e9f1;
  border-radius:14px;
  background:linear-gradient(120deg,#f8faff,#fff);
}
.pro6-category-info-icon{
  width:68px;height:68px;
  display:grid;place-items:center;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  border:1px solid #e7ebf1;
}
.pro6-category-info-icon img{
  width:100%;height:100%;
  padding:6px;
  object-fit:contain;
}
.pro6-category-info-icon i{font-size:25px;color:#246bfd}
.pro6-category-info-v22 h3{font-size:16px;margin:3px 0 4px;color:#182230}
.pro6-category-info-v22 p{font-size:10px;line-height:1.6;color:#667085;margin:0}

/* Never allow old icon catalog rules to leak into native category cards. */
.pro6-category-page-v22 .icontomt,
.pro6-category-page-v22 .icondmsanpham,
.pro6-category-page-v22 .sub_menu,
.pro6-category-page-v22 .tieudenhomsp{
  all:unset;
}

/* ---------- Global right-bottom rail ---------- */
.pro6-float-right-v22{
  position:fixed;
  z-index:10220;
  right:16px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  pointer-events:none;
}
.pro6-float-right-v22>*{pointer-events:auto}
.pro6-float-contact-stack-v22{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  max-height:300px;
  opacity:1;
  transform:translateY(0);
  transition:max-height .2s ease,opacity .16s ease,transform .16s ease;
}
.pro6-float-right-v22.contacts-collapsed .pro6-float-contact-stack-v22{
  max-height:0;
  opacity:0;
  transform:translateY(8px);
  overflow:hidden;
  pointer-events:none;
}
.pro6-float-tool-v22{
  position:relative;
  min-width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  color:#fff;
  background:#101828;
  box-shadow:0 10px 28px rgba(16,24,40,.18);
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
  font-size:9px;
  font-weight:800;
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.pro6-float-tool-v22:hover{
  transform:translateY(-2px);
  color:#fff;
  box-shadow:0 14px 34px rgba(16,24,40,.22);
}
.pro6-float-tool-v22 i{font-size:16px}
.pro6-float-tool-v22 span{
  max-width:0;
  overflow:hidden;
  opacity:0;
  white-space:nowrap;
  transition:max-width .18s ease,opacity .14s ease;
}
.pro6-float-tool-v22:hover span{max-width:90px;opacity:1}
.pro6-float-tool-v22.settings{background:#fff;color:#344054;border-color:#e2e8f0}
.pro6-float-tool-v22.settings:hover{color:#175cd3}
.pro6-float-tool-v22.zalo{background:linear-gradient(135deg,#0a7cff,#0760d8)}
.pro6-float-tool-v22.messenger{background:linear-gradient(135deg,#7356ff,#2f7bf6)}
.pro6-float-tool-v22.phone{background:linear-gradient(135deg,#18b663,#0b8f4c)}
.pro6-float-tool-v22.email{background:linear-gradient(135deg,#f79009,#e76808)}
.pro6-float-tool-v22.contact{background:#101828}
.pro6-float-tool-v22.movetop{
  background:#fff;
  color:#344054;
  border-color:#e2e8f0;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
}
.pro6-float-tool-v22.movetop.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.pro6-float-tool-v22.movetop.show:hover{
  background:#246bfd;
  color:#fff;
  border-color:#246bfd;
}

/* V22 uses the right rail; keep V21 bottom-left dock available but less intrusive. */
.pro6-control-dock{bottom:14px!important}

/* Settings drawer must always be above all content/right rail. */
.settings-backdrop{z-index:10300!important}
.settings-drawer{
  z-index:10310!important;
  pointer-events:auto!important;
}
.settings-drawer.open{pointer-events:auto!important}

/* When contacts are disabled in Settings, hide only contact links,
   not Settings or Back-to-top. */
body.hide-contacts .pro6-float-contact-stack-v22,
body.hide-contacts #pro6FloatContactToggleV22{
  display:none!important;
}

/* avoid overlap with mobile bottom nav */
@media(max-width:880px){
  .pro6-float-right-v22{
    right:10px;
    bottom:78px;
  }
}
@media(max-width:650px){
  .pro6-category-heading-actions{width:100%}
  .pro6-category-heading-actions .pro6-btn{flex:1}
  .pro6-category-strip-v22{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .pro6-category-strip-v22 .pro6-category-card{
    height:100px!important;
    min-height:100px!important;
  }
  .pro6-category-strip-v22 .pro6-category-icon{
    width:45px!important;height:45px!important
  }
  .pro6-category-strip-v22 .pro6-category-icon.image img{
    max-width:45px!important;max-height:45px!important
  }
  .pro6-category-info-v22{grid-template-columns:54px minmax(0,1fr)}
  .pro6-category-info-icon{width:52px;height:52px}
  .pro6-float-tool-v22{
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
  }
  .pro6-float-tool-v22 span{display:none!important}
}