/* ============================================================
   category.css — gộp mobile + desktop. Mốc chia: 768px.

   MỤC LỤC
   1. Mục lục (khối chú thích này)
   2. Mobile  — nguyên văn templates/front/mobi/css4/category.css, bọc @media (max-width: 767px)
   3. Desktop — nguyên văn (desktop rỗng), bọc @media (min-width: 768px)
   4. Ghi đè — markup desktop của trang danh sách ở khổ dưới 768px
   5. Co giãn 768–1259px cho markup desktop
   6. Lưới thẻ sản phẩm dưới 1260px (flex, khung ảnh và các hàng trong thẻ đồng đều)

   Mục 2 và 3 là bản sao nguyên văn, không đổi thứ tự thuộc tính.
   ============================================================ */

/* ===== 2. MOBILE ===== */
@media (max-width: 767px) {
aside.filter{
    float: left;
    width: 200px;
}

aside.product_l{
	clear:both;
}

aside.product_l .product_item{
float: left;
overflow: hidden;
padding-bottom: 12px;
text-align: center;
width: 48.3%;
padding-top: 10px;
position: relative;
margin: 2px;
border-radius: 7px;
height: 365px;
}
.cps-block-content {
	       background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 2px 6px 2px rgba(60,64,67,.15);
    display: block;
    max-height: 300px;
    min-height: 0;
    overflow: hidden;
    padding: 15px;
    position: relative;
    text-align: justify;
    margin: 0px auto 0px auto;
    width: 85%;

}
/* #seeMoreClickCate: kiểu nút cũ (lề 4px, viền trên xám !important) đã bỏ —
   nút "Xem thêm sản phẩm" dùng chung kiểu ở main.css mục 20. */
aside.product_l .product_item:nth-child(2n+1){
	
}
aside.product_l .product_item h2{
	font-weight: normal;
height: 45px;
overflow: hidden;
padding-left: 5px;
padding-right: 5px;
text-align: center;
    position: relative;
}
aside.product_l .product_item h2 a:after {
        content: "";
    width: 131px;
    height: 1px;
    position: absolute;
    background: #9C9C9C;
    bottom: 0;
    left: 15%;

}
aside.product_l .product_item .images{
	padding-right:4px;
	padding-left:4px;
	    border: 2px solid #d5d5d4;
    border-radius: 10px;
}
aside.product_l .product_item .images img{
	max-width:100%;
	max-height:180px;
}
.thuong_hieu_cate .owl-wrapper{display: flex!important; align-items: center;}
.breadcrumb-category{display: flex;padding-left: 0;}
aside.product_l .product_boder{
clear: both;
background: #fff;
margin: 10px 4px 0 4px;
border-radius: 4px;
overflow: hidden;
}

aside.thuongHieuShoe{
	clear: both;
	color: #888;
	padding: 6px 20px;
	position: relative;
	text-align: center;
	background: #fff;
	margin: 4px;
	border-radius: 4px;
}
aside.navigation .brackRum .titileBrum{
	display:inline;
}
.banRight_Ca{
	 clear: both;
    display: block;
    margin-top: 10px;
	
}
aside.product_l .titile_category{
	clear: both;
text-align: center;
padding-top: 20px;
padding-bottom:5px;
}
aside.product_l .titile_category span{
    font-size: 17px;
    text-transform: uppercase;
    font-weight: bold;
}

.searAllmenu {
	background: #ffffff none repeat scroll 0 0;
    border: 1px solid #dddddd;
    clear: both;
    overflow: hidden;
}
.searAllmenu div {
     float: left;
    margin-left: 5px;
    margin-top: 10px;
    padding-bottom: 10px;
}
.searDelete {
    cursor: pointer;
    height: 20px;
    margin-top: 10px !important;
    width: 17px;
}
.searDelete:before{
	content: "\f057";
    font-family: FontAwesome;
}
.box_sort_ca{
	    clear: both;
    background: linear-gradient(to left, #f8d2c0, #fbeed7, #f8d2c0);
    margin: 4px;
    border-radius: 2px;
    position: relative;
    display: flex;
    justify-content: center;
    padding: 7px 0px;
    font-weight: bold;
    margin: 10px 0px;
width: 100%;
}
 .filter_thuong_h{max-height: 200px;
    overflow: auto;}
.box_sort_ca .bsc_icon{
	float:left;
	text-align:center;
	width:24%;
	padding-top:5px;
	padding-bottom:5px;
}
.box_sort_ca .filter,.filter_thuong_h{
	    background: #fff;
    position: absolute;
    text-align: left;
    margin-top: 5px;
    display: none;
    z-index: 1;
    width: 89%;
    left: 12px;
    border-radius: 4px;
    padding: 10px;
    border: 2px solid #D4D5D3;
}
.box_sort_ca .filter .age{
	clear:both;
	margin-bottom:2px;
	text-transform: uppercase;
    font-weight: 400;
}
/* .box_sort_ca .filter .age:before,.filter_thuong_h .manufac:before{
	content: "\f096";
font-family: FontAwesome;
font-size: 14px;
padding-right: 2px;
display: inline-block;
color:#929599;
} */
.box_sort_ca .filter .age_active:before{
	content: "\f046" !important;
	padding-right:0 !important;
}
.filter_thuong_h{
	margin-top:31px !important;
}
.filter_thuong_h .manufac{
	padding-left: 4px;
	height: 22px;
	overflow: hidden;
	clear: both;
}
.icon_sort_r{
	position:absolute;
	right:6px;
	top:4px;
}
.icon_sort_r:before{
	content: "\f05c"; 
	font-size:18px;
	color:#ef4679;
	font-family: FontAwesome;
}
.product_item_inajax{
	clear:both;
}
#seeMoreClickSearch{
	margin-top:6px !important;
}
}
/* ===== hết mục 2 ===== */

