/*
 * Ecom Category Menu Builder - Frontend v1.0.3
 * Giao diện phẳng, co giãn theo khung chứa và tự cân bằng hàng danh mục.
 */
.ecmb-wrap{
  --ecmb-primary:#ff6a00;
  --ecmb-gap:clamp(10px,1.05cqi,14px);
  --ecmb-card-gap:clamp(8px,.85cqi,12px);
  --ecmb-main-current-basis:var(--ecmb-main-wide-basis,33.3333%);
  --ecmb-acc-current-basis:var(--ecmb-acc-wide-basis,33.3333%);
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  gap:0;
  color:#151515;
  background:transparent;
  font-family:inherit;
  font-size:16px;
  line-height:1.4;
  container-type:inline-size;
  container-name:ecmb;
  isolation:isolate;
}
.ecmb-wrap,
.ecmb-wrap *{box-sizing:border-box}
.ecmb-wrap a,
.ecmb-wrap button,
.ecmb-wrap h2,
.ecmb-wrap p,
.ecmb-wrap span,
.ecmb-wrap strong{
  margin-top:0;
  margin-bottom:0;
}
.ecmb-wrap img{
  display:block;
  max-width:100%;
}

/*
 * Khung phẳng: bỏ bóng và nhiều lớp bo viền gây cảm giác gợn.
 * Mỗi khu vực được phân tách bằng đường kẻ mảnh thay vì hộp lồng hộp.
 */
