@font-face {
    font-family: "Minecraft";
    src: url("/public/fonts/minecraft.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
   }
   @font-face {
    font-family: "Mcten";
    src:
     url("/public/fonts/mcten.ttf") format("truetype"),
     url("/public/fonts/minecraft.otf") format("opentype");
   }

   /* --- THEME COLORS --- */
   :root {
    --background: rgb(23, 21, 22);
    --surface: #161b22;
    --border: #30363d;
    --primary: #2f81f7;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --shadow: rgba(0, 0, 0, 0.2);
    --border-color: rgb(255 55 22);
   }

   [data-theme="light"] {
    --background: #ffffff;
    --surface: #f0f2f5;
    --border: #d0d7de;
    --primary: #0969da;
    --text-primary: #1f2328;
    --text-secondary: #57606a;
    --shadow: rgba(0, 0, 0, 0.1);
   }

   /* --- ANIMATIONS --- */
   @keyframes fadeInSlideUp {
    from {
     opacity: 0;
     transform: translateY(10px);
    }
    to {
     opacity: 1;
     transform: translateY(0);
    }
   }
   @keyframes slide {
    from {
     opacity: 0;
     transform: translateX(20px);
    }
    to {
     opacity: 1;
     transform: translateX(0);
    }
   }
   @keyframes slideRevert {
    from {
     opacity: 0;
     transform: translateX(-20px);
    }
    to {
     opacity: 1;
     transform: translateX(0);
    }
   }
   @keyframes zoomOut {
    0% {
     opacity: 0;
     transform: scale(0.2);
    }
    80% {
     opacity: 0.8;
     transform: scale(1.05);
    }
    100% {
     opacity: 1;
     transform: scale(1);
    }
   }

   /* --- Base & Layout --- */
   * {
    box-sizing: border-box;
   }

   body {
    font-family: "Manrope", sans-serif;
    background-attachment: fixed;
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
     url("/public/assets/mc_wallpaper_3.jpg");
    color: var(--text-primary);
    margin: 0;
    font-size: 16px;
    transition:
     background-color 0.3s ease,
     color 0.3s ease;
    min-height: 100vw;
    overflow-x: hidden;
    overflow-anchor: none;
   }

   .container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    
   }

   /* --- Header & Theme Switcher --- */
   .site-header {
    padding: 100px 0 0;
    text-align: center;
    position: relative;
   }
   .site-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    font-family: "Mcten", Sans-Serif;
   }
   .site-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
   }
