:root {
	  --primary: #6366f1;
	  --primary-dark: #4f46e5;
	  --secondary: #f97316;
	  --text-dark: #1e293b;
	  --text-light: #f8fafc;
	  --bg-light: #f1f5f9;
	  --card-bg: #ffffff;
	  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  * {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  
  }
  
  body {
	margin-top: 8%;
	font-family: "Inclusive Sans", sans-serif;
	  /*background: linear-gradient(135deg, #F3ECDB, #F3ECDB);*/
	  
	  justify-content: center;
	  align-items: center;
	  
	  color: var(--text-dark);
	  line-height: 1.6;
	   background-color: #f5f5f7;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */
	
}
  
  .container {
	  display:inline-flex;
	  justify-content: center;
	  max-width: 1200px;
	  padding: 1rem;
	  perspective: 1000px;
  }
  
  .card {
	  position: relative;
	  width: 217px;
	  border-radius: 16px;
	  overflow: hidden;
	  background: var(--card-bg);
	  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	  transition: var(--transition);
	  transform-style: preserve-3d;
	  cursor: pointer;
	 
	  left: 5%;
	  
  }
  
  
  
  
  
  .card:hover {
	  transform: translateY(-15px) rotateX(5deg);
	  box-shadow: 0 20px 40px rgba(71, 85, 105, 0.15);
  }
  
  .card::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(
		  to right,
		  rgba(99, 102, 241, 0.8),
		  rgba(249, 115, 22, 0.8)
	  );
	  opacity: 0;
	  z-index: 1;
	  transition: opacity 0.5s ease;
  }
  
  .card:hover::before {
	  opacity: 0.05;
  }
  
  .card-photo {
	  position: relative;
	  overflow: hidden;
  }
  
  .card-photo img {
	  width: 100%;
	  height: 220px;
	  object-fit: cover;
	  transition: transform 0.8s ease;
	  filter: brightness(0.95);
  }
  
  .card:hover img {
	  transform: scale(1.08);
	  filter: brightness(1.05);
  }
  
  .card-photo::after {
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  height: 60px;
	  width: 100%;
	  background: linear-gradient(to top, var(--card-bg), transparent);
  }
  
  .card-content {
	  padding: 1.5rem;
	  position: relative;
	  z-index: 2;
	  overflow-y:inherit;
	  width: 100%;
	  height: 220px;
	  
  }
  
  .card h2 {
	  color: var(--text-dark);
	  font-weight: 600;
	  margin-bottom: 0.5rem;
	  font-size: 1rem;
	  transform: translateY(5px);
	  opacity: 0.9;
	  transition: var(--transition);
  }
  
  .card:hover h2 {
	  transform: translateY(0);
	  opacity: 1;
  }
  
  .card p {
	  color: #64748b;
	  font-size: 0.70rem;
	  margin-bottom: 1.5rem;
	  transform: translateY(5px);
	  opacity: 0.7;
	  transition: var(--transition);
	  transition-delay: 0.1s;
  }
  
  .card:hover p {
	  transform: translateY(0);
	  opacity: 1;
  }
  
  .read-more {
	  display: none;
  }
  
  .card:hover .read-more {
	  transform: translateY(0);
	  opacity: 1;
  }
  
  .read-more::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: -100%;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(
		  90deg,
		  rgba(255, 255, 255, 0.2),
		  rgba(255, 255, 255, 0)
	  );
	  transition: left 0.7s ease;
  }
  
  .read-more:hover {
	  background: var(--primary-dark);
	  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
	  transform: translateY(-2px);
  }
  
  .read-more:hover::before {
	  left: 100%;
  }
  
  .card-badge {
	  position: absolute;
	  top: 1rem;
	  right: 1rem;
	  background: var(--primary);
	  color: white;
	  font-size: 0.8rem;
	  padding: 0.4rem 0.8rem;
	  border-radius: 20px;
	  font-weight: 500;
	  z-index: 3;
	  transform: translateY(-5px);
	  opacity: 0;
	  transition: var(--transition);
  }
  
  .card:hover .card-badge {
	  transform: translateY(0);
	  opacity: 1;
  }
  
  .modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(15, 23, 42, 0.7);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 1000;
	  opacity: 0;
	  visibility: hidden;
	  transition: all 0.3s ease-in-out;
	  backdrop-filter: blur(5px);
  }
  
  .modal-overlay.active {
	  opacity: 1;
	  visibility: visible;
  }
  
  .modal {
	  background: white;
	  width: 90%;
	  max-width: 700px;
	max-height: 700px;
	  border-radius: 16px;
	  overflow-y: auto;
	  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	  transform: scale(0.9);
	  opacity: 0;
	  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
	  
  }
   
  .modal-overlay.active .modal {
	  transform: scale(1);
	  opacity: 1;
  }
  
  .modal-header {
	  position: relative;
	  height: 280px;
	  
  }
  
  .modal-header img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
  }
  
  .modal-header::after {
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  height: 100px;
	  width: 100%;
	  background: linear-gradient(to top, rgba(255, 255, 255, 1), transparent);
  }
  
  .modal-close {
	  position: absolute;
	  top: 1rem;
	  right: 1rem;
	  background: rgba(255, 255, 255, 0.8);
	  width: 36px;
	  height: 36px;
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  z-index: 10;
	  transition: all 0.3s ease;
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .modal-close:hover {
	  background: white;
	  transform: rotate(90deg);
  }
  
  .modal-close::before,
  .modal-close::after {
	  content: "";
	  position: absolute;
	  width: 18px;
	  height: 2px;
	  background: #1e293b;
	  border-radius: 1px;
  }
  
  .modal-close::before {
	  transform: rotate(45deg);
  }
  
  .modal-close::after {
	  transform: rotate(-45deg);
  }
  
  .modal-content {
	  padding: 2rem;
	  position: relative;
	  margin-top: -40px;
  }
  
  .modal-title {
	  font-size: 2rem;
	  font-weight: 600;
	  color: var(--text-dark);
	  margin-bottom: 1rem;
  }
  
  .modal-subtitle {
	  font-size: 1.1rem;
	  color: var(--primary);
	  margin-bottom: 1.5rem;
	  font-weight: 500;
  }
  
  .modal-text {
	  color: #475569;
	  line-height: 1.75;
	  margin-bottom: 2rem;
  }
  
  .modal-text p {
	  margin-bottom: 1rem;
  }
  
  .tag-list {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.5rem;
	  margin-bottom: 2rem;
  }
  
  .tag {
	  background: #f1f5f9;
	  color: #475569;
	  padding: 0.4rem 0.8rem;
	  border-radius: 6px;
	  font-size: 0.8rem;
	  font-weight: 500;
	  transition: all 0.3s ease;
  }
  
  .tag:hover {
	  background: #e2e8f0;
  }
  
  .modal-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 2rem 2rem;
  }
  
  .btn {
	  display: inline-block;
	  padding: 0.8rem 1.6rem;
	  border-radius: 8px;
	  text-decoration: none;
	  font-weight: 500;
	  transition: all 0.3s ease;
  }
  
  .btn-primary {
	  background: var(--primary);
	  color: white;
	  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  }
  
  .btn-primary:hover {
	  background: var(--primary-dark);
	  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
	  transform: translateY(-2px);
  }
  
  .btn-outline {
	  border: 1px solid #cbd5e1;
	  color: #64748b;
  }
  
  .btn-outline:hover {
	  background: #f8fafc;
	  border-color: #94a3b8;
  }
  
  .modal-share {
	  display: flex;
	  gap: 1rem;
  }
  
  .share-icon {
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  background: #f1f5f9;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  transition: all 0.3s ease;
	  cursor: pointer;
  }
  
  .share-icon:hover {
	  background: #e2e8f0;
	  transform: translateY(-2px);
  }
  
  @keyframes pulse {
	  0% {
		  transform: scale(1);
	  }
	  50% {
		  transform: scale(1.05);
	  }
	  100% {
		  transform: scale(1);
	  }
  }
  
  .pulse {
	  animation: pulse 2s infinite;
  }
  
  @keyframes fadeSlideUp {
	  from {
		  opacity: 0;
		  transform: translateY(30px);
	  }
	  to {
		  opacity: 1;
		  transform: translateY(0);
	  }
  }
  
  .fade-slide-up {
	  animation: fadeSlideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }
  
  @media (max-width: 768px) {
	  .container {
		  padding: 1rem;
	  }
  
	  .modal {
		  width: 95%;
	  }
  
	  .modal-header {
		  height: 200px;
	  }
  
	  .modal-footer {
		  flex-direction: column;
		  gap: 1rem;
	  }
  
	  .modal-share {
		  width: 100%;
		  justify-content: center;
	  }
  }
  
  .menu-bo-tron {
	  
	  
	  border-radius: 25px; /* Độ bo tròn của thanh menu */
	  display: inline-block; /* Để thanh menu co lại theo nội dung */
	  /* position: fixed; Cố định vị trí trên viewport */
	  bottom: 0; /* Đặt nó ở phía trên cùng */
	  
	
	  background-color: rgba(255, 255, 255, 0.144); /* Màu nền bán trong suốt để thấy hiệu ứng blur */
	  backdrop-filter: blur(10px); /* Điều chỉnh giá trị pixel để thay đổi độ mờ */
	  -webkit-backdrop-filter: blur(20px);
	  width: auto;
	}
  .menu-bo-tron ul {
	list-style: none; /* Loại bỏ dấu chấm mặc định của danh sách */
	padding: 0;
	margin: 0;
	display: flex; /* Sắp xếp các mục menu theo hàng ngang */
	width: auto;
  }
  
  .menu-bo-tron li {
	margin-right: 20px; /* Khoảng cách giữa các mục menu */
  }
  
  .menu-bo-tron li:last-child {
	margin-right: 0; /* Loại bỏ khoảng cách ở mục menu cuối cùng */
  }
  
  .menu-bo-tron a {
	text-decoration: none; /* Loại bỏ gạch chân mặc định của liên kết */
	color: #3d4b1e; /* Màu chữ */
	display:flex;
	padding: 8px 15px; /* Khoảng cách lề bên trong của mỗi mục menu */
	border-radius: 10px;   /* Độ bo tròn của từng mục menu */
  
  }
  
  .menu-bo-tron a:hover {
	background-color: #68bdc9; /* Màu nền khi di chuột qua */
  }
  <!--
  .style1 {font-size: xx-large}
  body,td,th {
	  color: #000000;
  }
  ul {
	  list-style-type: none; /* Loại bỏ dấu chấm đầu dòng */
	  padding: 0;
	  margin: 0;
	  display: flex; /* Để các mục menu nằm ngang (tùy chọn) */
  }
  
  li {
	  margin-right: 20px; /* Tạo khoảng cách giữa các mục (tùy chọn) */
  }
  
  li:last-child {
	  margin-right: 0; /* Loại bỏ khoảng cách ở mục cuối cùng (tùy chọn) */
  }
  
  .menu-bo-tron li a {
	  display: block; /* Biến thẻ a thành khối để có thể đặt kích thước và background */
	  text-indent: -9999px; /* Ẩn chữ bằng cách đẩy nó ra ngoài màn hình */
	  overflow: hidden; /* Ẩn phần chữ bị đẩy ra */
	  width: 30px; /* Đặt chiều rộng cho hình ảnh */
	  height: 30px; /* Đặt chiều cao cho hình ảnh */
	  background-repeat: no-repeat; /* Không lặp lại hình ảnh nền */
	  background-position: center center; /* Căn giữa hình ảnh nền */
	  background-size: contain; /* Đảm bảo hình ảnh vừa với kích thước thẻ a */
  }
  
  
  .icon-home {
	  background-image: url('/images/icon/用户.png'); /* Đường dẫn đến hình ảnh trang chủ */
  }
  
  .icon-vinhdanh {
	  background-image: url('/images/icon/冠军.png'); /* Đường dẫn đến hình ảnh bảng vinh danh */
  }
  
  .icon-lienhe {
	  background-image: url('/images/icon/评论.png'); /* Đường dẫn đến hình ảnh liên hệ */
  }
  
  .icon-gioithieu {
	  background-image: url('/images/icon/查看搜索.png'); /* Đường dẫn đến hình ảnh giới thiệu */
  }
  
  .icon-dangxuat {
	  background-image: url('/images/icon/我的.png'); /* Đường dẫn đến hình ảnh đăng xuất */
  }
  
  ul {
	  list-style-type: none;
	  padding: 0;
	  margin: 0;
	  display: flex; /* Để các mục menu nằm ngang */
  }
  
  li {
	  margin-right: 20px;
	  position: relative; /* Cần thiết cho định vị tooltip */
  }
  
  li:last-child {
	  margin-right: 0;
  }
  

  
  
  /* CSS cho tooltip */
  .tooltip .tooltiptext {
	  visibility: hidden;
	  width: 150px; /* Điều chỉnh chiều rộng tooltip */
	  background-color: #496e75;
	  color: #ffffff;
	  text-align: center;
	  border-radius: 30px;
	  padding: 5px;
	  position: absolute;
	  z-index: 1;
	  bottom: 125%; /* Hiển thị phía trên phần tử */
	  left: 0%;
	  margin-left: -75px; /* Căn giữa tooltip */
	  opacity: 0;
	  transition: opacity 0.3s ease-in-out;
  }
  
  .tooltip:hover .tooltiptext {
	  visibility: visible;
	  opacity: 1;
  }
  
  /* Thêm mũi tên (tùy chọn) */
  .tooltip .tooltiptext::after {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 0%;
	  margin-left: -5px;
	  border-width: 5px;
	  border-style: solid;
	  border-color: #497568 transparent transparent transparent;
  }
  
  #searchForm button[type="submit"] {
	 
	  border:hidden;
	  margin-left: 8px;
	background-color: #f5f5f7;
	  border-radius: 100px;
	  cursor: pointer;
	  width: 43px; /* Điều chỉnh chiều rộng nút cho vừa icon */
	  height: 43px; /* Điều chỉnh chiều cao nút cho vừa icon */
	  text-indent: -9999px; /* Ẩn chữ "Tìm kiếm" */
	  overflow: hidden; /* Ẩn phần chữ bị đẩy ra */
	  background-image: url('/images/icon/蚂蚁-面.png'); /* Đường dẫn đến hình ảnh của bạn */
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: contain; /* Đảm bảo toàn bộ icon hiển thị */
	  
  }
  #searchForm button[type="submit"]:hover {
	  transform: scale(1.2); /* Phóng to 1.2 lần khi di chuột qua */
  }
  #searchForm {
	  display: flex; /* Để căn chỉnh input và button trên cùng một hàng */
	  justify-content: center; /* Căn giữa các phần tử trong form */
	  align-items: center; /* Căn giữa theo chiều dọc */
	  border: 1px solid #00bcd4;
	  border-radius: 30px;
	  align-items: center;  
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
	  overflow: hidden;
	}

	/* ----- Filter Tag Styles ----- */
