html, body {
  margin: 0;
  height: 100%;
  background-color: #F0F4F9;  
  font-family: Arial, Helvetica, sans-serif;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  max-width: 100%;
  overflow-x: hidden;
}
/* hien thi khung trang chu*/
.trangchumaytinh {
  width: 100%;
  max-width: 1100px;
  height: auto;
  height: auto;
  display: block;
  padding-bottom: 70px;
  margin: 0 auto;
  
}
/* hien thi khung trang chu*/
.trangtrongmaytinh {
  width: 100%;
  max-width: 1100px;
  height: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  
}
/*chan trang thong tin*/
.chan {
  border-top: 5px outset red;
  background-color: rgb(255, 255, 255);    
  text-align: center;
  color: rgb(92, 92, 92);
  position: relative;
  width: 100%;
  bottom: 0px;
  
}


  /*hiển thị repossite di động*/

  .hienthitren650 {


  }
  .hienthiduoi650 {
  
   display: none;
  }
  @media screen and (max-width: 650px) {
    .hienthitren650 {
  
      display: none;
  
    }
      .hienthiduoi650 {
  
      display: block;
  
    }
  }

  .group-buttons {
    display: flex;       /* Kích hoạt Flexbox */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 10px;          /* Khoảng cách giữa 2 nút */
}

/* Đảm bảo form không chiếm hết chiều ngang và đẩy nút khác xuống */
.group-buttons form {
    margin: 0; 
    display: inline-block;
}
/* boder button tên danh mục hiển thị theo tin */
.btntenmuangay {
   /* Thêm dòng này */
  border: 0px solid #990000;
  background: #FF3333;
  color: #FFFFFF;
  padding: 10px 10px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  margin-top: 15px;
}
.btntenmuangay:hover {
  /* Thêm dòng này */
 background: #ff9800;
 color: #FFFFFF;
}
.btntenthemgiohang {
  /* Thêm dòng này */
 border: 1px solid #3399ff;
 background: #FFFFFF;
 color: #3399FF;
 padding: 10px 10px;
 font-size: 18px;
 cursor: pointer;
 border-radius: 5px;
 font-weight: bold;
 margin-top: 15px;
}
.btntenthemgiohang:hover {
  /* Thêm dòng này */
border: 1px solid #FF0066;
 background: #FFFFFF;
 color: #FF0066;
}
  /* boder button tên danh mục hiển thị theo tin */
.btntendanhmuc {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 5px 5px;
  font-size: 16px;
  cursor: pointer;
   border-radius: 5px;
}
.btntendanhmucdovang {
  border-color: #f44336;
  color: red;
}

.btntendanhmucdovang:hover {
  border-color: #FFDE18;
  background: #FFDE18;
  color: white;
}
.btntendanhmucxanh {
  border-color: #0066FF;
  color: #0066FF;

}

.btntendanhmucxanh:hover {
  background: #0066FF;
  color: white;
}

.btntendanhmucxanhnen {
  border-color: #0066FF;
  background: #0066FF;
  color: #FFFFFF;

}

.btntendanhmucxanhnen:hover {
  background: #ffffff;
  color: #0066FF;
}
.btntendanhmucxanhnenxemshop {
  border-color: #82B6FF;
  background: #ECF4FF;
  color: #1877F2;

}

.btntendanhmucxanhnenxemshop:hover {
  background: #ffffff;
  color: #0066FF;
}
.btntendanhmuchong {
  border-color: #003366;
  color: #003366;

}
.btntendanhmuchong:hover {
  background: #003366;
  color: white;
}
.btntendanhmuccam {
  border-color: #ff9800;
  color: #ff9800;

}

.btntendanhmuccam:hover {
  background: #ff9800;
  color: white;
}
/* button hiển thị theo tin */
.btnnhan {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 3px 6px 3px 6px;
  font-size: 12px;
  cursor: pointer;
   border-radius: 10px;
   
   
}
.btnnhanthongtin {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 3px 6px 3px 6px;
  font-size: 12px;
  cursor: pointer;
   border-radius: 10px;
   margin-bottom: 5px;
}
.btnxacthuc {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 1px 6px 1px 6px;
  font-size: 12px;
  cursor: pointer;
   border-radius: 10px;
   width: max-content;
}
.btnchitet {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 3px 6px 3px 6px;
  font-size: 12px;
  cursor: pointer;
   border-radius: 10px;
   width: max-content;
   margin-bottom: 5px;
}
.btnnhandovang {
  border-color: #f44336;
  color: red;
}

.btnnhandovang:hover {
  border-color: #FFDE18;
  background: #FFDE18;
  color: white;
}
.btnnhanvang {
  border-color: #ff2a00;
  background: #ffe100;
  color: red;
}

.btnnhanvang:hover {
  border-color: #ff2a00;
  background: #ff2a00;
  color: white;
}
.btnnhando {
  border-color: #ffe100;
  background: #ff0000;
  color: #ffffff;
}

.btnnhando:hover {
  border-color: #ffe100;
  background: #ffe100;
  color: #000000;
}
.btnnhanxam {
  border-color: #e7e7e7;
  background: #e7e7e7;
  color: #818181;
}

.btnnhanxam:hover {
  
  background: #FFDE18;
  color: #000000;
}
.btnnhanxanh {
  border-color: #0066FF;
  color: #0066FF;
  

}

.btnnhanxanh:hover {
  background: #0066FF;
  color: white;
}
.btnnhanbusiness {
  border-color: #FF00CC;
  color: #FF00CC;

}

.btnnhanbusiness:hover {
  background: #FF00CC;
  color: white;
}
.btnnhanxanhnut {
  border-color: #4B5EFA;
  background: #4B5EFA;
  color: #FFFFFF;

}

.btnnhanxanhnut:hover {
  background: #3586ff;
  color: white;
}
.btnnhanhong {
  border-color: #ffffff;
  background: #ff00f2;
  color: #ffffff;

}
.btnnhanhong:hover {
  background: #003366;
  color: white;
}
.btnnhandam {
  border-color: #003366;
  color: #ffffff;
  background: #003366;

}
.btnnhandam:hover {
  background: #006edc;
  color: white;
}
.btnnhancam {
  border-color: #ff9800;
  color: #ff9800;

}

.btnnhancam:hover {
  background: #ff9800;
  color: white;
}
/**
/* From đăng nhập đăng kí Add padding to containers 
**/

.containerdangnhap {
  padding: 16px;
  background-color: white;
  border-radius: 20px;
  margin: 10px;
}

/* Full-width input fields */
input[type=text], input[type=password], input[type=number] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus , input[type=number]:focus{
  background-color: #ddd;
  outline: none;
}

select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  
}

/* Set a style for the submit button */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity: 1;
}

/* Add a blue text color to links */


/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #4CAF50;
}

/* Thiết lập chung cho menu load chân trang */
.navbarapp {
  overflow: hidden;
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid  #c2c2c2;
      z-index: 1;
}

.navbarapp a {
  float: left;
  display: block;
   color: #474747;
  text-align: center;
  padding: 5px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  font-size: 14px;
   width: 20%;
   height: 50px;
   
}

.navbarapp a:hover {
  background: #FFDE18;
  color: white;
}

.navbarapp a.active {

  background-color: #FFDE18;
  color: white;
}


/* menu doc thanh vien*/
.menudoc a {
  display: block;
  color: white;
  padding: 14px 14px 14px 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 8px;
  margin: 10px;
  background-color: dodgerblue;
  text-align: center;
}

.menudoc a:hover {
  background-color: #FF0066;
  color: white;
}