/* Chọn đứa con đầu tiên trong header (chính là thẻ h1) */
   .site-header > *:nth-child(1) {
     animation: fadeInSlideUp 1s forwards;
     animation-delay: 0.5s; /* Chờ 0.5s rồi mới chạy */
     opacity: 0; /* Ẩn mặc định để chờ animation */
   }

   /* Chọn đứa con thứ hai trong header (chính là thẻ p) */
   .site-header > *:nth-child(2) {
     animation: fadeInSlideUp 1s forwards;
     animation-delay: 0.8s; /* Chờ lâu hơn xíu mới chạy */
     opacity: 0;
   }

   .theme-switcher {
    position: absolute;
    top: 24px;
    right: 24px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
   }
   .theme-switcher:hover {
    border-color: var(--primary);
    color: var(--primary);
   }
   .theme-switcher svg {
    width: 20px;
    height: 20px;
   }
   #icon-sun {
    display: none;
   }
   [data-theme="light"] #icon-moon {
    display: none;
   }
   [data-theme="light"] #icon-sun {
    display: block;
   }

   /* --- Controls Bar (Tabs, Search, Filter) --- */
   .controls-bar {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    transition:
     background-color 0.3s ease,
     border-color 0.3s ease;
   }

   #tabButtons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
   }
   #tabButtons a {
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    width: 50%;
    color: var(--text-secondary);
    background-color: var(--background);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
   }
   #tabButtons a:hover {
    background-color: rgba(139, 148, 158, 0.1);
    color: var(--text-primary);
   }
   #tabButtons a.active {
    color: #2ff76d;
    background-color: rgb(47 247 81 / 15%);
    border: #2ff76d;
    border-width: 2px;
    border-style: solid;
    font-weight: bold;
   }

   #searchAndCategoryContainer form {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
   }
   #searchInput,
   #categoryDropdown {
    background-color: var(--background);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 1rem;
    width: 100%;
    transition: all 0.2s ease;
   }
   #categoryDropdown {
    width: 50%;
   }
   #searchInput:focus,
   #categoryDropdown:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
   }

   /* --- Main Content Grid --- */
   #cardsContainer {
    padding: 32px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
   }

   .card-article {
    -webkit-tap-highlight-color: transparent; /* Tắt overlay xanh của Chrome/Safari */
    -webkit-user-select: none; /* Ngăn chọn text vô tình */
    display: flex;
    flex-direction: column;
    padding: 7.5px;
    text-decoration: none;
    
    color: #e6edf3;
    opacity: 0;
    transform: scale(0.2);
    animation: fadeInSlideUp 0.5s ease-out forwards;
    animation-delay: .5s;
    position: relative;
    overflow: visible;
    border: 2px solid rgb(30 30 30);
    border-radius: 0;
    background: rgb(60 61 65);
    image-rendering: pixelated;
    box-shadow:
     inset 0 -4px 0 0 rgb(49 50 52),
     inset -2px -6px 0 0 rgba(90, 91, 93, 0.8),
     inset 2px 2px 0 0 rgba(109, 109, 109, 1);
    transition:
     transform 0.15s ease,
     filter 0.2s ease;
   }


   .card-article::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 48px
     ),
     repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 38px
     );

    pointer-events: none;
    z-index: 0;
   }

   /* BỎ glow bằng ::after để tránh chồng lên viền */
   /* Thay bằng drop-shadow filter khi hover để glow luôn nằm phía ngoài, không che viền */
   .card-article:hover {
    filter: brightness(1.05) drop-shadow(0 0 3px rgba(255, 224, 90, 1))
     drop-shadow(0 0 16px rgba(255, 210, 90, 0.5));
    transform: translateY(-2px);
   }



   .card-thumbnail {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--background);
   }
   .card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid rgb(30 30 30);
   }
   .card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    flex-grow: 1;
   }
   .card-title {
    font-family: "minecraft", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    margin-top: 1px;
    line-height: 1.4;
    height: 2.8em; /* 2 lines */
    text-align: left;
    overflow: hidden;
    color: var(--text-primary);
   }
   .card-badge {
    opacity: 0.5;
    position: absolute;
    right: 8px;
    bottom: 8px;
    text-transform: uppercase;
    border: 1px solid rgba(249, 115, 22, 0.3);
    background-color: rgba(249, 115, 22, 0.2);
    color: rgb(251, 146, 60);

    padding: 4px; /* py-1 px-3 */
    display: flex; /* flex */

    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 4px; /* items-center */
    width: 40%;
    height: 25px;
   }

   .card-article:hover .card-badge {
    opacity: 1;
   }
   .card-article:hover .card-author {
    opacity: 1;
   }
   .card-badge span {
    font-size: 0.6rem;
    font-family: "Mcten", Sans-Serif; /* text-sm */
    position: relative;
    top: 1px;
    line-height: 20px;
    font-weight: 100;
   }

   .card-author {
    opacity: 0.5;
    color: #ffffff80;
    padding-top: 3px;
    font-family: "minecraft", sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    margin: 0;
    line-height: 1;
    height: 1.5em; /* 2 lines */
    text-align: left;
    overflow: hidden;
   }
   .meta-text {
    font-family: "minecraft", Sans-Serif;
    border: #ffffff50 0.5px solid;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 0.4rem;
    font-weight: 100;
    opacity: 0;
    animation: fadeInSlideUp 0.5s forwards;
    animation-delay: 1.1s;
   }
   .card-meta {
    position: absolute;

    bottom: 5px;
    right: 5px;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    width: calc(100% - 10px);
    gap: 5px;
    z-index: 1;
    opacity: 1;
    
   }

   /* --- Pagination --- */
   #pagination {
    display: flex;
    justify-content: center;
    padding: 16px 0 48px 0;
    gap: -2px;
   }
   #pagination a {
    -webkit-tap-highlight-color: transparent; /* Tắt overlay xanh của Chrome/Safari */
    -webkit-user-select: none; /* Ngăn chọn text vô tình */
    display: flex;
    flex-direction: column;
    padding: 8px;
    text-decoration: none;
    color: #e6edf3;
    animation: fadeInSlideUp 1.5s ease-out forwards;
    opacity: 0;
    position: relative;
    overflow: visible;
    border: 1px solid rgb(30 30 30);
    border-radius: 0;
    background: rgb(60 61 65);
    image-rendering: pixelated;
    box-shadow:
     inset 0 -4px 0 0 rgb(49 50 52),
     inset -2px -6px 0 0 rgba(90, 91, 93, 0.8),
     inset 2px 2px 0 0 rgba(109, 109, 109, 1);
   }
   #pagination span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
   }
   #pagination a:hover {
    color: var(--primary);
    
     
   }
   #pagination a[aria-current="page"] {
    font-weight: bold;
    -webkit-tap-highlight-color: transparent; /* Tắt overlay xanh của Chrome/Safari */
    -webkit-user-select: none; /* Ngăn chọn text vô tình */
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 8px;
    text-decoration: none;
    opacity: 0;
    position: relative;
    overflow: visible;
    border: 2px solid rgb(30 30 30);
    border-radius: 0;
    background: rgb(35 35 35);
    image-rendering: pixelated;
    box-shadow:
     inset -2px -2px 0 0 rgba(90, 91, 93, 0.8),
     inset 2px 2px 0 0 rgba(109, 109, 109, 1);

    color: #fff;
   }
   #pagination span {
    background: transparent;
    border-color: transparent;
   }

   /* --- Footer --- */
