/*TỐI ƯU H2 MÔ TẢ MB*/
@media (max-width: 768px) {
  .ba-text-fpt h2,
  .product_getcontent h2 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .ba-text-fpt h2,
  .product_getcontent h2 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}
/* Tăng độ tương phản cho tab title chip */
.section_product_tab .tab-title-chip,
.tab-title-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: none !important;
}

/* Icon trong tab */
.section_product_tab .tab-title-chip img,
.tab-title-chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Tab đang active hoặc hover */
.section_product_tab .tab-title-chip:hover,
.section_product_tab .active .tab-title-chip,
.section_product_tab .current .tab-title-chip,
.tab-title-chip:hover,
.active .tab-title-chip,
.current .tab-title-chip {
  color: #ffffff !important;
  background: #b42318 !important;
  border-color: #b42318;
}
.button-thongso.see-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 42px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid red;
  border-radius: 8px;
  color: red;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
}

.button-thongso.see-more:hover {
  background: red;
  color: #fff;
  border-color: red;
}

.button-thongso.see-more:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.text-center.no-padding .button-thongso.see-more {
  margin-top: 12px;
}
/**/
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
/**/
.count-down .timer-view{
  display: flex !important;
  margin: 10px 0 !important;
  justify-content: center;
}

.compare-price,
.compare-price span,
span[style*="text-decoration-line: line-through"] {
  color: #333333 !important;
}


.smart {
  background: #ffd0d0 !important;
  font-weight: 700 !important;
  border: 1px solid red;
}

/*FIX NAVBOTTOM LOAD TRÊN PC*/
@media (max-width: 767px){
  .social-fixed,
  .social-fixed *{
    pointer-events:auto;
  }
}
/*FIX ICON YÊU THÍCH*/
.btn-wishlist,
.setWishlist{
  position:absolute;
  top:8px;
  right:8px;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  margin:0 !important;
  border-radius:10px;
  z-index:5;
}

.btn-wishlist svg,
.setWishlist svg{
  width:20px;
  height:20px;
}

.product-thumbnail{
  position:relative;
}
/*fix fixde bottom*/
.fixed-bottom-mobile ul li a{
  color: red !important;
}
.fixed-bottom-mobile{
  background: white !important;
  border-top: 0px solid red !important;
}
/*fix mobile */
@media (max-width: 991px) {
  .layout-product > .container > .background-thumb > .title-product,
  .layout-product > .container > .background-thumb > .inventory_quantity,
  .layout-product .details-pro > form > .price-box {
    display: none !important;
  }

  .layout-product .product-mobile-summary {
    margin-top: 10px;
  }

  .layout-product .product-mobile-summary .title-product-mobile {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.42;
    font-weight: 700;
    color: #1f1f1f;
  }

  .layout-product .product-mobile-summary .price-box-mobile {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #ebe6d8;
    border-radius: 14px;
    background: #fffdf8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  }

  .layout-product .product-mobile-summary .price-title {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #7a6f5a;
  }

  .layout-product .product-mobile-summary .special-price,
  .layout-product .product-mobile-summary .old-price {
    display: block;
  }

  .layout-product .product-mobile-summary .special-price .product-price {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: #1f1f1f;
  }

  .layout-product .product-mobile-summary .old-price {
    margin-top: 4px;
  }
.layout-product .product-mobile-summary .inventory_quantity_mobile {
  padding: 10px 12px;
  border: 1px solid #efefef;
  border-radius: 14px;
  background: #ffffff;
}

.layout-product .product-mobile-summary .thump-break {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.layout-product .product-mobile-summary .mb-break {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0px 12px;
}

.layout-product .product-mobile-summary .stock-brand-title {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #7b7b7b;
  font-weight: 500;
}

.layout-product .product-mobile-summary .variant-sku,
.layout-product .product-mobile-summary .a-vendor,
.layout-product .product-mobile-summary .a-stock {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: #df3b32;
  font-weight: 600;
  word-break: break-word;
}

.layout-product .product-mobile-summary .sku-product br {
  display: none;
}

  .layout-product .product-mobile-summary .mb-break:last-child {
    border-bottom: 0;
  }

  .layout-product .product-mobile-summary .stock-brand-title {
    flex: 0 0 92px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #7b7b7b;
    font-weight: 500;
  }

  .layout-product .product-mobile-summary .variant-sku,
  .layout-product .product-mobile-summary .a-vendor,
  .layout-product .product-mobile-summary .a-stock {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .layout-product .product-mobile-summary .variant-sku,
  .layout-product .product-mobile-summary .a-vendor {
    color: #df3b32;
    font-weight: 500;
  }

  .layout-product .product-mobile-summary .a-stock {
    color: #df3b32;
    font-weight: 600;
  }

  .layout-product .product-mobile-summary .sku-product br {
    display: none;
  }
}
@media (max-width: 991px) {
  .layout-product .details-pro .product-mobile-reorder {
    display: block !important;
    margin-bottom: 12px;
  }

  .layout-product .details-pro .product-mobile-reorder .title-product {
    display: block !important;
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.35;
  }

  .layout-product .details-pro .product-mobile-reorder .price-box {
    margin-bottom: 12px;
  }

  .layout-product .details-pro .product-mobile-reorder .inventory_quantity {
    margin-bottom: 12px;
  }

  .layout-product .details-pro .product-mobile-reorder .price-title {
    display: block;
    margin-bottom: 8px;
  }

  .layout-product.mobile-reordered-ready > .container > .background-thumb > .title-product,
  .layout-product.mobile-reordered-ready > .container > .background-thumb > .inventory_quantity {
    display: none !important;
  }
}
@media (max-width: 991px) {
    .product-image-block {
        margin-bottom: 8px !important;
    }
}
@media (max-width: 767px) {
  .layout-product .inventory_quantity{
    margin-bottom: 0px !important;
  }
   .price{
     // font-size: 35px;
   }
.layout-product .details-pro .price-box{
  padding: 15px 18px !important;
}
  .gallery-thumbs{
    display: none !important;
  }
  .bread-crumb {
    margin-bottom: 8px;
  }

  .bread-crumb .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bread-crumb .row,
  .bread-crumb .col-12 {
    margin: 0;
    padding: 0;
  }

  .bread-crumb .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    min-width: 100%;
    padding: 4px 4px;
    margin: 0;
  }

  .bread-crumb .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .bread-crumb .breadcrumb li {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0;
  }

  .bread-crumb .breadcrumb li a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.4;
  }

  .bread-crumb .breadcrumb li span[itemprop="name"],
  .bread-crumb .breadcrumb li strong[itemprop="name"] {
    display: inline-block;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
  }

  .bread-crumb .breadcrumb .mr_lr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    flex: 0 0 auto;
  }

  .bread-crumb .breadcrumb .mr_lr svg {
    width: 8px;
    height: 8px;
  }
}
/**/
.collection-description-box > ul{
  padding-left: 15px !important; 
}
/*bocongthuong*/
.bocongthuong{
  list-style-type: none;
}
/*mô tả sp*/
// .collection-description-box img {
//   display: block;
//   width: 80% !important;
//   max-width: 0% !important;
//   height: auto !important;
//   margin: 12px auto;
//   border-radius: 5px;
// }
.collection-desc-news .blog-product {
  padding: 12px 14px;
}

.collection-desc-news .blog-product .title-index {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.collection-desc-news .blog-product .block-blog {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collection-desc-news .blog-product .block-blog img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 6px;
}

.collection-desc-news .blog-product .block-blog h3,
.collection-desc-news .blog-product .block-blog h4,
.collection-desc-news .blog-product .block-blog .title,
.collection-desc-news .blog-product .block-blog a {
  font-size: 16px;
  line-height: 1.45;
  font-weight: bold;
  padding-top:5px;
}
.background-thumb{
  padding: 15px 10px;
}

.collection-desc-news .blog-product .block-blog h3 a,
.collection-desc-news .blog-product .block-blog h4 a,
.collection-desc-news .blog-product .block-blog .title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-desc-news .blog-product .block-blog .post-time,
.collection-desc-news .blog-product .block-blog time,
.collection-desc-news .blog-product .block-blog span {
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .collection-desc-news .blog-product .block-blog img {
    height: 180px;
  }

  .collection-desc-news .blog-product .title-index {
    font-size: 20px;
  }
}
.collection-description-box table,
.rte table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
}

.collection-description-box table td,
.collection-description-box table th,
.rte table td,
.rte table th {
  padding: 10px 12px !important;
  word-break: break-word;
  vertical-align: top !important;
}

.collection-description-box table p,
.rte table p {
  margin: 0 !important;
  line-height: 1.5 !important;
}

@media (max-width: 767px) {
  .collection-description-box table.mobile-table-ready,
  .rte table.mobile-table-ready {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    background: transparent !important;
  }

  .collection-description-box table.mobile-table-ready tbody,
  .rte table.mobile-table-ready tbody {
    display: table !important;
    width: max-content !important;
    min-width: 640px !important;
    border-collapse: collapse !important;
    background: #fff !important;
  }

  .collection-description-box table.mobile-table-ready tr,
  .rte table.mobile-table-ready tr {
    display: table-row !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .collection-description-box table.mobile-table-ready td,
  .collection-description-box table.mobile-table-ready th,
  .rte table.mobile-table-ready td,
  .rte table.mobile-table-ready th {
    display: table-cell !important;
    width: auto !important;
    min-width: 150px !important;
    padding: 10px 12px !important;
    border: 1px solid #e5e7eb !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
  }

  .collection-description-box table.mobile-table-ready td::before,
  .collection-description-box table.mobile-table-ready th::before,
  .rte table.mobile-table-ready td::before,
  .rte table.mobile-table-ready th::before {
    content: none !important;
    display: none !important;
  }

  .collection-description-box table.mobile-table-ready p,
  .rte table.mobile-table-ready p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .collection-description-box table.mobile-table-ready::-webkit-scrollbar,
  .rte table.mobile-table-ready::-webkit-scrollbar {
    height: 6px;
  }

  .collection-description-box table.mobile-table-ready::-webkit-scrollbar-thumb,
  .rte table.mobile-table-ready::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 999px;
  }
}
/**/
.image-container.has-custom-frame{
  position: relative;
  overflow: hidden;
}