.filter-tags {
    padding: 10px 0;
    display: flex; /* Sử dụng flexbox */
    flex-wrap: wrap; /* Cho phép các nút xuống dòng nếu không đủ chỗ */
    justify-content: center; /* Căn giữa các nút */
    gap: 10px; /* Khoảng cách giữa các nút */
}

.filter-tag-button {
    padding: 8px 15px;
    border: 1px solid #00bcd4;
    background-color: transparent;
    color:  #00bcd4 ;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
     /* Đảm bảo font nhất quán */
}

.filter-tag-button:hover,
.filter-tag-button.active {
    background-color: #00bcd4 /*var(--primary)*/;
    color: white; /* Đổi màu chữ thành trắng khi active/hover */
}

/* CSS cho Dark Theme (Thêm vào cuối theme.css nếu muốn) */
body.dark-theme .filter-tag-button {
    border-color: var(--icon-fill); /* Màu border ở dark mode */
    color: var(--icon-fill); /* Màu chữ ở dark mode */
}

body.dark-theme .filter-tag-button:hover,
body.dark-theme .filter-tag-button.active {
    background-color: var(--icon-fill);
    color: #121212; /* Màu chữ khi active/hover ở dark mode */
}
/* ----------------------------- */

/* --- In tab.css --- */

/* Updated .modal-overlay styles for a smoother backdrop transition */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(15, 23, 42, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s 0.5s; /* Delay hiding visibility */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease; /* Transition in smoothly */
}

/* Updated .modal styles to define the transition and base state */
.modal {
	background: white;
	width: 90%;
	max-width: 700px;
	max-height: 90vh; /* Use vh for better responsiveness */
	border-radius: 16px;
	overflow-y: auto;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	
	/* Define the transition for the genie effect */
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;

	/* Set the initial (hidden) state */
	opacity: 0;
	transform: scale(0); /* Start fully scaled down */
}

/* New class to define the final, "open" state of the modal */
.modal.is-open {
	opacity: 1;
	/* The transform will be set to match the card's position initially by JS, 
	   then transition to this final state. */
	transform: scale(1) translate(0, 0);
}