/* === FIX CONTRAST FOOTER === */

   /* --- Responsive --- */
   @media (min-width: 640px) {
    #searchAndCategoryContainer form {
     flex-direction: row;
    }
    #categoryDropdown {
     width: 200px;
    }
    #cardsContainer {
     grid-template-columns: repeat(3, 1fr);
    }
   }

   @media (min-width: 768px) {
    #cardsContainer {
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
    }
   }
   @media (min-width: 1024px) {
    #cardsContainer {
     grid-template-columns: repeat(4, 1fr);
    }
   }

   @media (min-width: 1280px) {
    #cardsContainer {
     grid-template-columns: repeat(5, 1fr);
    }
   }

   .card-title {
    color: #f0f0f0 !important;
    text-shadow: 0 2px 0 #000;
   }
   .card-author,
   .card-info {
    color: #bcbcbc !important;
   }

   .toolbar {
     
     padding: 5px 10px;
     width: fit-content;
     position: fixed;
     bottom: 15px;
     right: 0;
     left: 0;
     margin: 0 auto;
     background: rgb(72 73 75);
     border: 2px solid rgb(30 30 30);
     height: 60px;
     z-index: 11;
     image-rendering: pixelated;
     box-shadow:
     inset -2px 0 0 0 rgba(50, 51, 53, 1),
     inset 0 -2px 0 0 rgba(35, 37, 36, 1),
     inset 2px 2px 0 0 rgba(109, 109, 109, 1);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     opacity: .8;
   }
   .toolbar:hover {
     opacity: 1;
   }
     
    .toolbar svg {
      width: 22px;
      height: 22px;
      fill: white;
      flex-shrink: 0;
      display: block;
    }

    .toolbar-textbox {
      width: 85%;
      padding: 5px 5px;
      background: rgb(49 50 52);
      height: 45px;
      display: flex;
      align-items: center;
      border: 2px solid rgb(30 30 30);
      box-shadow: inset 0 3px 0 0 rgba(36, 36, 36, 1);
      flex-shrink: 0;
    }
    .toolbar-textbox svg {
      width: 22px;
      height: 22px;
      fill: rgb(100 100 100);
      flex-shrink: 0;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .textbox-field {
      background: transparent;
      outline: none;
      border: none;
      width: 100%;
      height: 100%;
      flex-grow: 1;
      color: white;
      font-family: "Minecraft", Sans-Serif;
      font-size: 0.75rem;
    }
    .toolbar-textbox:focus-within svg {
      opacity: 0;
      width: 0;
      transform: translateX(-10px);
    }
    .toolbar-textbox:focus-within .textbox-field {
      
   }
   /* Wrapper để định vị */
/* 1. Lớp vỏ ngoài cùng: Chỉ định vị và kích thước */
.category-group {
  position: relative;
  width: 45px;  /* Chiều rộng bằng ô input bên cạnh */
  height: 45px; /* Chiều cao bằng ô input bên cạnh */
  margin-left: 5px; /* Cách ô input ra một chút */
}

/* 2. Lớp giữa (Cái nút thực sự): Dùng Flex để căn SVG vào tâm tuyệt đối */
.category-trigger {
  width: 100%;
  height: 100%;
  display: flex;           /* Bắt buộc dùng Flex ở đây */
  align-items: center;     /* Căn giữa dọc */
  justify-content: center; /* Căn giữa ngang */
  cursor: pointer;
  
  /* Màu nền test của bạn (sau này xóa đi) */
  /* background: red; */ 
}

/* 3. Lớp trong cùng (Icon SVG): Reset lề */
.category-trigger svg {
  width: 24px;    /* Kích thước icon */
  height: 24px;
  display: block; /* Quan trọng: Tránh lỗi khoảng trắng dòng kẻ (baseline) */
  margin: 0;      /* Xóa sạch lề thừa nếu có */
  flex-shrink: 0; /* Không cho icon bị méo */
  
  transition: transform 0.2s ease, fill 0.2s ease;
}

/* --- Các phần hiệu ứng hover/open giữ nguyên --- */
.category-group.open .category-trigger svg {
  fill: var(--primary, #2f81f7);
  transform: scale(1.1);
}

/* Menu thả lên (Drop-up) */
.category-dropdown {
  position: absolute;
  bottom: 160%; /* Đẩy lên trên toolbar (100% là sát mép, 160% là cách ra 1 chút) */
  right: -10px; /* Căn chỉnh lùi về bên phải một chút cho đẹp */
  
  background: rgb(35, 35, 35);
  border: 2px solid rgb(60, 60, 60);
  border-radius: 4px;
  padding: 5px;
  list-style: none;
  margin: 0;
  min-width: 160px;
  
  /* Hiệu ứng bóng đổ và pixelated */
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  image-rendering: pixelated;
  
  /* Ẩn mặc định */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Mũi tên nhỏ chỉ xuống (Optional) */
  z-index: 100;
}

/* Trạng thái hiện menu */
.category-group.open .category-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Các item trong menu */
.category-dropdown li a {
  display: block;
  padding: 8px 12px;
  color: #e6edf3;
  text-decoration: none;
  font-family: "Mcten", sans-serif;
  font-size: 0.9rem;
  border-radius: 2px;
  transition: background 0.2s;
}

.category-dropdown li a:hover {
  background-color: rgb(60, 60, 60);
  color: var(--primary, #2f81f7);
}

.category-dropdown li a.active {
  color: var(--primary, #2f81f7);
  font-weight: bold;
  background: rgba(47, 129, 247, 0.1);
}