.image-container.has-custom-frame .product-item-photo{
  position: relative;
  z-index: 1;
  display: block;
}

.image-container.has-custom-frame .collection-frame-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 99;
}
.fixed-action-btn {
  position: fixed;
  bottom: 165px;
  right: 5px;
  width: 50px;
  z-index: 99; }
  .fixed-action-btn ul {
    margin-bottom: 10px; }
  .fixed-action-btn li {
    height: 40px;
    position: relative; }
    .fixed-action-btn li.zalo a {
      background: #008FE5;
      line-height: 38px; }
    .fixed-action-btn li.facebook a {
      line-height: 38px; }
    .fixed-action-btn li.hotline a {
      background: red; }
    .fixed-action-btn li a {
      color: #fff;
      display: block;
      font-size: 20px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.4);
      cursor: pointer;
      display: block;
      text-align: center;
      border-radius: 50%;
      height: 40px;
      width: 40px;
      line-height: 40px;
      color: white;
      margin: 10px auto; }
.fixed-action-btn li {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }

@media (max-width: 991px){
.title-product{
  font-size: 20px !important;
}
}
.thump-break{
  display: flex;
  flex-wrap: wrap;
}
/*FIX ICON HEADER RIGHT*/
/*FIX MENUNAV SCROLL*/
html.sintech-nav-scroll-lock,
body.sintech-nav-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.thong-so-popup .thong-so {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* KHÓA SCROLL CHO BUILD PC */
html.buildpc-scroll-locked,
body.buildpc-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.buildpc-scroll-locked {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100%;
  top: var(--buildpc-lock-top, 0);
  padding-right: var(--buildpc-lock-pr, 0px);
}
/*NÚT BACK HEADER*/ 
.backtop{
  display: none;
}
.product-action .btn-compare{
  display: none !important;
}
@media (max-width: 991px){
  header.header .header-control{
    position: initial !important;
    right: initial !important;
    width: initial !important;
    top: initial !important;
    padding: 0px 10px;
  } 
  header.header .header-control ul li .icon svg{
    width: 35px;
    height: 35px;
  }
}
header.header .header-control ul li .icon,
header.header .header-control ul li a.icon {
    min-width: 50px;
    height: 50px;
    width: 50px;
    background: rgba(0,0,0,0.35) !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all .25s ease;
}

header.header .header-control ul li .icon:hover,
header.header .header-control ul li a.icon:hover{
    background: rgba(0,0,0,0.55) !important;
    box-shadow: 0 0 12px rgba(255,80,0,0.6);
    transform: translateY(-2px);
}
header.header .header-control ul li.header-cart {
    background: rgba(0,0,0,0.35) !important;
    border-radius: 8px;
    padding: 0 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all .25s ease;
}
header.header .header-control ul li.header-cart:hover{
    background: rgba(0,0,0,0.55) !important;
    box-shadow: 0 0 12px rgba(255,80,0,0.6);
    transform: translateY(-2px);
}
header.header .header-control ul li.header-cart .icon,
header.header .header-control ul li.header-cart .icon:hover{
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}
header.header .header-control ul li a b {
    color: #FFF !important;
}

/*BUTTON DANH MỤC*/
.header-icon-menu{
    transition: all .25s ease;
    position: relative;
    height: 45px !important;
    max-width: 155px !important;
   background: rgba(0,0,0,0.35) !important;
}
/*FIX CHI TIẾT SP*/
.breadcrumb{
      padding: 15px 0 0 0;
}
/* CHIA HEADER */
header.header .header_fix > .row{
  display:flex;
  align-items:center;
  margin:0;
}.header-left{
    flex:1;
    display:flex;
    align-items:center;
}

.header-search{
    flex:2;
    display:flex;
    align-items:center;
    padding:0 15px;
}
.header-search form{
    width:100%;
}
.header-search input{
    width:100%;
}
.header-control{ display:flex; justify-content:flex-end; }
.header-search,
.header-control,
.header-left{
    max-width:none !important;
    width:auto !important;
}
/* TẮT HOVER BANNER */
.thumb-image-banner:hover img{
    transform: none !important;
    transition: none !important;
}
/* FIX MOBILE - CART BO TRÒN */
@media (max-width: 1199px){
  header.header .header-control ul li.header-cart{
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header-icon-menu {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
  .header-icon-menu svg {
    fill: #fff;
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
}

.align-items-center{
  padding: 10px 0px 0px 0px;
}
header.header{
  padding: 0px !important;
}
@media (min-width: 576px) and (max-width: 1199px){
  header.header .header-account,
  header.header .header-hethong{
    display: none !important;
  }

  header.header .row.align-items-center{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  header.header .row.align-items-center > .col-12.col-lg-2{
    flex: 0 0 auto !important;
    width: auto !important;
    padding-right: 0px;
  }
    
  header.header .header-search{
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
  }
}
@media (max-width: 991px){
  header.header .logo{
    margin-bottom: 0px !important;
  }
  header.header .logo img{
      max-width: 100px;
      margin-top: 5px;
    }
    .align-items-center{
    padding: 0;
}
}

@media (max-width: 767px){
  header.header .logo img{
    max-width: 90px;
   margin-top: 5px;
  }
    .align-items-center{
  padding: 0;
  }
 header.header .header_fix{
    height: auto;
    display: block;
  padding-bottom: 10px;
  }

  header.header .logo img{
    max-width: 100px;
    margin-top: 5px;
  }

  .header-search{
    flex: 1;       
    margin: 0 10px;
  }

  .header-icon-menu{
    flex-shrink: 0;
  }
.header_fix .row{
  width:100%;
  margin:0;
}

}

@media (max-width: 575px){
  header.header .logo img{
    max-width: 120px;
    margin-top: 5px;
  }
}

/*FIX BỊ LỆCH TRANG TRÊN MOBILE*/
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}
.header-index{
  padding: 0px !important;
}


/* FIX BANNER */
.home-slider{
  width: 100% !important;   
  max-width: 1410px;        
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px){
  .home-slider{ max-width: 1380px; } 
}
@media (min-width: 992px) and (max-width: 1199px){
  .home-slider{ max-width: 960px; }
}
@media (min-width: 768px) and (max-width: 991px){
  .home-slider{ max-width: 720px; }
}
@media (min-width: 576px) and (max-width: 767px){
  .home-slider{ max-width: 540px; }
}
@media (max-width:991px){

.home-slider img{
  width: 100% !important;
  display: block;
  border-radius: 10px;
  margin-top:10px;
}
}
@media (max-width:575px){
.home-slider{
  padding: 0 10px;
  background: #fff;
  overflow: hidden !important;
  -webkit-clip-path: inset(0 10px);
          clip-path: inset(0 10px);
}

.home-slider .swiper-wrapper,
.home-slider .swiper-slide{
  width: 100%;
}

.home-slider img{
  width: 100% !important;
  display: block;
  border-radius: 10px;
  margin-top:10px;
}
.banner_first{
   border-radius: 10px;
  overflow: hidden;
}
}
.banner_slider .swiper-slide img{
  width:100%;
  height:auto;
  display:block;
}

/* NỘI DUNG BANER */
@media (min-width:768px){
  .home-slider .swiper-pagination{
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 14px 0 !important;     
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .home-slider .swiper-pagination::-webkit-scrollbar{ display:none; }

}
/* NỘI DUNG BANNER */
.home-slider .swiper-pagination{
  position: static;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.home-slider .swiper-pagination .slider-tab{
  flex: 1 1 0;
  min-width: 0;
  max-width: none !important;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 10px 8px;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.2;
  color: #222;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
}

.home-slider .swiper-pagination .swiper-pagination-bullet-active.slider-tab{
  border-bottom-color: #e60023;
  font-weight: 700;
}

.slider-tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slider-tab strong{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.slider-tab small{
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

@media (min-width: 768px){
  .home-slider .swiper-pagination{
    gap: 0 !important;
    padding: 14px 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 767px){
  .home-slider .swiper-pagination{
    display: none !important;
  }
}

/* NAV BAR */
.mobile-navbar{
  display: none;
}

@media (max-width: 991px){
  .mobile-navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }

  .mobile-navbar img{
    height: 35px;
    width: auto;
  }
}
.home-slider .swiper-pagination{
  position: static;           
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.home-slider .swiper-pagination .slider-tab{
  flex: 1;
  text-align: center;
  background: transparent;
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 10px 8px;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.2;
  color: #222;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-slider .swiper-pagination .swiper-pagination-bullet-active.slider-tab{
  border-bottom-color: #e60023;
  font-weight: 700;
}
@media (max-width: 767px){
  .home-slider .swiper-pagination{
    display: none !important;
  }
}
/*  */
.slider-tab{
  display:flex;
  flex-direction:column;
  text-align:center;
  padding:10px;
  white-space: normal;  
}

.slider-tab strong{
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}

.slider-tab small{
  font-size:12px;
  color:#666;
  line-height:1.4;

  white-space: normal;  
  word-break: break-word; 
}
/* NAV BAR */

.mobile-navbar{
  display:none;
}

@media (max-width: 991px){

.mobile-navbar{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px;
}

.mobile-navbar img{
  height:35px;
  width:auto;
}
}
/*FIX DANH MỤC SẢN PHẨM*/
@media (max-width: 767px){
  .section_danhmuc .danhmuc-slider a{
    height: 100px !important;
  }
}
/**/
@media (max-width: 767px){
 .slider-dots{
  text-align:center;
  margin-top:8px;
    background: transparent !important;
}

.slider-dots .dot{
  width:7px;
  height:7px;
  background:#bdbdbd;
  border-radius:50%;
  display:inline-block;
  margin:0 4px;
  transition:0.3s;
}

.slider-dots .dot.active{
  width:26px;
  height:7px;
  border-radius:10px;
  background:#e60000;
}

}
@media (max-width:575px){
  .home-slider .swiper-pagination,
  .home-slider .swiper-pagination .slider-tab{
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .home-slider .swiper-pagination::before,
  .home-slider .swiper-pagination::after,
  .home-slider .swiper-pagination .slider-tab::before,
  .home-slider .swiper-pagination .slider-tab::after{
    content: none !important;             
    display: none !important;
  }

  .section_slider,
  .section_slider .home-slider{
    background: transparent !important;
  }
}
/* FIX ĐỘ CÁCH */
section{
  margin-bottom: 20px;
}

/**/
@media (max-width:575px){
  header.header .row.align-items-center{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }

  .mobile-navbar{ order:1; }
  .logo{ display:flex; justify-content:center; }
  .col-auto.col-lg-2{ order:2; flex:1 1 auto; padding: 0px !important;}   
  .header-control{ order:3; }                     

  .header-hethong, .header-account{ display:none !important; }

  .header-search{
    order:4;
    flex:0 0 100%;
    width:100%;
    margin-top:8px;
    padding:0 !important;
  }
  .search-header, .search-smart, .header-search-form{ width:100%;  border-radius: 10px !important;}
  .section_danhmuc .danhmuc-slider a picture{
    min-width: 0px !important;
  width: 80px !important;
  }
}
/* ẨN KHUNG VIỀN CART MOBILE*/
@media (max-width: 991px){
  header.header .header-control ul li.header-cart{
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;

    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  header.header .header-control ul li.header-cart a.icon{
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    padding: 0 !important;
  }
}
/* FIX .fixed-bottom-mobile ul */
.fixed-bottom-mobile ul{
  justify-content: space-between;
}
/*FIX NAVBAR MENU*/
.menu-header .logo-img{
  display: none;
}
@media (max-width: 991px){
.menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 56px;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 2px;
    padding: 0;
    border-bottom: none !important;
    background: #fff;
}

.menu-header .logo-img{
    max-height: 132px;  
    width: auto;
    height: auto;
    display: block;
}
.header-nav .item_big .nav-item a{
  padding-top:10px !important;
}

}
/*FIX FOOTER*/
.footer .mid-footer .content-ft{
  color: black !important;
}
.footer .mid-footer .group-address ul li span{
  color: black !important;
}
.footer .mid-footer .group-address ul li{
  color: black !important;
}
.footer .title-menu{
  color: black !important;
}
.footer .list-menu li a{
  color: black !important;
}
.footer .mid-footer .group-address ul li a{
  color: black !important;
}
.footer{
  background: white !important;
  padding-top: 5px !important;
}
/* FIX TRANG GIỎ HÀNG */
.cart-empty a{
  margin-bottom: 20px;
}
/*FIX HỆ THỐNG CH*/
.header-hethong{
    position: relative;
}

.hethong-tooltip{
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    z-index:99999;
    background: #111;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transition: all .25s ease;
}

.header-hethong:hover .hethong-tooltip{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* FIX ẨN HIỆN HEADER*/
header.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  transition: transform 0.28s ease, opacity 0.28s ease;
  transform: translateY(0);
  opacity: 1;
}

header.header.header-scroll-hide {
  transform: translateY(-100%);
  opacity: 0;
}
:root{
  --header-height: 130px;
}

@media (max-width: 991px){
  :root{
    --header-height: 110px;
  }
}

body{
  padding-top: 0 !important;
}

.header-spacer{
  height: var(--header-height);
  flex: 0 0 var(--header-height);
}
/*FIX DANH MUC*/
.header-menu-ver {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 15px;
  right: 15px;
  z-index: 9999;
  visibility: hidden;
  box-shadow: none;
  touch-action: manipulation;
  height: 510px;
  width: calc(100% - 30px);
  margin: 0 auto;
  padding: 0;
  border-radius: 10px;
}
.opacity_menu {
  z-index: 9999;
}

header.header {
  overflow: visible;
}

/* FIX THÔNG SỐ KĨ THUẬT*/
.thong-so-popup{
  z-index: 99999999;
}
/*FIX BỘ LỌC NHÓM SP*/
@media (max-width: 991px) {
    .dqdt-sidebar {
      z-index: 99999999;
    }
}
/*FIX TÌM KIẾM VÀ DANH MỤC*/
.header-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  z-index: 9998;
}

.header-panel-overlay.show {
  opacity: 1;
  visibility: visible;
}
/*FIX OVER CHE HEADER*/
@media (max-width: 991px){
  header.header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000002 !important;
    overflow: visible !important;
  }

  header.header .mobile-navbar,
  header.header .logo,
  header.header .header-control{
    position: relative !important;
    z-index: 4 !important;
  }

  header.header .header-search{
    position: relative !important;
    z-index: 1 !important;
  }

  header.header::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    transition: opacity .25s ease, visibility .25s ease;
  }

  body.mobile-panel-open header.header::after{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .opacity_menu{
    position: fixed !important;
    top: var(--mobile-navbar-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mobile-navbar-h)) !important;
    background: rgba(0,0,0,.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1000000 !important;
    transition: opacity .25s ease, visibility .25s ease !important;
  }

  .opacity_menu.current,
  .opacity_menu.active{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }
}
 
/*MENU HOT*/
.menu-badge-hot{
  position: relative !important;
  margin-left: 12px !important;
  padding: 0 7px 0 4px !important;
  min-width: auto !important;
  width: auto !important;
  height: 16px !important;
  line-height: 16px !important;
  background: #ed1b24 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border-radius: 0 !important;
  overflow: visible !important;
  animation: menuHotShake 1s infinite ease-in-out;
}

.menu-badge-hot em{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
}

.menu-badge-hot:before{
  content: "";
  position: absolute;
  left: -5.5px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 6px solid #ed1b24;
  border-bottom: 8px solid transparent;
}

.menu-badge-hot:after{
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 8px solid #ed1b24;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #ed1b24;
}

@keyframes menuHotShake{
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}
/*FIX XEM THÊM SẢN PHẨM*/
.btn-loadmore {
    color: #fff;
    margin-top: 15px;
    padding: 10px 30px;
    font-size: 18px;
    border-radius: 8px;
}
/*Ẩn tiêu đề trong page*/
.title-head {
  display: none !important;
}
/*NỘI DUNG LIÊN HỆ*/
.layout-contact .contact .info-contact .group-address ul li a{
  color:#000;
}

.fa-caret-down {
  display: none !important;
}
/*SỐ TRANG TÌM KIẾM*/
.pagination.clearfix{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0 10px;
  padding: 0;
  list-style: none;
}

.pagination.clearfix .page-item{
  margin: 0;
  padding: 0;
}

.pagination.clearfix .page-link{
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #222;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.pagination.clearfix .page-link:hover{
  background: #d60000;
  border-color: #d60000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(214,0,0,0.18);
}

.pagination.clearfix .active .page-link,
.pagination.clearfix .page-item.active .page-link{
  background: #d60000;
  border-color: #d60000;
  color: #fff;
  box-shadow: 0 6px 14px rgba(214,0,0,0.18);
}

.pagination.clearfix .disabled .page-link,
.pagination.clearfix .page-item.disabled .page-link{
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
  background: #f5f5f5;
  border-color: #ececec;
  color: #888;
  box-shadow: none;
}

.pagination.clearfix .page-item:first-child .page-link,
.pagination.clearfix .page-item:last-child .page-link{
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 767px){
  .pagination.clearfix{
    gap: 6px;
    margin: 18px 0 8px;
  }

  .pagination.clearfix .page-link{
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 8px;
  }
}
header.header .header-control ul li .account-header{
  z-index: 999999999;
}
/*ICON TRƯỚC ITEMBIG*/
.header-nav .a-img .menu-item-icon{
  width: 25px;
  height: 25px;
  object-fit: contain;
  flex: 0 0 18px;
}







/* CODE TRANG BUILD */

/*Thay đổi màu giao diện tại đây nếu cần*/
:root {
    --mamaubutton: #d60000;       /* Màu giao diện và nút chính */
    --mamauhoverbutton: #b00000;   /*Mã màu hover button*/
    --mamaunutthem: #23a300;    /*Mã màu nút thêm cấu hình*/
    --mamauhovernutthem: linear-gradient(90deg, #23a300 0%, #38da13 100%); /* Thay đoạn mã #23a300 nếu cần*/
    --mamaubuttonclose: #d60000;   /*Mã màu nút đóng trong popup*/
    --maumauhoverbuttonclose: #ffe4e4; /*Mã màu hover nút đóng trong popup*/
    --mamauboloctag: #ffecec;  /*Mã màu lúc chọn bộ lọc trong bộ lọc tag sản phẩm*/
    --mamauboderboloctag: #ffb3b3;  /*Mã màu border của bộ lọc tag*/
    --mamaugia: #d60000; /*Mã màu giá trong popup khuyến cáo ko thay*/
    --mamauhoverpopupuudai:#fff7f7; /*Mã màu hover ưu đãi build pc*/
    --mamaubordertamtinh: linear-gradient(90deg,#fff 85%,#fff2f1 100%);  /*Thay đoạn #fff2f1 nếu muốn thay màu khác*/
    --mamauvientamtinh: #d6000011;  /* Mã màu viền nằm dưới tạm tính */
    --mamauhoverdanhsachsp: #de2f42;  /* Mã màu lúc hover danh sách sản phẩm trong popup */
}
{%- comment -%}
/*CODE CSS GIAO DIỆN BUILD PC*/
{%- endcomment -%}
.paging{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin:15px 0;}
.paging .pg{min-width:36px;height:36px;padding:0 10px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:#f2f3f5}
.paging .pg.active{background:#d60000;color:#fff;font-weight:600}
.paging .pg.ellipsis{cursor:default;background:transparent}
.paging .pg[disabled]{opacity:.5;cursor:not-allowed}
/* Base */
.paging{
  display:flex; align-items:center; gap:8px;
  justify-content:center; padding:10px;
  flex-wrap:nowrap;              /* tránh rớt xuống hàng */
  max-width:100%;
}
.paging .pg{
  min-width:38px; height:38px; padding:0 10px;
  border-radius:12px; border:1px solid #e9e9e9;
  background:#fff; color:#222; font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.paging .pg:hover{transform:translateY(-1px)}
.paging .pg.active{
  background:var(--mamaubutton,#d60000); color:#fff; border-color:transparent;
  box-shadow:0 6px 14px rgba(214,0,0,.18);
}
.paging .pg[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.paging .ellipsis{
  background:transparent; border:none; box-shadow:none;
  min-width:auto; padding:0 4px; cursor:default; color:#777;
}

/* Dark-on-light viền số */
.paging .pg:not(.active){ outline:0; }

/* CSS CẤU HÌNH GỢI Ý */
.pc-suggest{margin:25px 0 20px;background:#f8fafc;border-radius:20px;padding:20px;box-shadow:0 6px 15px rgba(0,0,0,.05)}
.pc-suggest-title{font-size:24px;font-weight:900;color:#1a202c;margin:0 0 15px;text-transform:uppercase;letter-spacing:1px}
.pc-suggest-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.psg-tile{position:relative;border:2px solid #e6e6e6;padding:0;border-radius:20px;overflow:hidden;cursor:pointer;transition:all .4s ease;background:#fff}
.psg-tile:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.psg-tile img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:brightness(.9);transition:filter .4s ease}
.psg-tile:hover img{filter:brightness(1.1)}
.psg-tile span{position:absolute;left:15px;bottom:15px;color:#fff;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.7);background:rgba(0,0,0,.6);padding:6px 12px;border-radius:8px}

.psg-modal{position:fixed;inset:0;display:none;z-index:100000000}
.psg-modal.show{display:block}
.psg-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.psg-dialog{
  position:absolute;inset:60px 40px;max-width:1400px;margin:0 auto;left:0;right:0;
  background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 12px 25px rgba(0,0,0,.15);
  height:calc(100vh - 80px);max-height:calc(100dvh - 80px); /* cho phép cuộn bên trong */
}
@media (max-width:768px){.psg-dialog{inset:20px;height:calc(100dvh - 40px);max-height:calc(100dvh - 40px)}}

.psg-head{display:flex;justify-content:space-between;align-items:center;padding:18px 25px;border-bottom:2px solid #e6e6e6;background:linear-gradient(90deg,#f7fafc,#e2e8f0)}
.psg-breadcrumb{display:flex;align-items:center;gap:15px}
.psg-badge{background:#dbeafe;color:#1e40af;padding:6px 12px;border-radius:12px;font-weight:700;font-size:15px}
.psg-close{border:0;background:#e2e8f0;width:45px;height:45px;border-radius:15px;cursor:pointer;font-size:26px;transition:background .4s ease,transform .3s ease}
.psg-close:hover{background:#cbd5e0;transform:rotate(90deg)}

.psg-toolbar{
  display:flex;gap:5px;padding:15px 25px;border-bottom:2px solid #e6e6e6;flex-wrap:wrap;align-items:center;background:#f7fafc;
  position:sticky;top:0;z-index:2; /* sticky để lọc dễ khi cuộn */
}
.psg-chips{display:flex;gap:12px;flex-wrap:wrap}
.psg-chip{border:2px solid #e6e6e6;background:#fff;border-radius:10px;padding:10px 15px;font-size:15px;cursor:pointer;transition:all .4s ease}
.psg-chip.active{background:#1e40af;color:#fff;border-color:#1e40af}
.psg-chip:hover{background:#dbeafe}
.psg-actions{display:flex;gap:12px;margin-left:auto;align-items:center}
.psg-input{height:45px;border:2px solid #e6e6e6;border-radius:12px;padding:0 15px;min-width:300px;font-size:15px;transition:border-color .4s ease,box-shadow .4s ease}
.psg-input:focus{border-color:#1e40af;outline:none;box-shadow:0 0 0 4px rgba(30,64,175,.2)}
.psg-select{height:45px;border:2px solid #e6e6e6;border-radius:12px;padding:0 12px;background:#fff;font-size:15px;transition:border-color .4s ease,box-shadow .4s ease}
.psg-select:focus{border-color:#1e40af;outline:none;box-shadow:0 0 0 4px rgba(30,64,175,.2)}

.psg-grid{
  padding:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;flex:1;
  overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;align-items:stretch;min-height:0;
}
@media (max-width:1100px){.psg-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.psg-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.psg-grid{grid-template-columns:1fr}}

.psg-card{
  border:2px solid #e6e6e6;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;box-shadow:0 1px 2px rgba(0,0,0,.04);height: 480px;
}
.psg-card:hover{transform:translateY(-3px);box-shadow:0 12px 22px rgba(0,0,0,.12)}
.psg-thumb{position:relative;background:linear-gradient(135deg,#f7fafc,#edf2f7);border-bottom:1px solid #f0f2f5}
.psg-thumb img{display:block;width:100%;height:auto;aspect-ratio:10/10;object-fit:contain;transition:transform .4s ease}
.psg-card:hover .psg-thumb img{transform:scale(1.05)}
.psg-tag{position:absolute;left:12px;top:12px;background:#ef4444;color:#fff;font-size:13px;border-radius:10px;padding:5px 10px;font-weight:600}
.psg-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;background:#fff}
.psg-title{font-weight:700;color:#2d3748;font-size:16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px;margin:0; display: flex;align-items: center;}
.psg-price{color:#ef4444;font-weight:900;font-size:20px}
.psg-strike{color:#a0aec0;text-decoration:line-through;margin-left:10px;font-weight:600}
.psg-actions-row{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:10px}
.psg-btn{flex:1;height:45px;border:0;border-radius:12px;cursor:pointer;font-weight:800;transition:all .2s ease;display:flex;align-items:center;justify-content:center}
.psg-btn.primary{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.psg-btn.primary:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px)}
.psg-btn.ghost{background:linear-gradient(135deg,#edf2f7,#e2e8f0);color:#1e40af;border:2px solid #e6e6e6; padding: 20px}
.psg-btn.ghost:hover{background:linear-gradient(135deg,#e2e8f0,#cbd5e0);transform:translateY(-1px)}

.psg-paging{padding:12px 25px 20px;display:flex;justify-content:center;gap:12px;background:linear-gradient(90deg,#f7fafc,#e2e8f0);position:sticky;bottom:0;z-index:2}
.psg-page{min-width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;font-weight:700;background:#fff;transition:all .2s ease}
.psg-page:hover{background:#dbeafe;transform:scale(1.06)}
.psg-page.active{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}

.psg-btn:focus-visible,.psg-input:focus-visible,.psg-select:focus-visible,.psg-card a:focus-visible{
  outline:3px solid rgba(214,0,0,.25);outline-offset:2px
}

.pc-suggest > .pc-suggest-title,
.pc-suggest > #pv-count{
  display:inline-block;
  vertical-align:baseline;
}

.pc-suggest{ overflow:hidden; }         
.pc-suggest > #pv-count{
  float:right;
  margin-left:12px;
  font-size:14px;
  color:#666;
  margin-top:.2em;                   
}

@media (max-width: 480px){
  .pc-suggest > #pv-count{
    display: none;
  }
}

@media (max-width:820px){
  .psg-actions-row{grid-template-columns:1fr 1fr; display: flex;}
  .psg-btn{height:42px}
}

.psg-chip-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.psg-chip-select:focus,
.psg-chip-select:focus-visible{
  outline:0 !important;
  box-shadow:none !important;
}

.psg-chip-select:-moz-focusring{
  color:inherit; 
  text-shadow:none;
}

.psg-chip{
  border:1px solid #e7e9ef;
  border-radius:10px;
}
.psg-chip:focus-within{
  border-color:#1e40af;
  box-shadow:0 0 0 3px rgba(30,64,175,.18);
}
@media (max-width: 701px){

  .psg-toolbar{
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px 12px;
  }

  .psg-actions{
    display: grid !important;
    grid-template-columns: 1fr;  
    width: 100%;
    gap: 0;
  }

  .psg-select{ display: none !important; }

  .psg-input,
  #psg-search{
    grid-column: 1 / -1;
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;                 
    box-sizing: border-box;
    height: 40px;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
  }
}

/* ===== MOBILE:===== */
/* ----- MOBILE (<=701px) – Toolbar gọn, chip đều kích thước, không lệch layout ----- */
@media (max-width: 701px){

    .psg-modal *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  .psg-modal input, .psg-modal button, .psg-modal select{ font: inherit; }

  :root{
    --psg-gap: 10px;
    --psg-chip-h: 36px;
    --psg-radius: 12px;
  }
.psg-grid{ flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }

  .psg-head{ position: sticky; top: 0; z-index: 2; background:#fff; }
  /* Header & dialog */
   .psg-dialog{
    position: fixed; inset: 0;         
    width: 100vw;   max-width: none;
    height: 100vh;  height: 100dvh;   
    max-height: none;
    margin: 0;
    border-radius: 0 !important;        
    box-shadow: none;                 
    background: #fff;
    display: flex; flex-direction: column;
    overflow: hidden;                
    padding-bottom: env(safe-area-inset-bottom); 
  }
  .psg-head{ padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }

  .psg-toolbar{
    position: sticky; top: 0; z-index: 5;
    background:#fff; border-bottom: 1px solid #f1f5f9;
    display: grid; grid-template-rows: auto auto; gap: var(--psg-gap);
    padding: 10px 12px;
  }

  .psg-chips{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--psg-gap);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px 0;
  }
  .psg-chips::-webkit-scrollbar{ display: none; }

  .psg-chip,
  .psg-chip-select{
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--psg-chip-h); padding: 0 12px; flex: 0 0 auto;
    border-radius: 999px; border: 1px solid #e2e8f0;
    font-weight: 600; font-size: clamp(12px, 3.3vw, 13.5px); color:#1f2937;
    line-height: 1;
  }
  .psg-chip-select{
    min-width: 112px;
    padding-right: 26px;           
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 12px auto;
  }
  .psg-actions{
    display: grid; grid-template-columns: 1fr auto; gap: var(--psg-gap); align-items: center;
  }
  .psg-input{
    width: 100%; height: 40px; border-radius: 8px;
    padding: 0 12px; font-size: 14px; border: 1px solid #e2e8f0;
  }
  .psg-select{ display: none; } 

  .psg-grid{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important; padding: 12px !important;
  }

  .psg-card{
    height: clamp(260px, 45vh, 340px);
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
  }

  .psg-title{ font-size: 14px; font-weight: 600; line-height: 1.4; }
  .psg-price{ font-size: 16px; font-weight: 700; line-height: 1.3; }

  .psg-btn.ghost{ display: none; }
  .psg-btn.primary{
    width: 130px; padding: 8px 16px; border-radius: 6px;
    font-size: 14px; font-weight: 500; text-align: center;
    transition: background-color .3s ease;
  }

  .pc-suggest{ padding: 12px; border-radius: 12px; background:#f7fafc; }
  .pc-suggest-title{ font-size: 16px; font-weight: 700; color:#1a202c; margin:0 0 10px; line-height:1.3; }
  .pc-suggest-tiles{
    display:flex !important; overflow-x:auto; gap:12px; padding:4px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .pc-suggest-tiles::-webkit-scrollbar{ display:none; }
  .psg-tile{ position:relative; flex:0 0 80%; max-width:80%; scroll-snap-align:start; border-radius:12px; overflow:hidden; background:#fff; }
  .psg-tile img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:brightness(.9); transition:filter .3s; }
  .psg-tile img:hover{ filter:brightness(1); }
  .psg-tile span{
    position:absolute; left:12px; bottom:12px; padding:6px 12px; border-radius:6px;
    font-size:13px; font-weight:500; background:rgba(0,0,0,.7); color:#fff;
  }
}

body.popup-open{ overflow:hidden; position:fixed; width:100%; }
.psg-modal, .psg-dialog, .psg-grid{ overscroll-behavior: contain; }


/*GIAO DIỆN BUILD*/ 
.build-share-btn{padding:10px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:600;background:#d6001c;color:#fff}
.toast-share{position:fixed;right:14px;bottom:14px;background:#111;color:#fff;padding:10px 12px;border-radius:8px;opacity:.92}
/* Khóa scroll */
  body.popup-open {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed;
  width: 100vw;
}
/* Rỗng */
.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  width: 100%;
}
.empty-result img {
  max-width: 140px;
  opacity: 0.85;
}
.empty-result div {
  color: #888;
  font-size: 17px;
  font-weight: 600;
  margin-top: 8px;
}
/* Tối ưu popup PC */
@media (min-width: 701px) {
 .popup-contentt {
  width: 100%;
  max-width: 1080px;
  min-width: 320px; /* để tránh nhỏ quá trên mobile */
  
  height: 100%;
  max-height: 90vh;
  min-height: 660px;

  border-radius: 15px;
  box-shadow: 0 4px 28px #0003, 0 1.5px 12px #d6000030;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  margin: 0 auto; /* căn giữa theo chiều ngang */
}

  .popup-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; 
    background: #f7f8fa;
    padding: 13px 19px 12px 19px;
    transition: none;
    padding-left:7px;
    padding-right:7px
  }
  .popup-filter-row{ flex-wrap: nowrap; }

  .filter-search-row{ flex: 1 1 42%; min-width: 280px; }
  .filter-pair-row  { flex: 0 0 34%; min-width: 300px; }

  /* Cụm Giá có kích thước cố định, không đẩy phần khác */
  .price-range-row  { flex: 0 0 320px; justify-content: flex-end; }

  #price-range{ width: 160px; }                 /* cố định chiều rộng slider */
  .price-value{ width: 120px; min-width: 120px; /* đủ chứa "100.000.000₫+" */
  text-align: right; display:inline-block; }
  /* Preview ảnh khi hover */
  #img-hover-preview{
    position: fixed; left: 0; top: 0;
    z-index: 100000; display: none; pointer-events: none;
    background: #fff; border: 1px solid #eee; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    padding: 8px; transform: translate(12px,12px);
  }
  #img-hover-preview img{
    display: block; max-width: 420px; max-height: 60vh;
    object-fit: contain; border-radius: 8px;
  }
}
/* Tối ưu popup mobile */
  @media (max-width: 700px) {
/* Chống bị che trên mobile */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* thanh phân trang: luôn nằm trên thanh tab của trình duyệt */
#popup-pagination{
  position: sticky;      /* bám đáy vùng cuộn */
  bottom: 0;
  z-index: 10;
  background: #fff;
  padding: 8px 0;
  padding-bottom: calc(8px + var(--safe-bottom));
  box-shadow: 0 -4px 10px rgba(0,0,0,.06);
}

/* nếu bạn không dùng sticky, thêm spacer ở cuối list */
#popup-list::after{
  content:"";
  display:block;
  height: calc(16px + var(--safe-bottom));
}

/* dùng viewport động để tránh 100vh “ảo” trên iOS */
html, body, #component-popup{
  min-height: 100dvh; /* Safari/Chrome iOS hỗ trợ dvh */
}
  .popup-contentt {
    min-width: 100vw !important;
    max-width: 100vw !important;
    width: 100vw !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    position: fixed; 
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9999;
  }
  .popup-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    background: #f7f8fa;
    padding: 11px 7px 9px 7px;
    transition: none;
  }
}
.buildpc-table-wrap {
  max-width: 1150px;
  margin: 24px auto 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 18px #0001;
  padding: 14px 15px 32px 15px;
}
.buildpc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.buildpc-table th,
.buildpc-table td{
  padding:10px 8px;
  font-size:16px;
  background:#fff;
  vertical-align:middle;
  text-align:left;
  border-bottom:1px solid #eee;
  font-weight: bold !important;
}

.buildpc-table th{
  background:#fafafa;
  font-weight:700;
  color:#222;
  border-bottom:2px solid #eee;
  font-size:16.5px;
}


.buildpc-table .img-col {
  width: 68px;
  text-align: center;
}
.buildpc-table img.prod-img {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: contain;
  border: 1px solid #e7e7e7;
  background: #fafafa;
  display: block;
  margin: 0 auto;
}
.prod-title {
  font-weight: 700;
  font-size: 16px;
  color: #111;
  margin-bottom: 2px;
  line-height: 1.35;
  word-break: break-word;
}
.prod-info {
  color: #888;
  font-size: 14px;
  margin-bottom: 2px;
  line-height: 1.3;
}
.prod-status {
  font-size: 13px;
  color: #27a300;
}
.prod-status.unavailable {
  color: #d60000;
}
.qty-input {
  width: 45px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 7px;
  padding: 4px 0;
  font-size: 16px;
}
.icon-btn {
  background: #f7f7f7;
  margin: 5px !important;
  border: none;
  color: #d60000;
  font-size: 22px;
  cursor: pointer;
  margin: 0 3px;
  border-radius: 8px;
  padding: 5px 6px;
  vertical-align: middle;
  transition: background 0.18s;
  box-shadow: 0 1px 4px #0001;
}
.icon-btn.edit {
  color: #0078d7;
  font-size: 20px;
}
.icon-btn:hover {
  background: #ffe2e2;
}
.choose-btn {
  background: var(--mamaubutton);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  margin: 0;
  min-width: 160px;
  height: 48px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 1px 4px #0001;
  transition: background 0.14s;
}
.choose-btn:hover {
  background: var(--mamauhoverbutton);
}
.choose-btn i {
  margin-right: 10px;
  font-size: 17px;
}
.td-center {
  text-align: center !important;
}
.td-right {
  text-align: right !important;
}
.price {
  color: #222;
  font-weight: 500;
}
.total-price {
  color: #d60000;
  font-size: 18px;
  font-weight: 700;
}
@media (max-width: 950px) {
  .choose-btn {
    min-width: 100px;
    font-size: 14px;
  }
  .buildpc-table th,
  .buildpc-table td {
    font-size: 14px;
  }
  .prod-title {
    font-size: 15px;
  }
  .buildpc-table img.prod-img {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 700px) {
  #buildpc-table {
    display: none !important;
  }
  #buildpc-cards-mobile {
    display: block;
  }
}
@media (min-width: 701px) {
  #buildpc-cards-mobile {
    display: none !important;
  }
}
.buildpc-card-item {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 13px #0001;
  padding: 13px 13px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  width: calc(100% + 20px) !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.buildpc-card-header {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.buildpc-card-header img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fafafa;
}
.buildpc-card-title {
  font-weight: 700;
  font-size: 16px;
  color: #222;
  margin-bottom: 2px;
}
.buildpc-card-meta {
  color: #888;
  font-size: 14px;
  margin-bottom: 2px;
  line-height: 1.35;
}
.buildpc-card-status {
  font-size: 13.5px;
  color: #27a300;
  font-weight: 600;
}
.buildpc-card-status.unavailable {
  color: #d60000;
}
.buildpc-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  gap: 9px;
}
.buildpc-card-price {
  color: #d60000;
  font-size: 15.5px;
  font-weight: 700;
}
.buildpc-card-actions {
  display: flex;
  gap: 7px;
}
.buildpc-card-actions button {
  background: #f7f7f7;
  border: none;
  color: #d60000;
  font-size: 19px;
  cursor: pointer;
  border-radius: 9px;
  padding: 7px 10px;
  box-shadow: 0 1px 4px #0001;
  transition: background 0.18s;
}
.buildpc-card-actions button.edit {
  color: #2092e6;
}
.buildpc-card-actions button:hover {
  background: #ffe2e2;
}
.buildpc-card-qty {
  width: 38px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 0;
  font-size: 15px;
}
.brand-filter {
  flex: 0.5 !important;
}
.component-popup {
  position: fixed;
  z-index: 9999999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 0.22);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-headerr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 21px 10px 15px;
  border-bottom: 1px solid #f2f2f3;
  background: #fff;
  z-index: 10;
  position: sticky;
  top: 0;
}
.popup-close {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: none;
  font-size: 28px;
  color: var(--mamaubuttonclose);
  font-weight: 700;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 8px #0001;
  cursor: pointer;
  transition: background 0.13s;
}
.popup-close:hover {
  background: var(--maumauhoverbuttonclose);
}
.popup-filter-row {
  display: flex;
  flex-direction: row;
  gap: 11px;
  align-items: center;
  padding: 13px 21px 9px 21px;
  background: #fff;
  z-index: 5;
  position: sticky;
  top: 56px;
  border-bottom: 1px solid #f4f4f4;
  flex-wrap: wrap;
}
.filter-search-row {
  flex: 2.4;
  display: flex;
}
.filter-search-row input {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 7px;
  font-size: 15px;
  padding: 7px 9px;
  background: #fff;
  outline: none;
  min-width: 100px;
}
.filter-pair-row {
  flex: 1.8;
  display: flex;
  gap: 9px;
}
.filter-pair-row select {
  flex: 1 1 0%;
  min-width: 0;
  border: 1px solid #e6e6e6;
  border-radius: 7px;
  font-size: 15px;
  padding: 7px 9px;
  background: #fff;
  outline: none;
  min-width: 95px;
}
.price-range-row {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 180px;
  justify-content: flex-end;
}
.price-range-row .filter-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mamaubutton);
  margin-right: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
#price-range {
  width: 180px;
  accent-color: var(--mamaubutton);
  height: 4px;
  margin: 0 7px;
}
.price-value {
  min-width: 56px;
  font-weight: 600;
  color: var(--mamaubutton);
  font-size: 14px;
  display: inline-block;
  text-align: right;
}
@media (max-width: 700px) {
  .popup-contentt {
    min-width: 99vw;
    max-width: 99vw;
    border-radius: 0;
    width: 100vw;
    max-height: 100vh;
  }
  .popup-headerr,
  .popup-filter-row,
  .popup-pagination {
    padding: 0px 7px;
  }
  .popup-filter-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    padding: 11px 7px 9px 7px;
  }
  .filter-search-row,
  .filter-pair-row,
  .price-range-row {
    flex: unset;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .filter-pair-row {
    gap: 7px;
  }
  .filter-pair-row select {
    min-width: 0;
    width: 100%;
  }
  .price-range-row {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
    padding: 5px;
  }
  #price-range {
    width: 180px;
    padding: 5px;
  }
  .price-value {
    font-size: 15px;
    min-width: 40px;
  }
}
.popup-product-card {
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1.5px 10px #0001;
  padding: 10px 14px 10px 12px;
  margin-bottom: 11px;
  min-height: 60px;
  transition: box-shadow 0.13s;
  border: 1px solid #f3f3f3;
}
.popup-product-card img {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  border: 1px solid #ececec;
  object-fit: contain;
  flex-shrink: 0;
  background: #f8fafb;
}
.button_xuli .choose-btn {
  flex: 1 1 0%;
  min-width: 200px;
  max-width: 370px;
  height: 45px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0;
  position: relative;
  overflow: hidden;
}
#buildpc-export-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: rgb(35 38 55 / 0.22);
  position: fixed;
  inset: 0;
  transition: background 0.15s;
}
#buildpc-export-modal > div {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 28px #0003, 0 2px 10px #d6000017;
  width: 100%;
  max-width: 480px;
  min-width: 300px;
  margin: 0 16px;
  padding: 0 0 18px 0;
  position: relative;
  animation: modalFadeIn 0.24s cubic-bezier(0.22, 0.68, 0.38, 1);
  overflow: visible;
}
@keyframes modalFadeIn {
  from {
    transform: translateY(38px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
#buildpc-export-modal > div > button {
  position: absolute;
  top: 15px;
  right: 19px;
  font-size: 25px;
  color: #d60000;
  border: none;
  background: #fff;
  font-weight: 900;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 2px 8px #0001;
  cursor: pointer;
  transition: background 0.13s;
  z-index: 2;
}
#buildpc-export-modal > div > button:hover {
  background: #ffeaea;
}
#buildpc-export-image {
  background: linear-gradient(135deg, #fff 90%, #f4f6fc 100%);
  border-radius: 17px;
  padding: 30px 22px 18px 22px;
  margin: 26px auto 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 99vw;
  overflow: hidden;
  position: relative;
  transition: all 0.22s;
}
#buildpc-export-list > div {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px;
  border-radius: 14px;
  background: #f9fafb;
  padding: 9px 7px 9px 7px;
  background: rgba(255, 255, 255, 0) !important;
}
#buildpc-export-list img {
  width: 49px;
  height: 49px;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 1px 7px #00000007;
}
#buildpc-export-list .prod-title {
  font-weight: 700;
  color: #222;
  font-size: 15px;
  margin-bottom: 2px;
  line-height: 1.18;
}
#buildpc-export-list .prod-meta {
  color: #888;
  font-size: 13px;
  line-height: 1.22;
}
#buildpc-export-list .prod-qty {
  color: #555;
  font-size: 13px;
  margin-left: 8px;
}
#buildpc-export-list .prod-price {
  min-width: 90px;
  text-align: right;
  color: #d60000;
  font-weight: 700;
  font-size: 15px;
}
#buildpc-export-image > div[style*="justify-content:flex-end"] {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
#buildpc-export-image > div[style*="justify-content:flex-end"] > div {
  background: #fff;
  border-radius: 13px;
  padding: 10px 21px 10px 16px;
  font-size: 17.5px;
  font-weight: 800;
  color: #d60000;
  letter-spacing: 0.3px;
  text-shadow: 0 1.5px 8px #fff7;
  display: flex;
  align-items: center;
}
#buildpc-export-total {
  font-size: 20px;
  margin-left: 7px;
  color: #d60000;
  font-weight: 900;
  letter-spacing: 0.3px;
}
#buildpc-export-image > div[style*="font-size:15.8px"] {
  margin-top: 18px !important;
  font-size: 14.5px !important;
  color: #666 !important;
  background: none;
  padding: 0;
  border-radius: 0;
}
#buildpc-export-image > div[style*="font-size:15.8px"] span {
  color: #1a1a1a !important;
  font-weight: 700;
  font-size: 15px;
}
#buildpc-export-image > div[style*="font-size:15.8px"] b {
  font-weight: 800;
  color: #d60000;
}
#buildpc-export-image > div[style*="font-size:15.8px"] b:last-child {
  color: #333;
  font-weight: 700;
}
#buildpc-export-image > div[style*="text-align:center"] {
  color: #aaa;
  font-size: 13.5px;
  margin-top: 3px !important;
  margin-bottom: 0 !important;
}
#buildpc-export-image img[style*="logo"] {
  position: absolute !important;
  right: 13px !important;
  bottom: 11px !important;
  width: 59px !important;
  opacity: 0.08 !important;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  #buildpc-export-modal > div {
    min-width: 0 !important;
    width: 99vw !important;
    max-width: 99vw !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #buildpc-export-modal > div > button {
    top: 7px !important;
    right: 7px !important;
    font-size: 24px;
    width: 33px;
    height: 33px;
  }
  #buildpc-export-image {
    padding: 11px 3.5vw 9px 3.5vw !important;
    margin: 12px auto 0 auto !important;
    border-radius: 9px !important;
    min-width: 0 !important;
    max-width: 99vw !important;
  }
  #buildpc-export-list > div {
    padding: 7px 3px;
    gap: 8px;
    margin-bottom: 8px;
  }
  #buildpc-export-list img {
    width: 38px;
    height: 38px;
  }
  #buildpc-export-image > div[style*="justify-content:flex-end"] > div {
    padding: 7px 12px 7px 8px;
    font-size: 15px;
    border-radius: 9px;
  }
  #buildpc-export-image img[style*="logo"] {
    width: 40px !important;
    right: 7px !important;
    bottom: 7px !important;
    opacity: 0.08 !important;
  }
}
#buildpc-export-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgb(0 0 0 / 0.22);
  justify-content: center;
  align-items: center;
}
#buildpc-export-modal .modal-content {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 24px #0004;
  width: 98vw;
  max-width: 720px;
  min-width: 320px;
  padding: 0 0 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
#buildpc-export-modal .close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 27px;
  border: none;
  background: #fff0;
  color: var(--mamaubuttonclose);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.13s;
}
#buildpc-export-modal .close-btn:hover {
  background: #ffeaea;
}
#buildpc-export-image {
  margin: 38px auto 0 auto;
  width: 97%;
  max-width: 690px;
  padding: 0 0 0 0;
  background: none;
  border-radius: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}
#buildpc-export-list {
  max-height: 340px;
  overflow-y: auto;
  background: none;
  border-radius: 0;
  margin: 0 auto 0 auto;
  padding: 0 0 0 0;
  width: 100%;
}
#buildpc-export-list .export-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px 11px 18px;
  font-size: 15px;
  border-bottom: 1px solid #f3f3f3;
  background: none;
}
#buildpc-export-list .export-row:last-child {
  border-bottom: none;
}
#buildpc-export-list img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: none;
  flex-shrink: 0;
}
#buildpc-export-list .prod-main {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#buildpc-export-list .prod-title {
  font-weight: 700;
  color: #232;
  font-size: 15.3px;
  line-height: 1.18;
  margin-bottom: 1.5px;
  word-break: break-word;
}
#buildpc-export-list .prod-meta {
  color: #888;
  font-size: 13.2px;
  line-height: 1.22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#buildpc-export-list .prod-qty {
  color: #555;
  font-size: 13px;
  margin-left: 10px;
  min-width: 45px;
  font-weight: 600;
}
#buildpc-export-list .prod-price {
  min-width: 92px;
  text-align: right;
  color: #d60000;
  font-weight: 700;
  font-size: 15.2px;
}
#buildpc-export-image .total-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0 0 0;
}
#buildpc-export-image .total-card {
  border-radius: 15px;
  font-size: 18px;
  font-weight: 800;
  color: #d60000;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 0.4px;
}
#buildpc-export-image .total-label {
  font-size: 18px;
  font-weight: 800;
  color: #d60000;
}
#buildpc-export-image .total-value {
  font-size: 18px;
  font-weight: 800;
  color: #d60000;
  margin-left: 7px;
}
#buildpc-export-image .export-note {
  margin: 18px auto 0 auto;
  font-size: 12px;
  color: #555;
  line-height: 1.65;
  text-align: center;
  max-width: 95%;
}
#buildpc-export-image .export-note b {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 15px;
}
#buildpc-export-image .export-note .hotline {
  color: #d60000;
  font-weight: 700;
  font-size: 12px;
}
#buildpc-export-image .export-note .address {
  color: #333;
  font-weight: 700;
}
#buildpc-export-image .export-thanks {
  margin: 7px auto 0 auto;
  text-align: center;
  font-size: 13.2px;
  color: #aaa;
  font-style: italic;
}
#buildpc-export-modal .export-btn-wrap {
  margin: 0 auto 25px auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#buildpc-export-modal .choose-btn {
  background: var(--mamaubutton);
  color: #fff;
  border: none;
  border-radius: 12px;
  margin: 5px 0px !important;
  padding: 14px 32px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  min-width: 210px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  box-shadow: 0 1.5px 9px #d6000030;
  margin: 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