.menudoc a.active {
  background-color: dodgerblue;
  color: white;
}
/* khung div trang bo goc*/
.khungtrang {
  padding: 10px;
  background-color: white;
  border-radius: 15px;
  margin: 10px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  
}
.khungtrong {
  margin: 10px;
}
/* khung den div trang bo goc*/
.khungden {
  padding: 10px;
  background-color: rgb(59, 59, 59);
  border-radius: 15px;
  margin: 10px;
  color: white;
  
}
/* khung div trang bo goc*/
.khungvip {
  padding: 10px;
  background-color: white;
  border-radius: 15px;
  margin: 10px;
  outline: 1px solid #ffe600;
  
}
/*ảnh đại diện thành viên tròn*/
.imagetron {
    border: 2px solid #FF676D;
    border-radius: 50% !important; /* Tạo hình tròn tuyệt đối */
    object-fit: cover !important;  /* Giữ đúng tỷ lệ ảnh không bị móp/méo */
}
.imagetronanhbia {
  border: 2px solid #FF676D;
  border-radius: 50% !important; /* Tạo hình tròn tuyệt đối */
  object-fit: cover !important;  /* Giữ đúng tỷ lệ ảnh không bị móp/méo */
  width: 100% !important;
  max-width: 156px !important; /* Không cho phép vượt quá 156px */
  height: auto !important;     /* Tự động tính chiều cao theo chiều rộng để không méo ảnh */
  aspect-ratio: 1 / 1;
}
/*ảnh đại diện thành viên tròn*/
.imagetrondaidien {
  border: 2px solid #FF676D;
  width: 85px !important;
  height: 85px !important;
  max-width: 85px !important;
  max-height: 85px !important;
  border-radius: 50% !important; /* Tạo hình tròn tuyệt đối */
  object-fit: cover !important;  /* Giữ đúng tỷ lệ ảnh không bị móp/méo */
  display: block !important;     /* Biến thành khối để nhận diện border-radius tốt nhất */
}
/*link tiêu đề danh sách*/
.tieudedanhsach {
	 FONT-SIZE: 16px; COLOR: #1977f3; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.tieudedanhsach {
	 FONT-SIZE: 16px; COLOR: #1977f3; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.tieudedanhsach:visited {
	 FONT-SIZE: 16px; COLOR: #1977f3; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.tieudedanhsach:hover {
	 FONT-SIZE: 16px; COLOR: #ed36bc; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
/*link tiêu đề danh sách sản phẩm*/
.tieudedanhsachsanpham {
  FONT-SIZE: 16px; COLOR: #555555; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.tieudedanhsachsanpham {
  FONT-SIZE: 16px; COLOR: #555555; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.tieudedanhsachsanpham:visited {
  FONT-SIZE: 16px; COLOR: #555555; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.tieudedanhsachsanpham:hover {
  FONT-SIZE: 16px; COLOR: #1977f3; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
/*link tiêu đề danh sách*/
.danhsachdiadiem {
  FONT-SIZE: 14px; COLOR: #73920f; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.danhsachdiadiem {
  FONT-SIZE: 14px; COLOR: #73920f; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.danhsachdiadiem:visited {
  FONT-SIZE: 14px; COLOR: #73920f; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.danhsachdiadiem:hover {
  FONT-SIZE: 14px; COLOR: #1977f3; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
/*link tiêu đề danh sách*/
.linknguoidung {
  FONT-SIZE: 14px; COLOR: #7FAF01; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linknguoidung {
  FONT-SIZE: 14px; COLOR: #7FAF01; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linknguoidung:visited {
  FONT-SIZE: 14px; COLOR: #7FAF01; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linknguoidung:hover {
  FONT-SIZE: 14px; COLOR: #ed36bc; FONT-FAMILY: Arial; TEXT-DECORATION: none
}

/*link địa điểm danh sách tin*/
.diadiemtin {
   FONT-SIZE: 12px; COLOR: #ed36bc; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.diadiemtin {
   FONT-SIZE: 12px; COLOR: #ed36bc; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.diadiemtin:visited {
  FONT-SIZE: 12px; COLOR: #ed36bc; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.diadiemtin:hover {
  FONT-SIZE: 12px; COLOR: #FF0000; FONT-FAMILY: Arial; TEXT-DECORATION: none
}

/*link đậm cam footter*/
.linkcamdam {
  FONT-SIZE: 14px; COLOR: #FFDE18; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linkcamdam {
  FONT-SIZE: 14px; COLOR: #FFDE18; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linkcamdam:visited {
  FONT-SIZE: 14px; COLOR: #FFDE18; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linkcamdam:hover {
  FONT-SIZE: 14px; COLOR: #ff6200; FONT-FAMILY: Arial; TEXT-DECORATION: none
}


/*thong bao va nut tat*/
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
 
  

}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
/*button menu toi*/
.btnmenutoi {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 16px;
}

/* Darker background on mouse-over */
.btnmenutoi:hover {
  background-color: RoyalBlue;
}


/* menu bottom load chan trang */
.bottom-menu {
  position: fixed;
    inset: auto 10px 0 10px; /* Cách lề trái phải 10px, bottom: 0 */
    transform: translateX(0); /* Loại bỏ transform */
    width: auto; /* Chiều rộng tự động */
    background-color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    outline: 1px solid #F0F4F9;
    bottom: 10px;
    border-radius: 10px;
    display: flex; /* Sử dụng flexbox */
  justify-content: space-around; /* Căn đều các mục */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Tạo bóng đổ */
  overflow: hidden;
  margin-top: 50px;
}
.bottom-menu a {
 
  FONT-SIZE: 14px;
  text-decoration: none; /* Loại bỏ gạch chân */
  color: #888; /* Màu chữ và icon xám nhạt */
 
 
}

.bottom-menu a:hover {
  background-color: #FFFFFF; /* Màu nền khi hover */
  color: #FF3333;
}
.bottom-menu a.active { /* Màu icon "Đăng tin" khi active */
  color: #FF3333; /* Màu đỏ */
 
}
.bottom-menu span {

  display: flex;
  flex-direction: column; /* Xếp theo chiều dọc */
  align-items: center; /* Căn giữa theo chiều ngang */
}
/* Áp dụng kiểu CSS chỉ khi chiều rộng màn hình >= 1100px */
@media (min-width: 1100px) {
  .bottom-menu {
    max-width: 1100px; /* Giới hạn chiều rộng */
    left: 50%; /* Căn giữa */
    transform: translateX(-50%); /* Căn giữa */
  }
}

/*tab chọn Style the tab */

.tab {

}

.tab-header {
  display: flex;
}

.tab-button {
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  background-color: #ffffff;
  cursor: pointer;
 
  flex: 1;
  border-bottom: 4px solid #7FAF01;
  
}

.tab-button:hover {
  background-color: #7FAF01;
  color: #FFFFFF;
}

.tab-button.active {
  color: #FFFFFF;
  background-color: #7FAF01;
  border-bottom: 4px solid #7FAF01;
}

.tab-content {
  
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ảnh và user dai dien */
.chip {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}
.chip .text-container { /* Thêm class cho phần văn bản */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
}

/* Menu ngang trang thong tin */
.pill-nav {
  display: flex; /* Sử dụng Flexbox cho phần tử cha */
}

.pill-nav a {
  display: block; /* Hoặc có thể dùng inline-block */
  color: #FFFFFF;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 10px;
  margin: 10px;
  background-color: dodgerblue;
  flex: 1; /* Các phần tử con chiếm đều không gian */
}

.pill-nav a:hover {
  background-color: #7FAF01;
  color: #FFFFFF;
}

.menu {
  width: 100%; /* Điều chỉnh chiều rộng menu */
 
  border-radius: 15px; /* Bo tròn góc menu */
  overflow: hidden; /* Ẩn các phần tử tràn ra ngoài */
  background-color: #FFFFFF;
  margin: 10px;
  width: calc(100% - 20px); /* Điều chỉnh chiều rộng */


}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Thay đổi dòng này */
  padding: 15px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #eee;
  text-align: left; /* Thêm dòng này */

}

.menu-item:last-child {
  border-bottom: none; /* Loại bỏ viền dưới ở mục menu cuối cùng */
}

.menu-item .icon {
  font-size: 1.2em; /* Tăng kích thước icon */
  margin-right: 10px;
}

.menu-item .arrow {

  font-size: 1.5em; /* Tăng kích thước mũi tên */
  color: #888;
  margin-left: auto;
 
}
.menu-item:hover .arrow {

  color: #FFFFFF;
}
.menu-item:hover {
  background-color: dodgerblue; /* Hiệu ứng hover khi di chuột qua */
  TEXT-DECORATION: none;
  color: #FFFFFF;
}

.gradient-text {
  font-size: 20px; /* Điều chỉnh kích thước chữ theo ý muốn */
  /* Tùy chọn: làm đậm chữ */
  background: linear-gradient(to right, #6a5acd, #ff6347); /* Chuyển màu từ tím sang đỏ, bạn có thể thay đổi màu sắc */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 10px;
}
.gradient-textsanpham {
  font-size: 20px; /* Điều chỉnh kích thước chữ theo ý muốn */
  /* Tùy chọn: làm đậm chữ */
  background: linear-gradient(to right, #6a5acd, #ff6347); /* Chuyển màu từ tím sang đỏ, bạn có thể thay đổi màu sắc */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 0px;
}
.iconmenu-text {
  /* Tùy chọn: làm đậm chữ */
  background: linear-gradient(to right, #6a5acd, #ff6347); /* Chuyển màu từ tím sang đỏ, bạn có thể thay đổi màu sắc */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 10px;
}
/**
/* thông báo popup đen tự đóng
**/
.thongbaopopup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.thongbaopopup-content {
  background-color: #505050;
  margin: auto;
  padding: 20px;
  border: 0px solid #000000;
  width: 250px;
  height: 250px;
  color: #FFFFFF;
  font-size: 1.550rem;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  text-align: center;
}
/**
/* menu login
**/
.dropbtn {
  background-color: #616161;
  color: white;
  padding: 0px 10px 0px 10px;
  height: 30px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 15px;
  margin-left: 5px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: rgb(75, 117, 255);
}
.dropdown {
  
  position: relative;
  display: inline-block;
}

.dropdown-content {
  margin-top: 0px;
  display: none;
  position: absolute;
  background-color: rgb(75, 117, 255);
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 1;
  border-radius: 15px;
  
}

.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
  display: block;
  border-bottom: 1px solid #eee;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown a:hover {background-color: rgb(249, 75, 255);}

.show {display: block;}


/**
 *hien thi đếm số trang
 */

 .pagination {
  display: inline-block;
  margin-left: 10px;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  background-color: #FFFFFF;
}

.pagination a.active {
  background-color: #ddd;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

/**
 *hien thi thong bao
 */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
 
  

}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.scroll-container {
  display: flex;
  overflow-x: auto; /* Cho phép cuộn ngang */
  scroll-snap-type: x mandatory; /* Bật scroll snap theo trục x, bắt buộc dừng đúng vị trí */
  width: 100%; /* Hoặc chiều rộng cố định */
  -webkit-overflow-scrolling: touch; /* Bật cuộn mượt trên iOS */
}

.scroll-item {
  flex: 0 0 100%; /* Mỗi phần tử chiếm 100% chiều rộng container */
  scroll-snap-align: start; /* Dừng cuộn ở đầu mỗi phần tử */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  background-color: #f0f0f0; /* Màu nền cho dễ nhìn */
  border: 1px solid #ccc; /* Đường viền cho dễ nhìn */
}
/* hình */
.responsiveimagetin {
  width: 100%;
  max-width: 900px;
  height: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* css nội dung trang chi tiết */
.noi-dung ol {
  margin-left: 15px;
  list-style: decimal; /* Hiển thị đánh dấu số */
  list-style-type: disc;
}
.noi-dung ul {
  margin-left: 15px;
  list-style-type: disc;
}
.noi-dung p {
  
}
.noi-dung a {
  text-decoration: underline !important;
}

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  /* Mặc định chiều rộng cho mobile */
  width: 90%;
  position: relative;
}

.close-popup {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-popup:hover,
.close-popup:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Media query cho màn hình máy tính (chiều rộng tối thiểu 768px) */
@media (min-width: 768px) {
  .popup-content {
      width: 700px; /* Chiều rộng cố định cho máy tính */
  }
}



.khungthongtindongchatshophinh {
  float: left;
  width: 60px;
  padding: 8px 8px;
  border: 0px solid #F3DB97;

}
.khungthongtindongchatshopsdt {
 
  padding: 8px 8px;
  border: 0px solid #F3DB97;
}

/* Quảng cáo liên kết */

.search-results {
  background-color: #fff;
 
  margin: 10px;
 
  border: 1px solid #D3DDF8;
  border-radius: 10px;

   
  
}

.result-item {
  padding: 10px;
}

.result-item:last-of-type {
  border-bottom: none;
  margin-bottom: 10px; /* Adjust as needed */
  padding-bottom: 0; /* Adjust as needed */
}

.result-item .title {
  font-size: 16px;
  color: #1a0dab; /* Blue color for links */
  text-decoration: none;
  font-weight: normal; /* Normal weight for titles */
}

.result-item .title:hover {
  text-decoration: underline;
}

.result-item .url {
  font-size: 12px;
  color: #006621; /* Green color for URLs */
  text-decoration: none;
  display: block; /* Make it a block element to go to a new line */
  margin-top: 4px;
}

.result-item .url:hover {
  text-decoration: underline;
}

.result-item .description {
  font-size: 12px;
  color: #545454;
  margin-top: 5px;
  line-height: 1.5;
}

.ad-link {
  
  display: inline;
  background-color: #D3DDF8;
  padding: 0px 5px 0px 5px;
  position: relative;
  font-size: 13px;
  color: #436DA3;
  float: right;
}

.ad-link a {
  color: #436DA3;
  text-decoration: none;
}

.ad-link a:hover {
  text-decoration: underline;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* Thêm container cho footer và clearfix */
.footer-ad-container {
  padding-top: 5px; /* Khoảng cách từ nội dung chính */
  /* Có thể bỏ float: right của .ad-link nếu dùng flexbox cho .footer-ad-container */
  /* hoặc giữ float và dùng clearfix */
}

/* Khung bao ngoài giãn hết cỡ */
.feedlink-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 5px; /* Chừa một chút lề nhỏ cho đẹp */
  box-sizing: border-box;
}

/* CHIA SE LINK */
/* Thẻ bài viết luôn nằm ngang */
.post-card {
  display: flex; 
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  align-items: center; /* Căn giữa nội dung theo chiều dọc */
}

/* Phần chứa ảnh: Dùng % để tự co giãn trên Mobile */
.post-thumb {
  width: 35%;          /* Ảnh chiếm 35% chiều ngang */
  min-width: 120px;    /* Không được nhỏ hơn 120px để tránh mất hình */
  max-width: 300px;    /* Không quá 300px trên màn hình PC cực lớn */
  height: 120px;       /* Chiều cao cố định để các dòng đều nhau */
  flex-shrink: 0;      /* Không cho phép ảnh bị bóp méo */
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phần nội dung chữ */
.post-content {
  flex: 1;             /* Chiếm 65% còn lại */
  padding: 10px 15px;
  min-width: 0;        /* Để text-overflow hoạt động */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tiêu đề */
.post-title {
  font-size: 16px;     /* Giảm nhẹ size chữ để phù hợp Mobile ngang */
  font-weight: bold;
  color: #1c1e21;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
A.post-title {
FONT-SIZE: 16px; COLOR: #1c1e21; TEXT-DECORATION: none
}
A.post-title:visited {
FONT-SIZE: 16px; COLOR: #1c1e21; TEXT-DECORATION: none
}
A.post-title:hover {
FONT-SIZE: 16px; COLOR: #0099FF; TEXT-DECORATION: none
}


/* Tên miền */
.post-domain {
  font-size: 11px;
  color: #8a8d91;
  text-transform: uppercase;
}

/* Mô tả: Ẩn bớt trên Mobile để tránh quá dài */
.post-description {
  font-size: 13px;
  color: #4b4f56;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- ĐIỀU CHỈNH RIÊNG CHO MOBILE SIÊU NHỎ --- */
@media (max-width: 400px) {
  .post-thumb {
      width: 100px;    /* Thu nhỏ ảnh hơn nữa trên máy quá nhỏ */
      min-width: 100px;
      height: 100px;
  }
  .post-title {
      font-size: 14px;
  }
  .post-description {
      display: none;   /* Máy quá nhỏ thì ẩn mô tả, chỉ hiện Tiêu đề + Domain cho gọn */
  }
}

.container { max-width: 100%; padding: 10px; }
.form-box { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #ddd; }
.input-group { display: flex; gap: 10px; }
input[type="text"] { flex: 1; padding: 12px; border: 1px solid #ccc; border-radius: 5px; }
/* Khung bao quanh phải là flex */
.input-group {
display: flex; /* Kích hoạt flexbox */
border: 0px solid #ddd;
border-radius: 4px;
overflow: hidden;
}

/* Khung bao ngoài */
.input-group {
display: flex;             /* Dùng flex để các phần tử nằm trên 1 hàng */
width: 100%;
border: 0px solid #ccc;    /* Tạo viền chung cho cả khối */
border-radius: 4px;        /* Bo góc toàn bộ khung */
overflow: hidden;          /* Quan trọng: Để bo góc che đi phần thừa bên trong */
box-sizing: border-box;
height: 40px;
}

/* Ô nhập liệu */
#url-input { 
flex: 1;                   /* Tự động giãn chiếm hết chỗ trống */
border: none !important;   /* Xóa bỏ viền riêng của input */
padding: 5px;
outline: none;
background-color: #f9f9f9; /* Màu nền nhẹ cho ô nhập */
box-sizing: border-box;
}

/* Nút bấm */
.btn-post { 
background: #d93025;
color: white;
border: none !important;   /* Xóa bỏ viền riêng của button */
padding: 5px 20px;
cursor: pointer;
font-weight: bold;
box-sizing: border-box;
transition: background 0.3s;
}

.btn-post:hover {
background: #b3241b;       /* Hiệu ứng khi di chuột vào */
}

#preview-box { display: none; margin-top: 15px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #fff; }
#pre-img { width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.pre-body { padding: 15px; border-top: 1px solid #eee; }
.pre-title { font-weight: bold; font-size: 18px; margin-bottom: 5px; }
.pre-desc { color: #606770; font-size: 14px; line-height: 1.4; }
#loading { display: none; color: #1877f2; margin-top: 10px; font-weight: bold; }

.feed-item { background: #fff; margin-top: 20px; border-radius: 8px; border: 1px solid #ddd; overflow: hidden; }
.feed-item img { width: 100%; height: auto; }
.feed-content { padding: 15px; }
.feed-title { font-weight: bold; font-size: 18px; color: #1c1e21; text-decoration: none; }
.feed-url { font-size: 11px; color: #65676b; text-transform: uppercase; margin: 5px 0; }

/* MENU GÓC TRÁI TRÊN */
/* Container chính */
.menu-wrappertrai {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
}

/* Style cho Icon Menu */
.main-menu-icontrai {
  background: #333;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
}

/* Ẩn Mega Menu mặc định */
.mega-menutrai {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 160px;
  z-index: 999;
}

/* Hiển thị Mega Menu khi rê chuột vào icon */
.main-menu-icontrai:hover .mega-menutrai {
  display: block;
}

/* Style cho các mục con (Địa điểm, Chuyên mục, Danh mục) */
.menu-itemtrai {
  position: relative;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  color: #666666;
}

.menu-itemtrai a {
  text-decoration: none;
  color: #666666;
  font-weight: bold;
}

/* Hiển thị danh sách con cấp 2 khi hover vào từng mục */
.sub-menutrai {
  display: none;
  position: absolute;
  left: 100%; /* Đẩy sang bên phải trên PC */

  top: 0;
  background: #FFFFFF;
  list-style: none;
  padding: 10px;
  min-width: 270px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.sub-menutrai a {
  text-decoration: none;
  color: #0066FF;
  font-weight: bold;

}
.menu-itemtrai:hover .sub-menutrai {
  display: block;
  
}
/* Và thêm dòng này ngay dưới nó */
.menu-itemtrai:hover > a {
  color: #FF33FF; /* Màu chữ mục thứ 2 sẽ đổi khi rê chuột vào sub-menu */
}
.sub-menutrai li a:hover {
    color: #FF33FF;
}
.sub-menutrai li {
  position: relative;
  padding: 10px 15px;
  border-top: 1px solid #eee;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
  .sub-menutrai {
    position: static; /* Đẩy xuống dưới thay vì sang ngang */
    box-shadow: none;
    padding-left: 20px;
  }
  
  .main-menu-icontrai {
    width: 100%;
    
  }
}


			/* Container quản lý sản phẩm chính */
      .product-container {
        max-width: 1200px;
        
        background: #fff;
        font-family: Arial, sans-serif;
        border: 0px solid #eee;
    }
    
    /* Header cho bản PC */
    .product-header-pc {
        display: flex;
        background: #f8f9fa;
        padding: 5px;
        font-weight: bold;
        color: #666;
        font-size: 13px;
        border-bottom: 0px solid #eee;
    }
    
    /* Flexbox cho các cột PC */
    .col-info { flex: 6; }
    .col-status { flex: 1; text-align: center; }
    .col-date { flex: 1; }
    .col-stats { flex: 1; text-align: center; }
    .col-actions { flex: 1; text-align: right; }
    
    /* Item sản phẩm */
    .product-item {
        display: flex;
        padding: 5px;
        border-bottom: 0px solid #eee;
        justify-content: flex-start;
        align-items: center;
    }
    
    /* Thông tin chính (Ảnh + Chữ) */
    .product-main-info {
        flex: 9;
        display: flex;
        gap: 15px;
      
    }
    .product-thumb {
        width: 100px !important;
        height: 100px !important;
        object-fit: cover;
        border-radius: 4px;
      flex-shrink: 0;
    }
    .product-titlequanly { margin: 0 0 5px; font-size: 16px; color: #333; }
    .product-pricequanly { color: #d9534f; font-weight: bold; margin: 0; }
    .product-meta { color: #888; font-size: 13px; margin: 2px 0; }
    .product-reason { color: #d9534f; font-size: 12px; margin: 0; }
    
    /* Trạng thái */
    .product-status-group { flex: 1.5; text-align: center; }
    .status-dot { height: 8px; width: 8px; background: #bbb; border-radius: 50%; display: inline-block; }
    .badge-rejected { background: #d9534f; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
    
    /* Ngày tháng */
    .product-date-group { flex: 2; font-size: 13px; color: #666; display: none; }
    .product-date-grouppc { flex: 2; font-size: 13px; color: #666; }
    
    /* Thống kê */
    .product-stats-group { flex: 1.5; text-align: center; color: #777; }
    
    /* Nút bấm */
    .product-actions { flex: 1; text-align: right; }
    .btn-edit, .btn-delete { padding: 10px 10px; border: 1px solid #ddd; background: #fff; cursor: pointer; border-radius: 4px; }
    .btn-delete:hover { padding: 10px 10px; border: 1px solid #ddd; color: #fff; background: #FF0000; cursor: pointer; border-radius: 4px; }
    .btn-edit:hover { padding: 10px 10px; border: 1px solid #ddd; color: #fff; background: #0099FF; cursor: pointer; border-radius: 4px; }
    /* ===========================================
       GIAO DIỆN MOBILE (Dưới 768px)
       =========================================== */
       @media (max-width: 768px) {
        .product-item {
            display: block; /* Chuyển sang block để các phần tử tự xuống dòng tự nhiên */
            flex-direction: column;
            padding: 5px;
            position: relative;
            
        }
    
        /* Bỏ padding-top nếu trước đó bạn đã thêm để tránh đè tiêu đề */
        .product-item {
            padding-top: 5px; 
        }
        /* Tạo một hàng ngang chứa cả ID và Ngày tháng */
        .id-date-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 15px; /* Khoảng cách giữa ID và Ngày tháng */
            margin-top: 0px;
        }
        .product-date-grouppc { display: none; }
        /* Chỉnh lại product-date-group để không chiếm hết hàng */
        .product-date-group {
            
            flex: none !important; 
            font-size: 12px;
            color: #888;
            display: inline-block;
        }
        /* Đưa các nút thao tác về trạng thái bình thường trong dòng chảy HTML */
        .product-actions {
            position: static; /* Hủy bỏ việc nổi lên trên */
            display: flex;
            justify-content: flex-end; /* Đẩy nút sang bên phải */
            gap: 10px;
            margin-top: -25px; /* Kéo lên một chút để nằm cùng hàng với icon trái tim */
            padding-bottom: 0px;
        }
      .product-thumb {
            width: 80px !important; /* Cố định chiều rộng */
            height: 80px !important; /* Cố định chiều cao */
            flex: 0 0 80px; /* Không cho phép co (shrink) hoặc giãn (grow) */
            object-fit: cover; /* Giữ tỉ lệ ảnh, cắt bớt phần thừa */
            border-radius: 4px;
        }
    
        .product-main-info {
            display: flex; /* Đảm bảo vẫn dùng flex để ảnh và chữ nằm cạnh nhau */
            align-items: flex-start; /* Căn lề trên để tiêu đề dài không làm lệch ảnh */
            gap: 10px;
        }
    
        .product-text {
            flex: 1; /* Cho phép phần chữ chiếm hết khoảng trống còn lại */
            min-width: 0; /* Quan trọng: giúp nội dung bên trong (tiêu đề) không bị tràn */
        }
        .product-title1 {
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 5px;
            word-wrap: break-word; /* Tự động ngắt từ dài */
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng, quá 2 dòng hiện dấu ... */
            -webkit-box-orient: vertical;
        }
        /* Giúp phần thống kê (mắt xem, trái tim) chiếm hàng ngang dưới cùng */
        .product-stats-group {
            display: flex;
            align-items: center;
            gap: 15px;
            border-top: 1px solid #eee;
            padding-top: 10px;
            margin-top: 10px;
            width: 100%;
        }
    
        /* Tiêu đề giờ có thể thoải mái rộng 100% */
        .product-title1 {
            max-width: 100%;
        }
    }

    	/**
/* block cart sản phẩm
**/
/* Create two equal columns that floats next to each other */
.rowsanpham {
  display: flex !important;
  flex-wrap: wrap !important; /* Quan trọng: để sản phẩm tự nhảy xuống hàng */
  margin: 0px 5px 0 5px !important;
  padding: 0px 0px 0px 0px !important;
}

/* 2. Cột sản phẩm trên Máy tính (5 cột) */
.columnsanpham {
  width: 20% !important; /* 100% chia 5 */
  box-sizing: border-box !important;
  padding: 5px !important;
  float: none !important; /* Xóa bỏ hoàn toàn float */
}

.product-card {
  
  position: relative;
  box-shadow: 0 2px 7px #dfdfdf;
  background: #FCFCFC;
  border-radius: 10px;
  
  /* Thiết lập Flexbox cho card */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important; 
  overflow: hidden;
}
.product-card:hover {
  box-shadow: 0 2px 7px #F1C40F;
}

.badge {
  position: absolute;
  left: 0;
  top: 20px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  background: red;
  color: #fff;
  padding: 0px 3px;
  border-radius: 0px 7px 7px 0px;
}
.badgevanchuyen {
  position: absolute;
  right: 0;
  top:  20px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  background: #F1C40F;
  color: #fff;
  padding: 0px 3px;
  border-radius: 7px 0px 0px 7px;
}
/* 4. Ảnh sản phẩm - Đảm bảo không tràn */
.product-tumb {
  width: 100% !important;
  height: 180px !important;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 10px 10px 0 0;
}

.product-tumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Ảnh tự co giãn không méo */
}

/* Phần chi tiết bao gồm Tiêu đề và Giá */
.product-details {
  padding: 5px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Để phần này chiếm hết không gian còn lại, đẩy bottom xuống dưới */
}

.product-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #ccc;
  margin-bottom: 0px;
margin-top: 0px;

}

.product-title a {
  display: -webkit-box;    /* Bắt buộc: chuyển sang dạng box của webkit */
  -webkit-line-clamp: 2;   /* Số dòng muốn hiển thị */
  -webkit-box-orient: vertical; /* Bắt buộc: xác định chiều của box */
  overflow: hidden;        /* Bắt buộc: ẩn phần chữ thừa */
  text-overflow: ellipsis; /* Hiển thị dấu ... */
  
  /* Các thuộc tính giữ nguyên của bạn */
  color: #363636;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;        /* Nên thêm để khoảng cách dòng đẹp hơn */
  word-wrap: break-word;
}

.product-title a:hover {
  color: #C69F00;
}

.product-details h4 a {
  font-weight: 500;
  display: block;
  margin-bottom: 18px;
  text-transform: uppercase;
  color: #363636;
  text-decoration: none;
  transition: 0.3s;
}

.product-details h4 a:hover {
  color: #fbb72c;
}

.product-details p {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 18px;
  color: #999;
}

/* Phần chứa Địa điểm và Shop */
.product-bottom-details {
  margin-top: auto; /* QUAN TRỌNG: Đẩy sát xuống đáy card */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0px 0px !important;
  border-top: 0px solid #f2f2f2; /* Thêm đường kẻ ngang nhẹ cho giống mẫu */
}

/* Reset lại các div con để không bị nhảy vị trí */
.product-bottom-details div {
  position: static !important;
  width: auto !important;
  float: none !important;
}

.product-price {
  font-size: 16px;
  color: #FF0033;
  font-weight: 600;
padding-left: 5px;
}

.product-price small {
  font-size: 80%;
  font-weight: 400;
  text-decoration: line-through;
  display: inline-block;
  margin-right: 5px;
}
.product-shopphai {
  text-align: right;
  color: #fbb72c;
  font-size: .700rem;
}
.product-shopphai a {
  display: inline-block;
  margin-left: 0px;
  color: #FF0099;
  transition: 0.3s;
  font-size: .700rem;
text-decoration: none;
}

.product-shopphai a:hover {
  color: #fbb72c;
}
.product-shoptrai {
  color: #fbb72c;
font-size: .700rem;
text-align: left;
}
.product-shoptrai a {
  display: inline-block;
  margin-left: 0px;
  color: #B1B1B1;
  transition: 0.3s;
  font-size: .700rem;
text-decoration: none;
}

.product-shoptrai a:hover {
  color: #fbb72c;
}
.product-diadiemtrai {
  text-align: left;
  color: #B1B1B1;
  font-size: .700rem;
  
}
.product-diadiemtrai a {
  display: inline-block;
  margin-left: 5px;
  color: #B1B1B1;
  transition: 0.3s;
  font-size: .700rem;
text-decoration: none;
}
.product-diadiemtrai a:hover {
  color: #fbb72c;
}
.product-diadiemphai {
  text-align: right;
color: #B1B1B1;
font-size: .700rem;
}
.product-diadiemphai a {
  display: inline-block;
  margin-left: 5px;
  color: #B1B1B1;
  transition: 0.3s;
  font-size: .700rem;
text-decoration: none;
}
.product-diadiemphai a:hover {
  color: #fbb72c;
}



/* 5. Cấu hình cho Điện thoại (2 cột) */
@media screen and (max-width: 768px) {
  .columnsanpham {
      width: 50% !important; /* 100% chia 2 */
  }
  
  .product-tumb {
      height: 140px !important; /* Thu nhỏ ảnh lại một chút trên mobile */
  }
  
  .product-card {
      min-height: 235px !important;
      margin-bottom: 3px !important;
  }

  .product-price {
      font-size: 15px !important;
  }
}

/* 2. Đảm bảo Quill không bao giờ rộng hơn */
.ql-container.ql-snow {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 3. Fix thanh công cụ Quill bị đẩy ngang */
.ql-toolbar.ql-snow {
  display: block !important; /* Dùng block thay vì flex để an toàn hơn trên mobile */
  word-wrap: break-word;
}

/* 4. Fix lỗi iOS tự động zoom gây tràn màn hình khi nhấn */
.ql-editor, input[type="text"], select {
  font-size: 16px !important; 
}

/* 5. Ép tất cả các phần tử bên trong không được vượt quá chiều rộng màn hình */
* {
  max-width: 100%;
  box-sizing: border-box;
}



.upload-wrapper {
max-width: 600px;
margin: 20px auto;
font-family: Arial, sans-serif;
}

.upload-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
border: 2px dashed #007bff;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
cursor: pointer;
}

.preview-area {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.preview-item {
position: relative;
}

.preview-item img {
width: 70px;
height: 70px;
object-fit: cover;
border: 1px solid #ccc;
border-radius: 4px;
}

.remove-btn {
position: absolute;
top: -6px;
right: -6px;
background: red;
color: white;
border: none;
border-radius: 50%;
font-size: 12px;
width: 20px;
height: 20px;
cursor: pointer;
}

.upload-btn {
background-color: #007bff;
color: white;
padding: 8px 12px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
text-align: center;
}

.submit-btn {
margin-top: 20px;
padding: 10px 20px;
background-color: green;
color: white;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
#imageUpload {
opacity: 0;
position: absolute;
z-index: -1;
}
/* Style cho trạng thái loading */
.btn-loading {
opacity: 0.7;
cursor: not-allowed;
position: relative;
}
.btn-loading:after {
content: " Đang xử lý...";
}

/* Container & Flexbox */
.product-detail-container {
    
  margin: 10px;
  background: #fff;
  padding: 10px;
border-radius: 15px;
  
}

.product-detail-flex {
  display: flex;
  gap: 30px;
}

/* Gallery hình ảnh */
.product-gallery { flex: 1; min-width: 0; }
.main-image { position: relative; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.main-image img { width: 100%; display: block; object-fit: contain; }
.image-count { position: absolute; bottom: 10px; right: 10px; background: #FF0000; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; }

.thumbnail-list { display: flex; gap: 10px; margin-top: 10px; }
.thumbnail-list img { width: 60px; height: 60px; border: 1px solid #ddd; cursor: pointer; border-radius: 4px; }
.thumbnail-list img.active { border-color: #d9534f; border-width: 2px; }

/* Thông tin sản phẩm */
.product-info { flex: 1.2; }
.product-title1 { font-size: 22px; color: #333; margin: 0 0 10px; font-weight: 600; }
.product-price1 { color: #d9534f; font-size: 24px; font-weight: bold; margin-bottom: 15px; }

.product-meta1 { color: #777; font-size: 14px; margin-bottom: 0px; border-bottom: 0px solid #eee; padding-bottom: 10px; }
.product-meta1 span { display: block; margin-bottom: 5px; }

.product-condition { background: #EFF7FE; padding: 10px; display: flex; justify-content: space-between; border-radius: 8px; margin-bottom: 5px; }

.product-description h3 { font-size: 18px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.desc-content { font-size: 15px; line-height: 1.6; color: #444; }

.giam {
color: white;
padding: 8px;
font-family: Arial;
background-color: #f44336;
font-size: .975rem;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* Seller Profile */
.seller-profile { border: 1px solid #eee; border-radius: 8px; margin-top: 20px; padding: 15px; }
.seller-info { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.avatar { width: 50px; height: 50px; background: #a6b9d8; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; }
.view-page { margin-left: auto; border: 1px solid #ddd; background: #fff; padding: 5px 15px; border-radius: 4px; }
.seller-stats { display: flex; border-top: 1px solid #eee; padding-top: 15px; text-align: center; }
.stat-item { flex: 1; font-weight: bold; font-size: 16px; border-right: 1px solid #eee; }
.stat-item:last-child { border-right: none; }
.stat-item span { display: block; font-weight: normal; font-size: 12px; color: #777; }

/* Thao tác dưới ảnh (PC) */
.image-actions-pc { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; }
.image-actions-pc button { flex: 1; padding: 10px; border: 1px solid #eee; background: #fff; border-radius: 4px; }

/* Hiệu ứng chuyển cảnh mượt mà cho ảnh chính */
#main-img {
  transition: all 0.3s ease;
  opacity: 1;
}
/* Thêm hiệu ứng khi ảnh đang được tải lại (tùy chọn) */
.main-image img {
  animation: fadeIn 0.3s;
}
.main-image a {
  cursor: zoom-in; /* Hiện biểu tượng kính lúp */
  display: block;
  width: 100%;
}

.main-image img:hover {
  opacity: 0.9;
  transition: 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0.7; }
  to { opacity: 1; }
}
/* Con trỏ chuột khi rê vào ảnh nhỏ */
.thumbnail-list img {
cursor: pointer;
  transition: transform 0.2s;
}

.thumbnail-list img:hover {
  opacity: 0.8;
  border-color: #d9534f;
transform: scale(1.05); /* Phóng nhẹ ảnh nhỏ khi rê vào */
}

/* Đảm bảo ảnh chính không bị méo */
.main-image {
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px; /* Độ cao tối thiểu để khung không bị nhảy */
}
/* ===========================================
 CSS CHO MOBILE (Mô phỏng soi_keo 155.jpg)
 =========================================== */
@media (max-width: 768px) {
  .product-detail-flex { flex-direction: column; gap: 0; }
  .product-detail-container { padding: 0; }
  
  .main-image { border-radius: 0; border: none; }
  .thumbnail-list { 
      display: flex; 
      overflow-x: auto; /* Cho phép lướt ngang danh sách ảnh nhỏ trên mobile */
      padding-bottom: 10px;
  }
  .image-actions-pc { display: flex; }

  .product-info { padding: 15px; }
  .product-title { font-size: 19px; }
  
  .seller-stats { flex-wrap: wrap; }
  .stat-item { flex: none; width: 33.33%; }
}

/* Container chứa các sản phẩm */
.product-containerloadtrai {
  display: flex !important; /* Ép buộc dùng flexbox */
  gap: 10px !important;
  overflow-x: auto !important; /* Bắt buộc cho phép tràn hàng ngang để cuộn */
  padding: 10px;
  width: 100%;
  
  /* Ẩn thanh cuộn để giao diện đẹp như app */
  scrollbar-width: none; 
}
.product-containerloadtrai::-webkit-scrollbar {
  display: none; 
}
/* Container chứa các sản phẩm */
.product-containerloadtrai1 {
  display: flex !important; /* Ép buộc dùng flexbox */
  gap: 10px !important;
  overflow-x: auto !important; /* Bắt buộc cho phép tràn hàng ngang để cuộn */
  padding: 10px;
  width: 100%;
  
  /* Ẩn thanh cuộn để giao diện đẹp như app */
  scrollbar-width: none; 
}
.product-containerloadtrai1::-webkit-scrollbar {
  display: none; 
}
/* Container chứa các sản phẩm */
.product-containerloadtrai2 {
  display: flex !important; /* Ép buộc dùng flexbox */
  gap: 10px !important;
  overflow-x: auto !important; /* Bắt buộc cho phép tràn hàng ngang để cuộn */
  padding: 10px;
  width: 100%;
  
  /* Ẩn thanh cuộn để giao diện đẹp như app */
  scrollbar-width: none; 
}
.product-containerloadtrai2::-webkit-scrollbar {
  display: none; 
}
/* Container chứa các sản phẩm */
.product-containerloadtrai3 {
  display: flex !important; /* Ép buộc dùng flexbox */
  gap: 10px !important;
  overflow-x: auto !important; /* Bắt buộc cho phép tràn hàng ngang để cuộn */
  padding: 10px;
  width: 100%;
  
  /* Ẩn thanh cuộn để giao diện đẹp như app */
  scrollbar-width: none; 
}
.product-containerloadtrai3::-webkit-scrollbar {
  display: none; 
}
/* Style cho từng thẻ sản phẩm */
.product-cardloadtrai {
  /* BỘ BA THUỘC TÍNH KHÓA CỨNG KÍCH THƯỚC (QUAN TRỌNG NHẤT) */
  width: 190px !important;
  min-width: 190px !important;
  flex-shrink: 0 !important; /* Thêm !important để chặn đứng mọi hành vi co nhỏ */
  
  box-sizing: border-box !important;
  
  /* Hiệu ứng load từ trái qua */
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 0.5s ease-out forwards;
}

/* Định nghĩa hiệu ứng */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hiệu ứng bậc thang (Staggered Effect) */
.product-cardloadtrai:nth-child(1) { animation-delay: 0.1s; }
.product-cardloadtrai:nth-child(2) { animation-delay: 0.2s; }
.product-cardloadtrai:nth-child(3) { animation-delay: 0.3s; }
.product-cardloadtrai:nth-child(4) { animation-delay: 0.4s; }
.product-cardloadtrai:nth-child(5) { animation-delay: 0.5s; }
.product-cardloadtrai:nth-child(6) { animation-delay: 0.6s; }
.product-cardloadtrai:nth-child(7) { animation-delay: 0.7s; }
.product-cardloadtrai:nth-child(8) { animation-delay: 0.8s; }
.product-cardloadtrai:nth-child(9) { animation-delay: 0.9s; }
.product-cardloadtrai:nth-child(10) { animation-delay: 1s; }
.product-cardloadtrai:nth-child(11) { animation-delay: 1.1s; }
.product-cardloadtrai:nth-child(12) { animation-delay: 1.2s; }
.product-cardloadtrai:nth-child(13) { animation-delay: 1.3s; }
.product-cardloadtrai:nth-child(14) { animation-delay: 1.4s; }
.product-cardloadtrai:nth-child(15) { animation-delay: 1.5s; }
.product-cardloadtrai:nth-child(16) { animation-delay: 1.6s; }
.product-cardloadtrai:nth-child(17) { animation-delay: 1.7s; }
.product-cardloadtrai:nth-child(18) { animation-delay: 1.8s; }
.product-cardloadtrai:nth-child(19) { animation-delay: 1.9s; }
.product-cardloadtrai:nth-child(20) { animation-delay: 2s; }
.product-cardloadtrai:nth-child(21) { animation-delay: 2.1s; }
.product-cardloadtrai:nth-child(22) { animation-delay: 2.2s; }
.product-cardloadtrai:nth-child(23) { animation-delay: 2.3s; }
.product-cardloadtrai:nth-child(24) { animation-delay: 2.4s; }
.product-cardloadtrai:nth-child(25) { animation-delay: 2.5s; }
.product-cardloadtrai:nth-child(26) { animation-delay: 2.6s; }
.product-cardloadtrai:nth-child(27) { animation-delay: 2.7s; }
.product-cardloadtrai:nth-child(28) { animation-delay: 2.8s; }
.product-cardloadtrai:nth-child(29) { animation-delay: 2.9s; }
.product-cardloadtrai:nth-child(30) { animation-delay: 3s; }
.product-cardloadtrai:nth-child(31) { animation-delay: 3.1s; }
.product-cardloadtrai:nth-child(32) { animation-delay: 3.2s; }
.product-cardloadtrai:nth-child(33) { animation-delay: 3.3s; }
.product-cardloadtrai:nth-child(34) { animation-delay: 3.4s; }
.product-cardloadtrai:nth-child(35) { animation-delay: 3.5s; }
.product-cardloadtrai:nth-child(36) { animation-delay: 3.6s; }
.product-cardloadtrai:nth-child(37) { animation-delay: 3.7s; }
.product-cardloadtrai:nth-child(38) { animation-delay: 3.8s; }
.product-cardloadtrai:nth-child(39) { animation-delay: 3.9s; }
.product-cardloadtrai:nth-child(40) { animation-delay: 4s; }
.product-cardloadtrai:nth-child(41) { animation-delay: 4.1s; }
.product-cardloadtrai:nth-child(42) { animation-delay: 4.2s; }
.product-cardloadtrai:nth-child(43) { animation-delay: 4.3s; }
.product-cardloadtrai:nth-child(44) { animation-delay: 4.4s; }
.product-cardloadtrai:nth-child(45) { animation-delay: 4.5s; }
.product-cardloadtrai:nth-child(46) { animation-delay: 4.6s; }
.product-cardloadtrai:nth-child(47) { animation-delay: 4.7s; }
.product-cardloadtrai:nth-child(48) { animation-delay: 4.8s; }
.product-cardloadtrai:nth-child(49) { animation-delay: 4.9s; }
.product-cardloadtrai:nth-child(50) { animation-delay: 5s; }

/* Khung chứa toàn bộ icon và badge */
.icon-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 5px;
}

/* Style cho icon chính (nếu cần) */
.main-icon {
  display: block;
  color: #333;
}

/* Chấm thông báo màu đỏ kèm dấu chấm than hoặc số */
.badgethongbao{
  position: absolute;
  top: -4px;          /* Đẩy lên phía trên góc (chỉnh số này để dịch lên/xuống) */
  right: -8px;        /* Đẩy sang bên phải góc (chỉnh số này để dịch trái/phải) */
  
  background-color: #ff3b30; /* Màu đỏ của thông báo */
  color: white;       /* Màu chữ bên trong */
  font-family: Arial, sans-serif;
  font-size: 11px;    /* Kích cỡ chữ/số */
  font-weight: bold;
  
  /* Tạo hình tròn hoàn hảo */
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  
  /* Căn chữ ra chính giữa chấm tròn */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Tạo viền trắng xung quanh giống hệt trong ảnh của bạn */
  border: 0px solid #ffffff; 
  
  /* Đổ bóng nhẹ cho chuyên nghiệp (tùy chọn) */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}


/* CSS để tạo layout icon đè lên ảnh đại diện */
.avatar-container {
  display: flex;
  align-items: center;
  gap: 15px;
}
.avatar-wrapper {
  position: relative;
  
  
}
/* Style cho nút bấm ẩn chọn file */
.avatar-action-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #7FAF01;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}
/* Style cho nút xóa ảnh */
.avatar-delete-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #FF3300;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #fff;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
  text-decoration: none !important;
}
.avatar-action-btn:hover { background: #669200; }
.avatar-delete-btn:hover { background: #FFFF00; color: #FF0000;}
#avatar-file-input { display: none; }

/* Container chính của Header Shop */
.shop-header {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 5px;
  border-radius: 0px 0px 10px 10px;
}

/* --- PHẦN ẢNH BÌA (COVER) --- */
.cover-container {
  position: relative;
  width: 100%;
  height: 315px; /* Chiều cao chuẩn tỉ lệ banner */
  background-color: #f0f2f5;
  overflow: hidden;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nút upload ảnh bìa góc phải giống Facebook */
.btn-upload-cover {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #050505;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background 0.2s;
}
.btn-upload-cover:hover {
  background: rgba(240, 240, 240, 1);
}

/* --- PHẦN THÔNG TIN & AVATAR ĐÈ LÊN --- */
.profile-container {
  position: relative;
  padding: 0 32px 20px 32px;
  display: flex;
  align-items: flex-end;
}

/* Khối Avatar di chuyển đè lên trên ảnh bìa */
.avatar-box {
  position: relative;
  width: 168px;
  height: 168px;
  margin-top: -100px; /* Đẩy ngược lên trên ảnh bìa */
  border: 5px solid #fff;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
}

.avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #FFFFFF; /* Màu xanh giống hình mẫu */
  color: #fff;
  font-size: 80px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nút upload ảnh đại diện (nếu bạn muốn làm giống FB hoàn toàn) */
.btn-upload-avatar {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #e4e6eb;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Phần bọc thông tin và stats */
.profile-info-wrapper {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  padding-top: 5px;
}

/* Tên shop và trạng thái */
.shop-name {
  font-size: 24px;
  font-weight: bold;
  color: #050505;
  margin: 0 0 5px 0;
}
.shop-status {
  font-size: 14px;
  color: #65676b;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dot-online {
  width: 8px;
  height: 8px;
  background-color: #7d7d7d; /* Màu xám như mẫu hoặc #45bd62 nếu online */
  border-radius: 50%;
}

/* Nút Chat Zalo */
.btn-chat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #ccd0d5;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #4b4f56;
  font-size: 14px;
}

/* Thống kê (Tin đăng, Đánh giá,...) */
.shop-stats {
  display: flex;
  align-items: center;
  gap: 30px;
  
}
.stat-item1 {
  text-align: center;
  border-right: 0px solid #e5e5e5;
  padding: 10px;
  background: #EFF7FE;
  border-radius: 8px;
}
.stat-item1:last-of-type {
  border-right: none;
}
.stat-count {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #1877f2;
}
.stat-label {
  font-size: 13px;
  color: #65676b;
  white-space: nowrap;
}

/* Nhóm nút Theo dõi / Chia sẻ */
.stat-action {
  display: flex;
  gap: 8px;
}
.shop-actions {
  display: flex;
  gap: 8px;           /* Khoảng cách giữa 2 nút */
  align-items: center;
}
.btn-share, .btn-follow {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #ccd0d5;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.btn-follow {
  font-weight: bold;
  color: #4b4f56;
}

@media (max-width: 768px) {

.cover-container {
  position: relative;
  width: 100%;
  height: 180px; /* Chiều cao chuẩn tỉ lệ banner */
  background-color: #f0f2f5;
  overflow: hidden;
  }
  /* Khung chứa chính dưới ảnh bìa */
  .profile-container {
      flex-direction: column;
      align-items: center;
      padding: 0 10px 12px 10px;
      position: relative;
  }

  /* 1. Thu nhỏ Avatar và đẩy nhẹ lên ảnh bìa (giữ khoảng 1/3 đè lên) */
  .avatar-box {
      width: 100px;
      height: 100px;
      margin-top: -50px; /* Nhấc nhẹ lên ảnh bìa */
      z-index: 5;
      position: relative;
  }
  .avatar-inner {
      font-size: 45px;
  }

  /* Khung wrapper */
  .profile-info-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-left: 0;
      padding-top: 0px; /* Tạo khoảng trống để không bị đè chữ */
  }

  /* 2. ĐƯA NÚT CHAT XUỐNG DƯỚI ẢNH BÌA (BÊN TRÁI AVATAR) */
  .shop-actions {
      position: absolute;
      top: 2px; 
      left: 15px;
      z-index: 10;
      
      display: flex;          /* Chuyển sang dạng flex */
      flex-direction: column; /* Ép các nút con xuống hàng */
      gap: 4px;               /* Khoảng cách giữa nút trên và nút dưới trên mobile */
  }
  .btn-chat {
      padding: 6px 14px;
      font-size: 13px;
      background: #fff;
      border: 1px solid #ccd0d5;
      border-radius: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  /* 3. ĐƯA NÚT THEO DÕI XUỐNG DƯỚI ẢNH BÌA (BÊN PHẢI AVATAR) */
  .stat-action {
      position: absolute;
      top: 3px; /* Cân bằng tọa độ với nút chat */
      right: 15px;
      z-index: 10;
  }
  .btn-follow {
      padding: 6px 14px;
      font-size: 13px;
      background: #fff;
      border: 1px solid #ccd0d5;
      border-radius: 6px;
      font-weight: bold;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .btn-share {
      display: none; /* Ẩn chia sẻ trên mobile */
  }

  /* Khối chứa tên và trạng thái dịch xuống dưới các nút */
  .shop-details {
      display: flex;
      flex-direction: column;
      align-items: center;
      order: 2;
      margin-top: 0px; /* Tạo khoảng cách an toàn với hàng nút bấm ở trên */
  }
  .shop-name {
      font-size: 18px;
      font-weight: bold;
      color: #050505;
      margin-bottom: 0px;
  }
  .shop-status {
      justify-content: center;
      font-size: 13px;
      margin-bottom: 5px;
  }

  /* Khối thống kê số liệu (Tin đăng, Đánh giá...) */
  .shop-stats {
      order: 3;
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
      background: #EFF7FE;
      padding: 10px 0;
      border-radius: 8px;
      gap: 0;
      margin-top: 0px;
  }
  .stat-item1 {
      flex: 1;
      border-right: 1px solid #e5e5e5;
      padding-right: 0;
      padding: 0px;
      
      border-radius: 0px;
  }
  .stat-item1:last-of-type {
      border-right: none;
  }
  .stat-count {
      font-size: 16px;
  }
  .stat-label {
      font-size: 12px;
  }
}


	  /* Thống Kê */		
.stats-grid1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 15px; }
    .stat-card { background: #fff; border-radius: 10px; padding: 15px; display: flex; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); border-left: 5px solid #ccc; transition: transform 0.2s ease; }
    .stat-card:hover { transform: translateY(-3px); }
    .card-products { border-left-color: #3498db; }
    .card-posts { border-left-color: #2ecc71; }
    .card-prod-views { border-left-color: #f1c40f; }
    .card-post-views { border-left-color: #e74c3c; }
    .card-icon { font-size: 28px; margin-right: 12px; opacity: 0.8; }
    .card-products .card-icon { color: #3498db; }
    .card-posts .card-icon { color: #2ecc71; }
    .card-prod-views .card-icon { color: #f1c40f; }
    .card-post-views .card-icon { color: #e74c3c; }
    .card-info h3 { font-size: 12px; color: #888; font-weight: 500; text-transform: uppercase; }
    .card-number { font-size: 20px; font-weight: 700; color: #2d3748; margin-top: 5px; }