.form-check-input {
           border-color: #000 !important;
       }

       .form-check-input:checked {
           background-color: #DA6800 !important;
           border-color: #DA6800 !important;
       }

       .form-check-input:focus {
           box-shadow: 0 0 0 .25rem #da68001c;
       }

       /* ===== sidebar card ===== */
       .filter-card {
           background: #fff;
           border: 1px solid #e5e7eb;
           border-radius: 14px;
           box-shadow: 0 10px 24px rgba(2, 6, 23, .06)
       }

       .filter-card .head {
           padding: 14px 16px;
           border-bottom: 1px solid #eef0f3;
           font-weight: 700
       }

       .filter-card .sec {
           padding: 12px 16px;
           border-top: 1px solid #f1f5f9
       }

       .filter-list {
           list-style: none;
           padding: 0;
           margin: 0
       }

       .filter-list li {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 8px 0;
           border-bottom: 1px dashed #eef2f7
       }

       .filter-list li:last-child {
           border-bottom: 0
       }

       .badge-count {
           background: #f1f5f9;
           border: 1px solid #e2e8f0;
           border-radius: 999px;
           padding: 2px 8px;
           font-size: .8rem;
           color: #475569
       }

       /* ===== brand chip image ===== */
       .brand-chip {
           display: flex;
           align-items: center;
           gap: 8px;
           padding: 6px 10px;
           border: 1px solid #e2e8f0;
           border-radius: 999px;
           background: #f8fafc
       }

       .brand-thumb {
           width: 18px;
           height: 18px;
           object-fit: contain;
           border-radius: 4px
       }

       /* ===== product card ===== */
       .p-card {
           border: 1px solid #e5e7eb;
           border-radius: 16px;
           padding: 10px;
           transition: transform .12s ease, box-shadow .2s ease;
           background: #fff
       }

       .p-card:hover {
           transform: translateY(-2px);
           box-shadow: 0 14px 32px rgba(2, 6, 23, .10)
       }

       .p-thumb {
           width: 100%;
           height: 230px;
           object-fit: contain;
           border-radius: 12px
       }

       .p-title {
           color: #0f172a;
           /* font-weight: 700; */
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis
       }

       .p-desc {
           font-size: 12px;
           color: #6b7280;
           /* white-space: nowrap; */
           overflow: hidden;
           text-overflow: ellipsis
       }

       .price {
           font-weight: 800
       }

       .btn-sortBy {
           border: 1px solid #e5e7eb;
           border-radius: 14px;
           box-shadow: 0 3px 10px rgba(2, 6, 23, .04);
       }

       .old {
           color: #9ca3af;
           text-decoration: line-through
       }

       .badge-sale {
           color: #DA6800 !important;
           background-color: rgb(252 232 213) !important;
           position: absolute;
           top: 8px;
           left: 8px;
           font-size: 16px;
       }

       .badge-os {
           position: absolute;
           top: 8px;
           right: 8px
       }

       .range-wrap {
           display: flex;
           align-items: center;
           gap: 10px
       }

       .range-wrap input[type=number] {
           width: 100%;
           max-width: 110px
       }

       .range {
           width: 100%
       }

       /* Dual range look */
       .price-range {
           position: relative;
           height: 28px;
           margin: 6px 2px 2px;
           background: #fff;
           /* ✅ พื้นหลังของสไลเดอร์ทั้งหมดเป็นขาว */
           border-radius: 10px;
           /* border: 1px solid #e5e7eb; */
           /* เส้นขอบบางๆ */
           padding: 4px 6px;
           /* เพิ่มช่องว่างภายในให้สวยขึ้น */
       }

       .price-range .slider {
           position: absolute;
           left: 6px;
           right: 6px;
           top: 50%;
           transform: translateY(-50%);
           height: 3px;
           background: #fff;
           /* ✅ พื้นด้านในขาว */
           border-radius: 999px;
       }

       .price-range .slider .progress {
           position: absolute;
           height: 100%;
           left: 0;
           right: 0;
           background: #d97706;
           /* สีส้มของ progress */
           border-radius: 999px;
       }

       /* Keep both thumbs on top of the track */
       .price-range .range-thumb {
           position: absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
           margin: auto;
           width: 100%;
           background: none;
           pointer-events: none;
           /* track only */
           -webkit-appearance: none;
           appearance: none;
           height: 28px
       }

       .price-range .range-thumb::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
           height: 18px;
           width: 18px;
           border-radius: 50%;
           background: #fff;
           border: 3px solid #fff;
           box-shadow: 0 0 0 1px #d97706;
           pointer-events: auto;
           cursor: pointer
       }

       .price-range .range-thumb::-moz-range-thumb {
           height: 18px;
           width: 18px;
           border-radius: 50%;
           background: #fff;
           border: 3px solid #fff;
           box-shadow: 0 0 0 1px #d97706;
           pointer-events: auto;
           cursor: pointer
       }

       @media (max-width: 991.98px) {
           .filter-card {
               border: 1px solid #eee;
               border-radius: 12px;
               padding: 10px;
               background: #fff;
           }

           #filterCollapse {
               margin-top: 10px;
           }
       }

         @media (max-width: 991.98px) {
    #mobileSearch::placeholder { color:#9ca3af; }
  }