#buildpc-export-modal .choose-btn i {
  font-size: 19px;
  margin-right: 9px;
}
@media (max-width: 600px) {
  #buildpc-export-modal .modal-content {
    max-width: 99vw;
    min-width: 0;
  }
  #buildpc-export-image {
    max-width: 99vw;
    width: 99vw;
  }
  #buildpc-export-list {
    max-height: 260px;
    padding: 0;
  }
  #buildpc-export-list .export-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    font-size: 15px;
    border-bottom: 1px solid #f3f3f3;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  #buildpc-export-image .total-card {
    font-size: 18px;
  }
  #buildpc-export-modal .choose-btn {
    font-size: 15px;
    padding: 12px;
    min-width: 140px;
  }
  #buildpc-export-image .export-note {
    font-size: 13px;
    padding: 0 3px;
  }
}
.fa-spin {
  animation: fa-spin 1s infinite linear !important;
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.product-card:hover {
  z-index: 2;
  background: #fff;
  box-shadow: 0 3px 12px rgba(214, 0, 0, 0.05), 
              0 1px 4px rgba(0, 0, 0, 0.08); /* bóng nhẹ hơn */
  transform: translateY(-2px) scale(1.005); /* ít nhô và phóng to nhẹ */
  transition: box-shadow 0.25s cubic-bezier(.25,.8,.25,1), 
              transform 0.25s cubic-bezier(.25,.8,.25,1), 
              background 0.15s ease;
  border-color: var(--mamauhoverdanhsachsp) !important;
}
.product-card {
  will-change: transform, box-shadow;
}
/* ADD CART */
   #buildpc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.buildpc-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  min-width: 100px;
  border-radius: 3px;
  border: none !important;
  background: #f3f3f3;
  color: #222;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1.5px 8px #0001;
  transition: background 0.16s, color 0.14s, box-shadow 0.19s, transform 0.13s;
  outline: none;
  user-select: none;
}
.buildpc-tab-btn.active {
  background: var(--mamaubutton);
  color: #fff;
  box-shadow: 0 3px 16px #d6000020;
  transform: translateY(-1.5px) scale(1.04);
}
.buildpc-tab-btn.add {
  background: var(--mamaunutthem);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 1.5px 10px #27a30020;
}
.buildpc-tab-btn:hover:not(.active):not(.add) {
  background: #e7e7e7;
  color: var(--mamaubutton);
  transform: scale(1.04);
}
.buildpc-tab-btn.add:hover {
  background: var(--mamauhovernutthem);
  color: #fff;
  box-shadow: 0 2.5px 12px #23a30018;
}
.tab-close {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  margin-left: 9px;
  color: #fff;
  background: var(--mamaubutton);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, box-shadow 0.15s;
  box-shadow: 0 1px 6px #0002;
}
.buildpc-tab-btn:not(.active) .tab-close {
  background: #ffeaea;
  color: #d60000;
}
.tab-close:hover {
  background: #b80000;
  color: #fff;
}
@media (max-width: 700px) {
  #buildpc-tabs {
    gap: 6px;
    margin-bottom: 13px;
  }
  .buildpc-tab-btn {
    padding: 7px 12px;
    font-size: 15px;
    min-width: 80px;
    border-radius: 5px;
    box-shadow: 0 1px 5px #0001;
  }
  .tab-close {
    font-size: 17px;
    width: 21px;
    height: 21px;
    line-height: 20px;
    margin-left: 6px;
  }
}    
/* ẢNH LINH KIỆN */
.stt-cell img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid #eee;
  background: #fff;
  box-shadow: 0 2px 12px #0001;
  margin-right: 8px;
}
.stt-cell {
  min-width: 95px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 18px;
}
@media (max-width: 950px) {
  .stt-cell {
    font-size: 14px;
    min-width: 40px;
    gap: 5px;
    padding: 7px 0 !important;
  }
  .stt-cell img {
    width: 22px;
    height: 22px;
  }
}
/* POPUP ƯU ĐÃI */
.uudai-link{color:#1976d2;text-decoration:underline;font-weight:600}
/* Overlay + card */
.uudai-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);z-index:99999;
}
.uudai-card{
  width:min(980px,94vw);max-height:90vh;background:#fff;border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.22),0 6px 18px rgba(214,0,0,.15);
  overflow:hidden;transform:translateY(12px) scale(.98);opacity:0;
  animation:uudaiIn .22s cubic-bezier(.22,.68,.38,1) forwards;
  position:relative;display:flex;flex-direction:column;
}
@keyframes uudaiIn{to{transform:none;opacity:1}}