/* ============================================================
   4. GHI ĐÈ — markup desktop của trang danh sách (danh mục, thương hiệu,
      giảm giá, tìm kiếm) ở khổ dưới 768px
   ============================================================ */
@media (max-width: 767px) {
  /* Dải logo thương hiệu đầu trang: bản mobile cũ không có */
  .thuong_hieu_cate { display: none; }

  /* Tiêu đề trang: chữ hoa, đậm, căn giữa như bản mobile cũ */
  aside.product_l .title-category {
    text-transform: uppercase;
    font-size: 17px;
    padding: 16px 10px 0;
    flex-wrap: wrap;
    gap: 4px;
    text-align: center;
  }
  aside.product_l .title-category span { font-size: 13px; font-weight: normal; text-transform: none; }

  /* Hàng sắp xếp và cột lọc left_250 chuyển vào thanh 4 nút (thanh_loc_mobile) */
  aside.product_l ul.list { display: none; }
  aside#filter_cate { display: none; }
  .mb-filterbar { box-sizing: border-box; margin: 10px 0; border-radius: 8px; overflow: hidden; }
  .mb-filterbar .bsc_icon { flex: 1; float: none; width: auto; cursor: pointer; }

  /* Tên sản phẩm cao 45px với dòng 20px lộ nửa dòng thứ ba: cắt gọn đúng hai dòng */
  aside.product_l .product_item h2 { height: 40px; }
  /* Giá có hai dòng (giá bán + giá gốc gạch ngang) nhưng khung cao cố định nên đè lên hàng sao.
     Chiều cao tối thiểu bằng đúng khung hai dòng (66px) để giá một dòng cũng giữ hàng sao
     và giỏ hàng ở cùng vị trí với thẻ bên cạnh. */
  aside.product_l .product_item .price { height: auto; min-height: 66px; }

  /* Ngăn lọc trượt từ đáy màn hình, nằm trên cả nút gọi/chat nổi */
  .mb-sheet-overlay {
    position: fixed; inset: 0; z-index: 2147483000;
    background: rgba(0, 0, 0, .4);
    display: none;
  }
  .mb-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001;
    max-height: 75vh;
    display: none; flex-direction: column;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mb-sheet-overlay.is-open { display: block; }
  .mb-sheet.is-open { display: flex; }
  body.mb-sheet-lock { overflow: hidden; }
  .mb-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
  }
  .mb-sheet-close { border: 0; background: none; font-size: 28px; line-height: 1; color: #444; padding: 0 4px; cursor: pointer; }
  .mb-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 16px; }

  /* Khối lọc mượn từ left_250: bỏ tiêu đề trùng với tiêu đề ngăn, giãn đủ bề ngang */
  .mb-sheet .general > .titile { display: none; }
  .mb-sheet .general { width: auto; float: none; }
  .mb-sheet .filter { float: none; width: auto; }
  .mb-sheet .item_li { list-style: none; padding: 8px 0; border-bottom: 1px solid #f1f1f1; }
  .mb-sheet .list, .mb-sheet .list-child { padding-left: 12px; margin: 0; }
  .mb-sheet .title, .mb-sheet .title-parent { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 14px; }
  .mb-sheet .item_category { flex: 1; color: #444; text-decoration: none; }
  .mb-sheet .functionkg { margin: 8px 0; }
  .mb-sheet .functionkg select { width: 100%; min-height: 40px; box-sizing: border-box; }
  .mb-sheet .brand_left_boxsearch { position: relative; margin-bottom: 8px; }
  .mb-sheet .brand_left_boxsearch input { width: 100%; height: 40px; box-sizing: border-box; }
  .mb-sheet .brand_left_boxsearch .icon-search { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  .mb-sheet .brand_left_item { list-style: none; }
  .mb-sheet .brand_left_item a { display: block; padding: 8px 0; color: #444; }
  .mb-sheet .brand_left_item br { display: none; }

  /* Danh sách sắp xếp dựng từ #mySelect */
  .mb-sheet-opt {
    display: block; width: 100%;
    padding: 12px 0;
    border: 0; border-bottom: 1px solid #f1f1f1;
    background: none; text-align: left;
    font-size: 14px; color: #444;
  }
  .mb-sheet-opt.is-active { color: #fd1d55; font-weight: bold; }
}

/* ============================================================
   5. CO GIÃN (768–1259px) — markup desktop. Tới 1259px vì ở khung 1170px hàng thẻ desktop
      (960px + lề 20px) rộng hơn cột 936px, tràn khỏi màn hình tới khi viewport đạt ~1258px.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1259px) {
  /* Bề rộng hai cột, khung .product_boder và lề của section nay nằm chung ở main.css
     (dùng chung với trang bài viết, clinic & spa). Ở đây chỉ còn phần riêng của thẻ sản phẩm. */
  /* Thẻ sản phẩm 291px + lề 29px: đổi sang ba cột theo tỉ lệ */
  aside.product_l .product_item { width: calc((100% - 61px) / 3); box-sizing: border-box; }
  /* Khung ảnh desktop cao cứng 270px; ở đây giữ đúng dáng vuông của desktop (277×276)
     theo bề rộng thẻ, ảnh nằm gọn giữa khung nên mọi thẻ cùng hàng cao bằng nhau. */
  aside.product_l .product_item .images { width: 93%; max-width: 93%; height: auto; aspect-ratio: 1 / 1; }
  /* Sao và giỏ hàng luôn nằm ở đáy thẻ */
  aside.product_l .product_item .actions-destop { margin-top: auto; }
}
@media (min-width: 768px) and (max-width: 959px) {
  /* Khung hẹp: hai cột để thẻ không quá nhỏ */
  aside.product_l .product_item { width: calc((100% - 41px) / 2); }
}

/* ============================================================
   6. LƯỚI THẺ SẢN PHẨM DƯỚI 1260px (tablet + mobile), cùng mốc với mục 5
   Bản gốc xếp thẻ bằng float: một thẻ cao hơn là các thẻ sau bị "mắc" và rớt hàng.
   Chuyển sang flex-wrap: số thẻ mỗi hàng chỉ phụ thuộc bề rộng thẻ, thẻ cùng hàng cao bằng nhau.
   Nút "xem thêm" nối thẻ vào .product_boder (ngoài .product_ajax) nên lưới đặt ở
   .product_boder và .product_ajax dùng display:contents để mọi thẻ chung một lưới.
   ============================================================ */
@media (max-width: 1259px) {
  aside.product_l .product_boder { display: flex; flex-wrap: wrap; align-items: stretch; }
  aside.product_l .product_boder > :not(.product_item):not(.product_ajax) { flex: 0 0 100%; }
  aside.product_l .product_boder > .product_ajax { display: contents; }
  aside.product_l .product_item { float: none; display: flex; flex-direction: column; }
  /* Thẻ mobile cao cố định 365px: nếu nội dung dư, flex sẽ bóp các phần tử con
     (tên sản phẩm có overflow:hidden bị bóp về 0). Giữ nguyên chiều cao từng phần. */
  aside.product_l .product_item > * { flex-shrink: 0; }
  /* Chữ dài không được nới rộng thẻ (min-width mặc định của flex item là auto) */
  aside.product_l .product_item { min-width: 0; }
  /* Ảnh nằm giữa khung, co theo khung thay vì làm khung co giãn theo ảnh */
  aside.product_l .product_item .images {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    overflow: hidden;
  }
  aside.product_l .product_item .images img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: none;
  }
  /* Đường gạch nằm ở đáy khung tên (bottom:0), khối giá bắt đầu ngay sau đó nên
     tên - gạch - giá dính nhau. Chừa khoảng thở trên và dưới đường gạch. */
  aside.product_l .product_item h2 { padding-bottom: 9px; }
  /* Dùng margin (không phải padding) để không ăn vào chiều cao khung giá — khung giá
     nay vừa đúng hai dòng và dồn nội dung xuống đáy (xem main.css, mục thẻ sản phẩm). */
  aside.product_l .product_item .price { margin-top: 9px; }
}

@media (max-width: 767px) {
  /* Khung ảnh vốn cao 190px nhờ ảnh max-height:180px; khi thẻ hẹp ảnh co theo bề rộng
     và khung thấp đi. Cố định chiều cao đó để mọi thẻ đều nhau. */
  aside.product_l .product_item .images { height: 190px; }
  aside.product_l .product_item .images img { max-height: 180px; }
  /* Thẻ vốn cao cứng 365px kèm overflow:hidden nên phần dư bị cắt. Lưới đã là flex,
     các thẻ cùng hàng tự cao bằng nhau nên để chiều cao chạy theo nội dung. */
  aside.product_l .product_item { height: auto; }
  /* Giá chính: thẻ ban đầu 18px, thẻ nạp thêm (xemthem_category) 20px nội tuyến nên khung giá
     cao hơn 5px và đẩy lệch hàng sao. Đồng bộ về 18px như thẻ ban đầu. */
  aside.product_l .product_item .price > span:first-child { font-size: 18px !important; }
  /* Lưới 2 cột: khung trước đây có margin 4px hai bên trong khi main.css ép width:100%
     nên lòi ra mép phải 4px, còn thẻ 48.3% + lề 2px để thừa một khoảng lẻ bên phải.
     Khung cách mép theo lề chung --hd-gutter (main.css mục 13), hai cột bằng nhau, khe 10px.
     Áp cho cả thẻ ban đầu lẫn thẻ nạp thêm (nằm thẳng trong .product_boder). */
  aside.product_l .product_boder {
    margin: 10px 0 0;
    padding-left: var(--hd-gutter) !important; /* main.css: padding-left:0 !important */
    padding-right: var(--hd-gutter);
    gap: 10px;
  }
  aside.product_l .product_boder > .product_item,
  aside.product_l .product_boder > .product_ajax > .product_item { width: calc(50% - 5px); margin: 0; }
  /* Đường gạch dưới tên: rộng cố định 131px, left:15% nên lệch tâm; căn giữa như desktop */
  aside.product_l .product_item h2 a:after { left: 50%; transform: translateX(-50%); width: min(131px, 70%); }
}