/*
.product-item del.compare-price,
.price del.compare-price,
span del.compare-price,
del.compare-price {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

del[data-price],
span.price-compare del,
.product-item del,
.price del {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
*/

/*Ẩn khoảng bị trống sản phẩm liên quan*/ 
#owl-collection-related .slick-track > meta[name="robots"] { 
  display: none !important; 
}

/* Kéo dài danh mục */
.navigation {
  height: 515px !important;
  max-height: none !important;
  border-bottom-left-radius: 15px !important; 
}
.navigation .mn-item .submenu {
  height: 515px !important;
  top: 0 !important;
  bottom: auto !important;
  border-bottom-right-radius: 15px !important; 
}
/* Fix hover ở danh mục bị ẩn */
.slick-arrow {
  z-index: 8 !important;
}
/*CSS SỐ LƯỢNG SẢN PHẨM FILE TOP-COLLECTION*/
.collection-count {
  font-size: 16px;
  font-weight: 400;
  color: #666;
  margin-left: 6px;
}
/*CODE NÚT V2*/

/*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 */
}
.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:10000}
.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-content {
  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-content {
    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;
  border-bottom: none;
  text-align: left;
}
.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-wrap {
//   padding: 14px 15px 1px 15px;
// }
  #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: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 0.22);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-header {
  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-content {
    min-width: 99vw;
    max-width: 99vw;
    border-radius: 0;
    width: 100vw;
    max-height: 100vh;
  }
  .popup-header,
  .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:9999;
}
.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; }
}