/* Header */
.uudai-header{padding:18px 22px 10px 22px;border-bottom:1px solid #f1f1f1;background:#fff}
.uudai-title-wrap{display:flex;align-items:center;gap:10px}
.uudai-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,#d60000,#ff4646);box-shadow:0 0 0 3px #ffe3e3 inset}
.uudai-header h3{margin:0;font-size:22px;font-weight:900;color:#222;letter-spacing:.2px}
.uudai-sub{margin-top:3px;color:#777;font-size:13.5px;font-weight:700}

/* Close */
.uudai-close{
  position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;
  border:none;background:#fff;color:var(--mamaubuttonclose);font-size:24px;font-weight:900;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.uudai-close:hover{background:var(--maumauhoverbuttonclose)}

/* Body */
.uudai-body{padding:14px 18px 6px 18px;overflow:auto}
.uudai-block{margin-bottom:14px}
.uudai-block-title{font-weight:900;color:#222;margin-bottom:10px}

/* Table */
.uudai-table-wrap{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff}
.uudai-table{width:100%;border-collapse:separate;border-spacing:0}
.uudai-table thead th{
  background:#fafafa;color:#222;font-weight:800;text-align:left;padding:12px 14px;border-bottom:1px solid #eee
}
.uudai-table td{padding:12px 14px;border-bottom:1px solid #f3f3f3}
.uudai-table tr:last-child td{border-bottom:none}
.uudai-table .right{text-align:right}
.uudai-table tbody tr:hover{background:var(--mamauhoverpopupuudai)}

/* List */
.uudai-list{margin:0;padding-left:18px;color:#444}
.uudai-list li{margin:6px 0}

/* Footer */
.uudai-footer{padding:12px 18px 18px 18px;border-top:1px solid #f3f3f3;display:flex;justify-content:flex-end}
.uudai-btn{
  background:var(--mamaubutton);color:#fff;border:none;border-radius:12px;padding:10px 18px;
  font-weight:800;cursor:pointer;box-shadow:0 2px 10px rgba(214,0,0,.22)
}
.uudai-btn:hover{background:var(--mamauhoverbutton)}

@media (max-width:700px){
  .uudai-card{width:100vw;max-height:100vh;border-radius:0}
  .uudai-header h3{font-size:18px}
}
  /* BỘ LỌC TAG */
/* ===== Facet bar: PC 4 cột, Mobile 2 cột ===== */
.facet-bar{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:10px 12px;
  align-items:center;
  width:100%;
}

/* Facet item */
.facet{
  position:relative;
  min-width:0;
  width:100%;
}

/* Toggle button */
.facet .facet-toggle{
  box-sizing:border-box;
  width:100%;
  display:flex; align-items:center; gap:8px; justify-content:space-between; /* <-- fix */
  padding:6px 14px !important;
  border:1px solid #ececec; border-radius:9px;
  background:#fff; color:#222; font-weight:450; font-size:15px;
  box-shadow:0 1px 2px #00000008;
  cursor:pointer; transition:all .18s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.facet .facet-toggle:hover{ border-color:#e1e1e1; box-shadow:0 2px 8px #0000000a; }
.facet.open .facet-toggle{ border-color:#d60000; box-shadow:0 0 0 3px #d6000014; }

/* Badge */
.facet .badge, [id^="badge-"]{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  background:var(--mamaubutton); color:#fff; font-size:12px; font-weight:800;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px #d6000033;
}
/* ===== Dropdown: rộng theo facet, không tràn viewport ===== */
.facet .facet-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:auto;
  /* clamp: >= chiều rộng facet, nhưng không <560px và không vượt viewport */
  width:clamp(100%, 560px, calc(100vw - 32px));
  background:#fff; border:1px solid #ececec; border-radius:14px;
  box-shadow:0 12px 30px #00000017;
  padding:14px; z-index:100;           /* cao hơn khu vực list */
  transform-origin:top left; transform:scale(.98); opacity:0; visibility:hidden;
  transition:transform .16s ease, opacity .16s ease, visibility .16s;
}
.facet.open .facet-menu{ transform:scale(1); opacity:1; visibility:visible; padding: 10px 35px}
.facet-bar > .facet:nth-child(4n - 1) .facet-menu,
.facet-bar > .facet:nth-child(4n) .facet-menu {
  left: auto;
  right: 0;
  transform-origin: top right;
}
/* Lưới chips */
.facet .chips{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));  /* PC 3 cột */
  gap:10px; max-height:360px; overflow:auto; padding:2px 2px 8px;
}
.chip{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; line-height:1; border-radius:999px;
  background:#f6f7f9; color:#222; font-weight:700; font-size:14px;
  border:1px solid #e8e8e8; cursor:pointer; user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 2px 6px #0000000b; }
.chip.active{ background:var(--mamauboloctag); color:var(--mamaubutton); border-color:var(--mamauboderboloctag); box-shadow:0 2px 10px #d6000012; }

/* Footer */
.facet .facet-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; border-top:1px solid #f1f1f1; padding-top:12px; margin-top:10px;
}
.facet .facet-footer .clear-btn{ background:none; border:none; color:#666; font-weight:700; cursor:pointer; }
.facet .facet-footer .apply-btn{
  background:#d60000; color:#fff; border:none; font-weight:800;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow:0 6px 18px #d6000026; transition:filter .12s ease, transform .08s ease;
}
.facet .facet-footer .apply-btn:hover{ filter:brightness(1.03); }
.facet .facet-footer .apply-btn:active{ transform:translateY(1px); }

/* ===== Responsive ===== */
/* --- MOBILE: dropdown luôn nằm dưới hàng nút filter --- */
@media (max-width:768px){
  .facet-bar{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  .facet{ z-index:2; overflow:visible; }
  .facet.open{ z-index:999; }

  .facet .facet-menu{
    position:fixed !important;
    left:50% !important;
    /* đặt theo biến toàn cục --facetbar-bottom (tính bằng JS) */
    top:calc(var(--facetbar-bottom, 64px) + 8px) !important;
    width:calc(100vw - 20px) !important;
    max-width:none !important; min-width:0 !important;
    transform:translateX(-50%) !important;
    transform-origin:top center !important;
    max-height:min(70vh, 440px); overflow:auto;
  }

  .facet .chips{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .facet .facet-toggle{ padding:10px 12px !important; justify-content:space-between !important; }
}
.facet .facet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between; /* chữ bên trái, icon ép phải */
}

.facet .facet-toggle::after {
  content: "";
  display: inline-block;
  width: 12px;   /* chỉnh kích thước icon */
  height: 12px;
  margin-left: 6px;
  background-image: url('https://cdn-icons-png.flaticon.com/512/2985/2985150.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Bộ lọc hiển thị */
.filter-pair-row select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:1px solid #ececec;
  border-radius:9px;          
  background:#fff;
  padding: 9px 14px;
  /* caret ▼ bằng SVG để đồng nhất các trình duyệt */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 12px;

  font:600 15px/1.2 "Inter",system-ui,Arial,sans-serif;
  color:#222;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.filter-pair-row select:hover{
  border-color:#e6e6e6;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.filter-pair-row select:focus{
  border-color:#d60000;
  box-shadow:0 0 0 3px rgba(214,0,0,.08);
  outline:none;
}
/* Sticky (tuỳ chọn) */
.filter-sticky{ position:sticky; top:0; z-index:90; background:linear-gradient(#fff, #fff0); padding-bottom:8px; margin-bottom:6px; }
/*Tối ưu trên mb*/
/* PC */
@media (min-width:701px){
  .mobile-filter-bar,
  .mf-backdrop,
  .mf-drawer-head,
  .mobile-search-row { display:none !important; }

  .popup-filter-row { position:sticky; top:56px; }
}

/* Mobile */
@media (max-width:700px){
  /* Navbar */
  .mobile-filter-bar{
    display:flex !important; align-items:center; gap:10px;
    padding:10px 12px; background:#fff; border-bottom:1px solid #eee;
    position:sticky; top:56px; z-index:9;
  }
  .mobile-filter-toggle{
    display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
    border:1px solid #eaeaea; border-radius:10px; background:#fff;
    font-weight:800; cursor:pointer;
  }
  .mobile-filter-summary{
    flex:1; text-align:right; color:#666; font-size:13.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Search ngoài */
  .mobile-search-row{
    display:block; position:sticky; z-index:9;
    background:#fff; border-bottom:1px solid #eee; padding:10px 12px 12px;
  }
  .mobile-search-row input{
    width:100%; height:40px; border:1px solid #e6e6e6; border-radius:8px;
    padding:0 12px 0 36px; font-size:15px; background:#fff; outline:none;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  .mobile-search-row input:focus{
    border-color:#d60000; box-shadow:0 0 0 3px rgba(214,0,0,.08);
  }
  .mobile-search-row i{
    position:absolute; left:24px; transform:translateY(13px);
    color:#999; font-size:14px; pointer-events:none;
  }
  /* Ẩn search trong drawer */
  .popup-filter-row .filter-search-row{ display:none !important; }

  /* Drawer */
  .popup-filter-row{
    position:fixed !important; top:0; left:0; width:min(92vw,360px); height:100vh;
    background:#fff; border-right:1px solid #eee; border-radius:0 16px 16px 0;
    transform:translateX(-102%); transition:transform .32s cubic-bezier(.22,.68,.38,1);
    padding:14px; z-index:10001; overflow-y:auto;
    flex-direction:column; gap:18px; align-items:stretch; box-shadow:none;
  }
  .component-popup.mf-open .popup-filter-row{
    transform:translateX(0); box-shadow:0 24px 60px rgba(0,0,0,.25);
  }
  /* Backdrop */
  .mf-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:10000; }
  .component-popup.mf-open .mf-backdrop{ display:block; }
  /* Drawer header */
  .mf-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 6px; }
  .mf-drawer-head span{ font-weight:800; }
  .mf-close{
    border:none; background:#fff; width:32px; height:32px; border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.08); font-size:20px; color:#d60000; cursor:pointer;
  }
  .filter-pair-row, .price-range-row, .facet-bar{ width:100%; }
  .filter-pair-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .filter-pair-row select{ min-width:0; }
  .price-range-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 4px;}
  .component-popup.mf-open .popup-list-scroll{ pointer-events:none; }
}