html, body {
  margin: 0;
  height: 100%;
  background-color: #F0F4F9;  
  font-family: Arial, Helvetica, sans-serif;
}
/* 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;
  
    }
  }
/* 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;
}

.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;
}
.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;
}
.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;
  
}
/* 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-radius: 50%;
  border: 2px solid #FF676D;
  object-fit: cover;
}

/*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*/
.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: #ff6200; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linkcamdam {
  FONT-SIZE: 14px; COLOR: #ff6200; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linkcamdam:visited {
  FONT-SIZE: 14px; COLOR: #ff6200; FONT-FAMILY: Arial; TEXT-DECORATION: none
}
A.linkcamdam:hover {
  FONT-SIZE: 14px; COLOR: #005eff; 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;
}
.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: 5px;
  display: none;
  position: absolute;
  background-color: rgb(75, 117, 255);
  min-width: 160px;
  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 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 */
}