.ecmb-main,
.ecmb-accessories,
.ecmb-brands{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 !important;
  background:#fff;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.ecmb-main,
.ecmb-accessories{
  padding:clamp(12px,1.35cqi,18px) !important;
}
.ecmb-accessories,
.ecmb-brands{
  border-top:1px solid #ededed;
}

/* Tiêu đề gọn, đồng nhất và không bị CSS theme đẩy lệch. */
.ecmb-heading{
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:7px clamp(9px,1cqi,14px);
  margin:0 0 clamp(10px,1cqi,14px) !important;
  padding:0 !important;
}
.ecmb-heading > div{
  flex:1 1 230px;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
}
.ecmb-heading h2{
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  color:#111;
  font-size:clamp(17px,1.65cqi,23px) !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.ecmb-heading h2:before{
  content:"";
  display:inline-block;
  width:clamp(4px,.45cqi,6px);
  height:1.02em;
  margin-right:clamp(7px,.7cqi,10px);
  border-radius:999px;
  background:var(--ecmb-primary);
  vertical-align:-.08em;
}
.ecmb-heading p{
  max-width:100%;
  margin:clamp(4px,.4cqi,6px) 0 0 !important;
  padding:0 !important;
  color:#666;
  font-size:clamp(12px,1.05cqi,15px) !important;
  line-height:1.35 !important;
  font-weight:400;
  overflow-wrap:anywhere;
}
.ecmb-all{
  flex:0 0 auto;
  max-width:100%;
  min-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:0 !important;
  padding:clamp(7px,.7cqi,9px) clamp(10px,1.05cqi,14px) !important;
  border:1px solid var(--ecmb-primary);
  border-radius:8px;
  background:#fff;
  color:var(--ecmb-primary);
  font-size:clamp(11.5px,.95cqi,13.5px) !important;
  line-height:1.2 !important;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:none;
}
.ecmb-all span{
  flex:0 0 auto;
  font-size:1.15em;
  line-height:.8;
}
.ecmb-all:hover{
  background:var(--ecmb-primary);
  color:#fff;
}

/* Danh mục cha: ảnh lớn và nhóm card luôn cùng trục, không kéo giãn bất thường. */
.ecmb-main-grid{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(190px,31%) minmax(0,1fr);
  gap:clamp(10px,1.25cqi,16px);
  align-items:stretch;
}
.ecmb-hero{
  width:100%;
  min-width:0;
  min-height:clamp(190px,19cqi,235px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #ededed;
  border-radius:clamp(8px,.8cqi,11px);
  background:#fff;
}
.ecmb-hero img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  object-fit:contain;
  object-position:center;
  transition:transform .25s ease;
}
.ecmb-hero:hover img{transform:scale(1.015)}

/*
 * Dùng flex-wrap + justify-content:center để hàng cuối luôn nằm giữa.
 * PHP tính số cột cân bằng theo tổng số item cho từng breakpoint.
 */
.ecmb-category-grid,
.ecmb-accessory-grid{
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:flex-start;
  align-items:stretch;
  gap:var(--ecmb-card-gap);
}
.ecmb-category-grid > .ecmb-card{
  flex:0 1 var(--ecmb-main-current-basis);
  width:var(--ecmb-main-current-basis);
  max-width:var(--ecmb-main-current-basis);
}
.ecmb-accessory-grid > .ecmb-card{
  flex:0 1 var(--ecmb-acc-current-basis);
  width:var(--ecmb-acc-current-basis);
  max-width:var(--ecmb-acc-current-basis);
}

/* Card nhỏ gọn, đều chiều cao và nền phẳng. */
.ecmb-wrap .ecmb-card{
  min-width:0;
  height:auto !important;
  min-height:clamp(118px,10cqi,146px);
  margin:0 !important;
  padding:clamp(8px,.8cqi,11px) !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  border:1px solid #e6e6e6;
  border-radius:clamp(7px,.7cqi,10px);
  background:#fff;
  color:#111;
  text-decoration:none !important;
  box-shadow:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.ecmb-wrap .ecmb-accessory-card{
  min-height:clamp(112px,9cqi,136px);
}
.ecmb-card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--ecmb-primary) 55%,#e6e6e6);
  box-shadow:0 4px 12px rgba(0,0,0,.045);
}
.ecmb-wrap .ecmb-card-image{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  height:clamp(64px,7cqi,88px) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ecmb-wrap .ecmb-accessory-card .ecmb-card-image{
  height:clamp(58px,6cqi,78px) !important;
}
.ecmb-wrap .ecmb-card-image img{
  width:min(100%,140px) !important;
  height:100% !important;
  max-width:140px !important;
  max-height:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  object-fit:contain;
  object-position:center;
  transition:transform .2s ease;
}
.ecmb-wrap .ecmb-accessory-card .ecmb-card-image img{
  width:min(100%,122px) !important;
  max-width:122px !important;
}
.ecmb-card:hover .ecmb-card-image img{transform:scale(1.025)}
.ecmb-wrap .ecmb-card-title{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  min-height:2.5em;
  margin:clamp(5px,.5cqi,8px) 0 0 !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  font-size:clamp(12px,1.02cqi,15px) !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Thanh thương hiệu phẳng, không tạo thêm một hộp bo tròn nặng. */
.ecmb-brands{
  display:grid;
  grid-template-columns:minmax(0,auto) clamp(25px,2.5cqi,30px) minmax(0,1fr) clamp(25px,2.5cqi,30px);
  align-items:center;
  gap:clamp(7px,.8cqi,11px);
  padding:clamp(10px,1.1cqi,14px) clamp(12px,1.35cqi,18px) !important;
}
.ecmb-brands strong{
  min-width:0;
  max-width:100%;
  color:#222;
  font-size:clamp(12px,1.2cqi,15px) !important;
  line-height:1.25 !important;
  font-weight:800;
  white-space:normal;
  overflow-wrap:anywhere;
}
.ecmb-brand-viewport{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.ecmb-brand-track{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.2cqi,15px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.ecmb-brand-track::-webkit-scrollbar{display:none}
.ecmb-brand{
  flex:0 0 clamp(78px,10cqi,112px);
  width:clamp(78px,10cqi,112px);
  min-width:0;
  height:clamp(36px,4.5cqi,48px);
  margin:0 !important;
  padding:clamp(4px,.55cqi,7px) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:6px;
  color:#222;
  text-decoration:none;
  scroll-snap-align:start;
}
.ecmb-brand img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:clamp(26px,3.2cqi,34px) !important;
  margin:0 auto !important;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.72;
  transition:filter .18s ease,opacity .18s ease,transform .18s ease;
}
.ecmb-brand span{
  max-width:100%;
  font-size:clamp(10.5px,.9cqi,12.5px) !important;
  line-height:1.2 !important;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ecmb-brand:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.025);
}

/* Khóa kích thước nút < > trước CSS của Flatsome/theme. */
.ecmb-prev,
.ecmb-next{
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative;
  width:clamp(25px,2.5cqi,30px) !important;
  min-width:clamp(25px,2.5cqi,30px) !important;
  max-width:30px !important;
  height:clamp(25px,2.5cqi,30px) !important;
  min-height:clamp(25px,2.5cqi,30px) !important;
  max-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden;
  border:1px solid #e3e3e3 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer;
}
.ecmb-prev:before,
.ecmb-next:before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(5px,.55cqi,7px);
  height:clamp(5px,.55cqi,7px);
  border-top:1.5px solid var(--ecmb-primary);
  border-right:1.5px solid var(--ecmb-primary);
}
.ecmb-prev:before{transform:translate(-38%,-50%) rotate(-135deg)}
.ecmb-next:before{transform:translate(-62%,-50%) rotate(45deg)}
.ecmb-prev:hover,
.ecmb-next:hover,
.ecmb-prev:focus-visible,
.ecmb-next:focus-visible{
  border-color:var(--ecmb-primary) !important;
  background:var(--ecmb-primary) !important;
  outline:none;
}
.ecmb-prev:hover:before,
.ecmb-next:hover:before,
.ecmb-prev:focus-visible:before,
.ecmb-next:focus-visible:before{border-color:#fff}
.ecmb-prev:disabled,
.ecmb-next:disabled{
  opacity:.35;
  cursor:default;
}

/* Co giãn theo chiều rộng thật của shortcode/UX Block. */
@container ecmb (max-width:1080px){
  .ecmb-wrap{
    --ecmb-main-current-basis:var(--ecmb-main-large-basis,var(--ecmb-main-wide-basis));
    --ecmb-acc-current-basis:var(--ecmb-acc-large-basis,var(--ecmb-acc-wide-basis));
  }
  .ecmb-main-grid{grid-template-columns:minmax(175px,30%) minmax(0,1fr)}
}
@container ecmb (max-width:820px){
  .ecmb-wrap{
    --ecmb-main-current-basis:var(--ecmb-main-medium-basis,var(--ecmb-main-wide-basis));
    --ecmb-acc-current-basis:var(--ecmb-acc-medium-basis,var(--ecmb-acc-wide-basis));
  }
  .ecmb-wrap .ecmb-card{min-height:112px}
  .ecmb-wrap .ecmb-accessory-card{min-height:106px}
}
@container ecmb (max-width:650px){
  .ecmb-wrap{
    --ecmb-main-current-basis:var(--ecmb-main-small-basis,100%);
    --ecmb-acc-current-basis:var(--ecmb-acc-small-basis,50%);
  }
  .ecmb-heading{align-items:flex-start}
  .ecmb-heading > div{flex-basis:180px}
  .ecmb-main-grid{grid-template-columns:1fr}
  .ecmb-hero{height:clamp(165px,40cqi,225px);min-height:0}
  .ecmb-brands{grid-template-columns:27px minmax(0,1fr) 27px}
  .ecmb-brands strong{grid-column:1/-1}
  .ecmb-prev{grid-column:1}
  .ecmb-brand-viewport{grid-column:2}
  .ecmb-next{grid-column:3}
}
@container ecmb (max-width:430px){
  .ecmb-wrap{
    --ecmb-main-current-basis:var(--ecmb-main-tiny-basis,100%);
    --ecmb-acc-current-basis:var(--ecmb-acc-tiny-basis,50%);
  }
  .ecmb-main,.ecmb-accessories{padding:10px !important}
  .ecmb-heading > div{flex-basis:100%}
  .ecmb-heading h2{font-size:16px !important}
  .ecmb-heading p{font-size:12px !important}
  .ecmb-all{max-width:100%;padding:6px 9px !important}
  .ecmb-category-grid,.ecmb-accessory-grid{gap:7px}
  .ecmb-wrap .ecmb-card{min-height:104px;padding:7px !important}
  .ecmb-wrap .ecmb-accessory-card{min-height:100px}
  .ecmb-wrap .ecmb-card-image{height:62px !important}
  .ecmb-wrap .ecmb-accessory-card .ecmb-card-image{height:56px !important}
  .ecmb-wrap .ecmb-card-title{min-height:2.4em;font-size:11.5px !important}
  .ecmb-brand{flex-basis:74px;width:74px;height:38px}
}
@container ecmb (max-width:290px){
  .ecmb-wrap{
    --ecmb-main-current-basis:100%;
    --ecmb-acc-current-basis:100%;
  }
  .ecmb-wrap .ecmb-card{
    min-height:78px;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:8px;
    text-align:left;
  }
  .ecmb-wrap .ecmb-card-image,
  .ecmb-wrap .ecmb-accessory-card .ecmb-card-image{height:58px !important}
  .ecmb-wrap .ecmb-card-image img,
  .ecmb-wrap .ecmb-accessory-card .ecmb-card-image img{max-width:64px !important}
  .ecmb-wrap .ecmb-card-title{
    min-height:0;
    margin:0 !important;
    justify-content:flex-start;
    text-align:left;
  }
  .ecmb-brands{padding-inline:8px !important}
}

/* Fallback cho trình duyệt chưa hỗ trợ container query. */
@supports not (container-type:inline-size){
  @media(max-width:1080px){
    .ecmb-wrap{
      --ecmb-main-current-basis:var(--ecmb-main-large-basis,var(--ecmb-main-wide-basis));
      --ecmb-acc-current-basis:var(--ecmb-acc-large-basis,var(--ecmb-acc-wide-basis));
    }
  }
  @media(max-width:820px){
    .ecmb-wrap{
      --ecmb-main-current-basis:var(--ecmb-main-medium-basis,var(--ecmb-main-wide-basis));
      --ecmb-acc-current-basis:var(--ecmb-acc-medium-basis,var(--ecmb-acc-wide-basis));
    }
  }
  @media(max-width:650px){
    .ecmb-wrap{
      --ecmb-main-current-basis:var(--ecmb-main-small-basis,100%);
      --ecmb-acc-current-basis:var(--ecmb-acc-small-basis,50%);
    }
    .ecmb-main-grid{grid-template-columns:1fr}
    .ecmb-brands{grid-template-columns:27px minmax(0,1fr) 27px}
    .ecmb-brands strong{grid-column:1/-1}
  }
  @media(max-width:430px){
    .ecmb-wrap{
      --ecmb-main-current-basis:var(--ecmb-main-tiny-basis,100%);
      --ecmb-acc-current-basis:var(--ecmb-acc-tiny-basis,50%);
    }
  }
}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .ecmb-card:hover{border-color:var(--ecmb-primary)}
}
@media(prefers-reduced-motion:reduce){
  .ecmb-wrap *,
  .ecmb-wrap *:before,
  .ecmb-wrap *:after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}