/* ==========================================================================
   1. CSS Reset & Base Styles
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Tính toán padding và border vào kích thước hộp */
}

html {
  font-size: 16px; /* Đặt cỡ chữ gốc */
}

body {
  /* Font stack ưu tiên font hệ thống, dễ đọc */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.6; /* Khoảng cách dòng dễ đọc */
  background-color: #f8f9fa; /* Màu nền trang (xám rất nhạt) */
  color: #343a40; /* Màu chữ chính (xám đậm) */
  -webkit-font-smoothing: antialiased; /* Làm mịn font trên Webkit */
  -moz-osx-font-smoothing: grayscale; /* Làm mịn font trên Firefox */
}

/* Định dạng liên kết cơ bản */
a {
  color: #007bff; /* Màu xanh dương cho link */
  text-decoration: none; /* Bỏ gạch chân mặc định */
  transition: color 0.2s ease-in-out; /* Hiệu ứng chuyển màu nhẹ */
}

a:hover,
a:focus {
  color: #0056b3; /* Màu xanh dương đậm hơn khi hover */
  text-decoration: underline; /* Thêm gạch chân khi hover */
}

/* Đảm bảo ảnh không vượt quá khung chứa */
img {
  max-width: 100%;
  height: auto;
  display: block; /* Bỏ khoảng trắng thừa dưới ảnh */
}

/* ==========================================================================
   2. Typography (Kiểu chữ)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.8em; /* Khoảng cách phía trên */
  margin-bottom: 0.8em; /* Khoảng cách phía dưới */
  font-weight: 600; /* Đậm hơn một chút */
  line-height: 1.3;
  color: #212529; /* Màu tiêu đề đậm hơn */
}

/* Kích thước chữ cho các tiêu đề */
h1 { font-size: 2.1em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.15em; }

/* Khoảng cách dưới cho đoạn văn, danh sách, code block */
p, ul, ol, pre, blockquote {
  margin-bottom: 1.1em;
}

/* Thụt lề cho danh sách */
ul, ol {
  padding-left: 1.5em;
}

/* Định dạng cơ bản cho code */
code, pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* Font cho code */
  font-size: 0.9em;
  background-color: #e9ecef; /* Nền xám nhạt cho code */
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

pre {
  padding: 1em; /* Padding cho khối code */
  overflow-x: auto; /* Cho phép cuộn ngang nếu code dài */
}
pre code {
  background-color: transparent; /* Bỏ nền kép nếu code nằm trong pre */
  padding: 0;
  font-size: 1em; /* Giữ kích thước font trong pre */
}

/* ==========================================================================
   3. Main Layout (Grid Container - Tinh chỉnh)
   ========================================================================== */

.site-container {
  display: grid;
  /* Cột: Sidebar trái 240px, Nội dung chính tự dãn, Sidebar phải 220px */
  grid-template-columns: 240px 1fr 220px;
  grid-template-areas: "sidebar-left main-content sidebar-right";
  gap: 30px; /* Tăng khoảng cách giữa các cột */
  max-width: 1280px; /* Tăng chiều rộng tối đa */
  margin: 30px auto; /* Khoảng cách trên dưới và căn giữa */
  padding: 0 25px; /* Khoảng cách hai bên */
}

/* --- Gán khu vực --- */
.sidebar-left { grid-area: sidebar-left; }
.main-content-area { grid-area: main-content; }
.sidebar-right { grid-area: sidebar-right; }

/* ==========================================================================
   4. Column / Box Styling (Định dạng các cột)
   ========================================================================== */

/* Style chung cho các hộp nội dung */
.sidebar-left,
.main-content-area,
.sidebar-right {
  background-color: #ffffff; /* Nền trắng */
  padding: 25px; /* Padding bên trong */
  border-radius: 8px; /* Bo góc nhiều hơn */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); /* Đổ bóng nhẹ nhàng hơn */
}

/* ==========================================================================
   5. Sidebar Left & Navigation (Tinh chỉnh)
   ========================================================================== */

.sidebar-left .site-info .site-title {
  font-size: 1.7em; /* Tăng cỡ chữ tiêu đề site */
  margin-bottom: 8px;
  line-height: 1.2;
}

.sidebar-left .site-info .site-tagline {
  font-size: 0.9em;
  color: #6c757d;
  margin-bottom: 35px; /* Tăng khoảng cách dưới tagline */
}

/* Định dạng Menu dọc */
.sidebar-nav ul {
  list-style: none;
}

.sidebar-nav ul li {
  margin-bottom: 12px; /* Tăng khoảng cách giữa các mục menu */
}

.sidebar-nav ul li a {
  text-decoration: none;
  color: #495057;
  font-weight: 500; /* Chữ menu đậm vừa */
  display: block;
  padding: 6px 0; /* Tăng padding cho dễ click */
  transition: color 0.2s ease;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li a.active { /* Thêm class active sau này nếu cần */
  color: #007bff; /* Màu xanh khi hover */
}

/* ==========================================================================
   6. Main Content Area (Chưa style chi tiết)
   ========================================================================== */
/* Sẽ thêm style cho danh sách bài viết dạng card sau */


/* ==========================================================================
   7. Sidebar Right (Tinh chỉnh)
   ========================================================================== */
.sidebar-right {
  font-size: 0.9em;
  color: #495057;
}
.sidebar-right .widget {
  margin-bottom: 35px; /* Tăng khoảng cách giữa các widget */
}
.sidebar-right h4 {
  font-size: 1.05em; /* Tăng nhẹ cỡ chữ tiêu đề widget */
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6; /* Border rõ hơn chút */
  color: #495057;
}

/* ==========================================================================
   8. Footer Styling
   ========================================================================== */
.site-footer {
  text-align: center;
  margin-top: 50px;
  padding: 25px 0;
  font-size: 0.88em;
  color: #6c757d;
  border-top: 1px solid #dee2e6; /* Border rõ hơn */
}

/* ==========================================================================
   9. Responsive Styles (Giữ nguyên hoặc tinh chỉnh breakpoint)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .site-container {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "sidebar-left main-content"
      "sidebar-right main-content";
     max-width: 95%;
     gap: 25px; /* Đồng bộ gap */
  }
  .sidebar-right {
      margin-top: 25px; /* Đồng bộ gap */
   }
}

@media screen and (max-width: 768px) {
  .site-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sidebar-left"
      "main-content"
      "sidebar-right";
     gap: 25px;
     margin: 25px auto;
     padding: 0 15px;
  }
  .sidebar-left, .main-content-area, .sidebar-right {
    position: static;
    width: 100%;
    padding: 20px; /* Giảm padding trên mobile */
  }
   .sidebar-right, .main-content-area {
      margin-top: 0;
   }
   .sidebar-left .site-info { text-align: center; } /* Căn giữa thông tin site */
   .sidebar-nav ul { text-align: center; } /* Căn giữa menu */
   .sidebar-nav ul li { display: inline-block; margin: 5px 10px; } /* Menu ngang trên mobile */
}
/* ==========================================================================
   10. Sidebar Left & Navigation - Styling Details
   ========================================================================== */

/* --- Khu vực thông tin Site (Logo/Title/Tagline) --- */
.sidebar-left .site-info {
  padding-bottom: 20px; /* Khoảng cách dưới khu vực info */
  margin-bottom: 20px; /* Khoảng cách dưới đường kẻ */
  border-bottom: 1px solid #e9ecef; /* Thêm đường kẻ phân cách nhẹ */
  text-align: center; /* Thử căn giữa nếu không có logo */
}

/* Nếu sau này bạn thêm logo dạng ảnh */
.sidebar-left .site-info img.site-logo {
  max-width: 80px; /* Giới hạn kích thước logo */
  margin: 0 auto 15px auto; /* Căn giữa logo và tạo khoảng cách dưới */
  border-radius: 50%; /* Bo tròn nếu là logo tròn */
}

.sidebar-left .site-info .site-title {
  font-size: 1.4em; /* Giảm nhẹ cỡ chữ title */
  margin-bottom: 5px; /* Giảm khoảng cách dưới title */
  color: #343a40;
}

.sidebar-left .site-info .site-tagline {
  font-size: 0.85em;
  margin-bottom: 0; /* Bỏ khoảng cách dưới tagline */
  color: #6c757d;
}

/* --- Menu dọc Sidebar --- */
.sidebar-nav ul {
  /* Giữ list-style: none; từ phần CSS Base */
}

.sidebar-nav ul li {
  margin-bottom: 5px; /* Giảm khoảng cách giữa các mục menu */
}

.sidebar-nav ul li a {
  padding: 8px 15px; /* Thêm padding để vùng click lớn hơn */
  border-radius: 5px; /* Bo góc nhẹ cho link */
  display: flex; /* Sử dụng flex để căn chỉnh icon và text (nếu có icon sau này) */
  align-items: center; /* Căn giữa icon và text theo chiều dọc */
  font-weight: 500;
  color: #495057; /* Màu chữ menu gốc */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Hiệu ứng mượt */
}

/* Hiệu ứng khi rê chuột (Hover) */
.sidebar-nav ul li a:hover,
.sidebar-nav ul li a:focus {
  background-color: #eef2f7; /* Màu nền rất nhạt khi hover */
  color: #007bff; /* Đổi màu chữ khi hover */
  text-decoration: none; /* Đảm bảo không có gạch chân */
}

/* Style cho mục menu đang active (cần thêm class="active" vào thẻ <a> bằng Liquid sau này) */
.sidebar-nav ul li a.active {
  background-color: #ddeeff; /* Màu nền khác biệt cho mục active */
  color: #0056b3;
  font-weight: 600; /* Đậm hơn */
}

/* --- CSS chuẩn bị cho Icons (Nếu sau này bạn muốn thêm) --- */
.sidebar-nav ul li a i.menu-icon {
  margin-right: 10px; /* Khoảng cách giữa icon và chữ */
  width: 16px; /* Đặt chiều rộng cố định cho icon nếu cần căn chỉnh */
  text-align: center; /* Căn giữa icon nếu dùng icon font */
  color: #6c757d; /* Màu icon mặc định */
  transition: color 0.2s ease-in-out;
}

/* Đổi màu icon khi hover link cha */
.sidebar-nav ul li a:hover i.menu-icon,
.sidebar-nav ul li a:focus i.menu-icon,
.sidebar-nav ul li a.active i.menu-icon {
   color: inherit; /* Lấy màu của thẻ a (sẽ thành màu xanh) */
}
/* ==========================================================================
   11. Sidebar Left - Avatar & Menu Refinements
   ========================================================================== */

/* --- Khu vực Avatar / Info --- */
.sidebar-left .site-info {
  text-align: center; /* Căn giữa avatar, title, tagline */
  padding-bottom: 25px;
  margin-bottom: 25px;
}

.sidebar-left .site-avatar {
  margin-bottom: 15px;
}

.sidebar-left .avatar-img {
  max-width: 100px; /* Chỉnh kích thước avatar tối đa */
  border-radius: 50%; /* Bo tròn avatar */
  border: 3px solid #fff; /* Thêm viền trắng nhỏ */
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); /* Đổ bóng nhẹ cho avatar */
}

.sidebar-left .site-title {
  font-size: 1.5em; /* Có thể chỉnh lại */
  margin-bottom: 5px;
  display: block; /* Đảm bảo nó xuống dòng */
}

.sidebar-left .site-tagline {
  font-size: 0.9em;
  margin-bottom: 0;
}

/* --- Menu dọc - Tinh chỉnh --- */
.sidebar-nav ul li a {
  padding: 10px 15px; /* Tăng padding dọc */
  display: flex;
  align-items: center;
  color: #5a5a5a; /* Màu chữ hơi xám */
  font-weight: 500;
  border-radius: 6px; /* Bo góc nhiều hơn */
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li a:focus {
  background-color: #f1f3f5; /* Màu nền xám nhạt hơn khi hover */
  color: #343a40; /* Màu chữ đậm hơn khi hover */
  text-decoration: none;
}

/* Style cho mục menu đang active giống hình mẫu */
.sidebar-nav ul li a.active {
  background-color: #e9ecef; /* Màu nền xám đậm hơn cho active */
  color: #212529; /* Màu chữ đen cho active */
  font-weight: 600;
}

/* Icon trong menu */
.sidebar-nav ul li a i.menu-icon {
  margin-right: 12px; /* Khoảng cách icon và chữ */
  width: 18px; /* Đảm bảo icon đủ rộng */
  text-align: center;
  color: #868e96; /* Màu icon mặc định */
  font-size: 0.9em; /* Chỉnh cỡ icon nếu cần */
}

/* Đổi màu icon khi link active/hover */
.sidebar-nav ul li a:hover i.menu-icon,
.sidebar-nav ul li a:focus i.menu-icon,
.sidebar-nav ul li a.active i.menu-icon {
   color: inherit; /* Lấy màu của thẻ a cha */
}

/* --- Social Links (Ví dụ) --- */
.social-links {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.social-links a {
  color: #6c757d;
  margin: 0 8px;
  font-size: 1.2em;
}

.social-links a:hover {
  color: #007bff;
}
/* ==========================================================================
   13. Homepage Post Card Styling (Định dạng thẻ bài viết trang chủ)
   ========================================================================== */

.post-card-list {
  margin-top: 1.5em;
  /* CSS cho container nếu cần, ví dụ dùng Grid để chia cột card sau này */
}

.post-card {
  background-color: #ffffff; /* Nền trắng cho card */
  border: 1px solid #dee2e6; /* Viền xám rất nhạt */
  border-radius: 8px; /* Bo góc giống các cột */
  padding: 20px 25px; /* Padding bên trong card */
  margin-bottom: 30px; /* Khoảng cách giữa các card */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Đổ bóng rất nhẹ */
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; /* Hiệu ứng khi hover */
}

/* Hiệu ứng nhẹ khi hover card */
.post-card:hover {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   transform: translateY(-3px);
}

.post-card-header {
  margin-bottom: 15px; /* Khoảng cách dưới phần header của card */
}

.post-card-title {
  font-size: 1.35em; /* Cỡ chữ tiêu đề card */
  margin-top: 0;
  margin-bottom: 5px;
}

.post-card-title a {
  text-decoration: none;
  color: #343a40;
}

.post-card-title a:hover {
  color: #007bff;
  text-decoration: none; /* Bỏ gạch chân hover của link chung */
}

.post-card-meta {
  font-size: 0.8em; /* Cỡ chữ nhỏ hơn cho ngày tháng, category */
  color: #6c757d;
  margin-bottom: 15px; /* Khoảng cách dưới meta */
}

.post-card-meta a {
  color: #6c757d;
  text-decoration: none; /* Bỏ gạch chân link category */
  border-bottom: 1px dotted #999; /* Thêm gạch chân kiểu chấm */
}

.post-card-meta a:hover {
  color: #007bff;
  border-bottom-color: #007bff;
}

.post-card-excerpt {
  color: #495057; /* Màu chữ đoạn trích */
  font-size: 0.98em; /* Cỡ chữ đoạn trích */
  line-height: 1.7; /* Giãn dòng đoạn trích */
}

/* Xóa margin dưới của đoạn văn cuối cùng trong excerpt */
.post-card-excerpt p:last-child {
   margin-bottom: 0;
}

/* Optional: Footer for 'Read More' link */
/*
.post-card-footer {
  margin-top: 20px;
  text-align: right;
  font-size: 0.9em;
}
.post-card-footer a {
   font-weight: 600;
   color: #007bff;
}
.post-card-footer a:hover {
   color: #0056b3;
}
*/
/* ==========================================================================
   14. Homepage Section Heading Styling (Làm H2 to hơn VÀ ĐẬM)
   ========================================================================== */

.main-content-area > h2 {
  font-size: 2.1em;
  margin-top: 2.5em; /* Có thể chỉnh lại nếu cần */
  margin-bottom: 1em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #dee2e6; /* Màu border nhất quán hơn */
  color: #343a40;
  font-weight: 700; /* <--- THÊM DÒNG NÀY ĐỂ TÔ ĐẬM (hoặc dùng 'bold') */
}

/* Chỉnh lại margin-top cho H2 đầu tiên nếu nó quá sát phần trên */
.main-content-area > h2:first-of-type {
    margin-top: 1.5em; /* Có thể giảm bớt margin top cho H2 đầu tiên */
}
/* ==========================================================================
   15. Right Sidebar - Widget Content Styling (Recent Posts List)
   ========================================================================== */

/* Định dạng chung cho danh sách trong widget */
.widget ul {
  list-style: none; /* Bỏ dấu chấm đầu dòng */
  padding-left: 0; /* Bỏ padding mặc định */
  margin-bottom: 0; /* Bỏ margin dưới của ul */
}

/* Định dạng cho từng mục bài viết mới */
.widget-recent-posts ul li {
  margin-bottom: 10px; /* Khoảng cách giữa các bài viết */
  padding-bottom: 10px; /* Padding dưới trước khi có border */
  border-bottom: 1px dashed #e0e0e0; /* Đường kẻ đứt nét phân cách nhẹ */
}

/* Bỏ margin, padding, border cho mục cuối cùng */
.widget-recent-posts ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Định dạng link tiêu đề bài viết */
.widget-recent-posts ul li a {
  text-decoration: none;
  color: #343a40; /* Màu chữ gần giống màu chính */
  font-weight: 500; /* Đậm vừa */
  display: inline-block; /* Để không bị tràn nếu quá dài (cần thêm xử lý overflow nếu muốn) */
}

/* Hiệu ứng hover cho link */
.widget-recent-posts ul li a:hover {
  color: #007bff; /* Chuyển màu xanh khi hover */
}

/* Định dạng cho ngày đăng (nếu bạn bật lại span.post-date) */
.widget-recent-posts .post-date {
  display: block; /* Hiển thị ngày ở dòng riêng */
  font-size: 0.8em; /* Chữ nhỏ hơn */
  color: #6c757d; /* Màu xám */
  margin-top: 4px; /* Khoảng cách nhỏ với tiêu đề */
}

/* ==========================================================================
   16. Visual Refinements & Accent Colors
   ========================================================================== */

/* --- Làm nổi bật Menu Active hơn --- */
.sidebar-nav ul li a.active {
  background-color: #e2f0ff; /* Nền xanh nhạt hơn */
  color: #0056b3; /* Màu chữ xanh đậm */
  font-weight: 600;
  /* Thêm viền trái màu xanh */
  border-left: 3px solid #007bff;
  /* Điều chỉnh lại padding để không bị lệch do border */
  padding-left: 12px; /* 15px - 3px = 12px */
}
.sidebar-nav ul li a.active i.menu-icon {
   color: #0056b3; /* Icon cũng màu xanh đậm */
}

/* --- Nhấn mạnh thêm link hover trong nội dung chính --- */
.main-content-area a {
    /* Có thể thêm hiệu ứng khác nếu muốn */
}
.main-content-area a:hover {
    color: #0056b3;
}

/* --- Định dạng Tiêu đề Widget Sidebar Phải --- */
.sidebar-right h4 {
  color: #007bff; /* Cho tiêu đề widget màu xanh */
  border-bottom-color: #bce0ff; /* Màu border xanh nhạt hơn */
  font-weight: 600; /* Đậm hơn chút */
}

/* --- Thêm đường viền trên cho header (Ví dụ) --- */
/* .site-header {
  border-top: 3px solid #007bff;
} */

/* --- Thêm đường viền trên cho footer (Ví dụ) --- */
/* .site-footer {
  border-top-color: #dee2e6;
} */

/* --- Có thể thêm chút màu nền cho khu vực chính để tách biệt (Ví dụ) --- */
/*
body {
  background-color: #e9ecef; // Màu nền body xám hơn chút
}
.site-container {
   background-color: transparent; // Container chính trong suốt
}
.sidebar-left, .main-content-area, .sidebar-right {
    box-shadow: 0 1px 4px rgba(0,0,0,0.1); // Tăng nhẹ shadow nếu nền body tối hơn
}
*/

/* ==========================================================================
   16. Visual Refinements & Accent Colors (Tinh chỉnh giao diện)
   ========================================================================== */

/* --- Làm nổi bật Menu Active hơn --- */
.sidebar-nav ul li a.active {
  background-color: #e2f0ff; /* Nền xanh nhạt hơn */
  color: #0056b3; /* Màu chữ xanh đậm */
  font-weight: 600;
  border-left: 4px solid #007bff; /* Thêm viền trái màu xanh đậm */
  padding-left: 11px; /* 15px - 4px = 11px - Điều chỉnh padding để chữ không lệch */
}
.sidebar-nav ul li a.active i.menu-icon {
   color: #0056b3; /* Icon cũng màu xanh đậm */
}

/* --- Nhấn mạnh thêm link hover trong nội dung chính --- */
.main-content-area a:hover {
  color: #0056b3; /* Đảm bảo link hover có màu xanh đậm hơn */
  text-decoration: underline; /* Thêm gạch chân khi hover */
}

/* --- Định dạng Tiêu đề Widget Sidebar Phải nổi bật hơn --- */
.sidebar-right h4 {
  color: #007bff; /* Cho tiêu đề widget màu xanh */
  border-bottom: 2px solid #bce0ff; /* Border dày và nhạt hơn chút */
  font-weight: 600;
  padding-bottom: 8px;
  margin-bottom: 15px;
}

/* --- Thêm viền trên cho header để tách biệt --- */
.site-header .wrapper { /* Áp dụng cho div wrapper trong header */
  border-top: 4px solid #007bff; /* Thêm viền xanh dày trên cùng */
  padding-top: 15px; /* Thêm chút padding trên sau khi có border */
}

/* --- Style cho thẻ bài viết để có điểm nhấn --- */
.post-card {
  border-left: 4px solid #e9ecef; /* Thêm viền trái màu xám nhạt cho card */
  transition: border-left-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; /* Thêm transition cho border */
}

.post-card:hover {
   border-left-color: #007bff; /* Đổi màu viền trái khi hover card */
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   transform: translateY(-3px);
}

.post-card-title a:hover {
  text-decoration: none; /* Bỏ gạch chân cho tiêu đề card khi hover */
}

/* --- Có thể đổi màu nền body một chút nếu muốn --- */
/*
body {
  background-color: #eef2f7; // Thử màu nền khác nhẹ nhàng hơn
}
*/

/* ==========================================================================
   17. Homepage Post Card Styling (Định dạng thẻ bài viết trang chủ)
   ========================================================================== */

   .post-card-list {
    margin-top: 1.5em;
    /* CSS cho container nếu cần, ví dụ dùng Grid để chia cột card sau này */
  }
  
  .post-card {
    background-color: #ffffff; /* Nền trắng cho card */
    border: 1px solid #e9ecef; /* Viền xám rất nhạt */
    border-radius: 8px; /* Bo góc giống các cột */
    padding: 20px 25px; /* Padding bên trong card */
    margin-bottom: 30px; /* Khoảng cách giữa các card */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Đổ bóng rất nhẹ */
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; /* Hiệu ứng khi hover */
    border-left: 4px solid #e9ecef; /* Thêm viền trái màu xám nhạt cho card */
    transition: border-left-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; /* Thêm transition cho border */
  }
  
  /* Hiệu ứng nhẹ khi hover card */
  .post-card:hover {
     border-left-color: #007bff; /* Đổi màu viền trái khi hover card */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     transform: translateY(-3px);
  }
  
  .post-card-header {
    margin-bottom: 15px; /* Khoảng cách dưới phần header của card */
  }
  
  .post-card-title {
    font-size: 1.35em; /* Cỡ chữ tiêu đề card */
    margin-top: 0;
    margin-bottom: 5px;
  }
  
  .post-card-title a {
    text-decoration: none;
    color: #343a40;
  }
  
  .post-card-title a:hover {
    color: #007bff;
    text-decoration: none; /* Bỏ gạch chân hover của link chung */
  }
  
  .post-card-meta {
    font-size: 0.8em; /* Cỡ chữ nhỏ hơn cho ngày tháng, category */
    color: #6c757d;
    margin-bottom: 15px; /* Khoảng cách dưới meta */
  }
  
  .post-card-meta a {
    color: #6c757d;
    text-decoration: none; /* Bỏ gạch chân link category */
    border-bottom: 1px dotted #999; /* Thêm gạch chân kiểu chấm */
  }
  
  .post-card-meta a:hover {
    color: #007bff;
    border-bottom-color: #007bff;
  }
  
  .post-card-excerpt {
    color: #495057; /* Màu chữ đoạn trích */
    font-size: 0.98em; /* Cỡ chữ đoạn trích */
    line-height: 1.7; /* Giãn dòng đoạn trích */
  }
  
  /* Xóa margin dưới của đoạn văn cuối cùng trong excerpt */
  .post-card-excerpt p:last-child {
     margin-bottom: 0;
  }

  /* ==========================================================================
   18. Footer Styling (Refined - Tinh chỉnh lại)
   ========================================================================== */

.site-footer {
  background-color: #343a40; /* Nền footer màu xám đen */
  color: #adb5bd; /* Màu chữ xám nhạt */
  padding: 45px 0 25px 0; /* Padding trên dưới */
  margin-top: 50px;
  font-size: 0.9em;
  line-height: 1.7; /* Tăng line-height cho dễ đọc */
}

.site-footer .wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
}

/* Dùng Flexbox cho các cột footer */
.footer-columns {
  display: flex;
  flex-wrap: wrap; /* Cho phép xuống hàng */
  justify-content: space-between; /* Phân bố đều không gian */
  margin-bottom: 35px;
  gap: 20px; /* Khoảng cách giữa các cột khi wrap */
}

/* Định dạng chung cho mỗi cột */
.footer-col {
  flex: 1; /* Cho phép cột co giãn */
  padding: 0 15px; /* Khoảng cách padding ngang */
  margin-bottom: 25px; /* Khoảng cách dưới khi wrap */
  min-width: 220px; /* Chiều rộng tối thiểu */
}

/* Có thể điều chỉnh flex-basis nếu muốn độ rộng khác nhau rõ ràng */
/* .footer-col-1 { flex-basis: 30%; } */
/* .footer-col-2 { flex-basis: 20%; } */
/* .footer-col-3 { flex-basis: 35%; } */


.footer-col h3 {
  color: #ffffff;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px; /* Tăng khoảng cách dưới */
  padding-bottom: 10px;
  border-bottom: 1px solid #495057;
}

/* Reset list style và thêm khoảng cách */
.footer-col ul {
  list-style: none;
  padding-left: 0;
}
.footer-col ul li {
  margin-bottom: 12px; /* Tăng khoảng cách giữa các mục */
}

/* Định dạng Link và Icon trong danh sách */
.footer-col ul li a {
  color: #adb5bd;
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex; /* Dùng Flexbox để căn Icon và Text */
  align-items: center; /* Căn giữa theo chiều dọc */
  gap: 8px; /* Khoảng cách giữa Icon và Text */
}
.footer-col ul li a:hover,
.footer-col ul li a:focus {
  color: #ffffff;
  /* Bỏ underline khi hover để nhất quán */
}

/* Icon */
.footer-col ul li i.fa-fw { /* Dùng fa-fw để icon đều chiều rộng */
  /* margin-right: 10px; Không cần nữa vì đã dùng gap */
  font-size: 1.05em; /* Cỡ icon */
  color: #88929b; /* Màu icon xám hơn */
  /* vertical-align: middle; Không cần nữa vì đã dùng flex align-items */
  flex-shrink: 0; /* Không co icon lại */
}
.footer-col ul li a:hover i.fa-fw {
  color: #ffffff;
}

/* Form đăng ký (Giữ nguyên như trước nhưng có thể kiểm tra lại) */
.newsletter-form {
  display: flex;
  margin-top: 15px; /* Thêm khoảng cách trên */
}
.newsletter-form input[type="email"] {
  flex-grow: 1;
  padding: 9px 12px;
  border: 1px solid #495057;
  background-color: #495057;
  color: #adb5bd;
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  font-size: 0.9em;
}
.newsletter-form button {
  padding: 9px 15px;
  border: 1px solid #6c757d;
  background-color: #6c757d;
  color: #fff;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  font-size: 0.9em;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
 .newsletter-form button:hover:not(:disabled) {
     background-color: #5a6268;
     border-color: #5a6268;
 }
.newsletter-form input:disabled,
.newsletter-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Copyright */
.footer-copyright {
  text-align: center;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #495057;
  font-size: 0.85em;
  color: #868e96;
}

/* Responsive Footer Refined */
@media screen and (max-width: 860px) {
  .footer-columns {
    justify-content: flex-start;
  }
  .footer-col {
    flex-basis: calc(50% - 20px); /* ~2 cột, trừ đi gap */
    min-width: unset; /* Bỏ min-width để linh hoạt hơn */
  }
  .footer-col-2 {
      /* Có thể cho cột link chiếm ít hơn nếu cần */
  }
   .footer-col-3 {
       flex-basis: 100%; /* Cho form xuống hàng riêng sớm hơn */
       margin-top: 15px;
   }
}
@media screen and (max-width: 576px) {
   .footer-col {
    flex-basis: 100%; /* 1 cột */
    padding: 0;
    margin-bottom: 30px; /* Tăng khoảng cách khi xếp dọc */
  }
  .footer-col:last-child {
      margin-bottom: 0;
  }
  .footer-col h3 {
      margin-bottom: 15px;
  }
}

/* ==========================================================================
   19. Post Detail Page Styling (Định dạng nội dung bài viết)
   ========================================================================== */

/* Áp dụng cho thẻ article chứa bài viết (trong _layouts/post.html) */
.post {
  /* Có thể thêm padding/margin nếu layout default chưa đủ */
}

/* Định dạng phần header của bài viết (tiêu đề, ngày tháng, category) */
.post-header {
  margin-bottom: 35px; /* Tăng khoảng cách dưới header bài viết */
}

.post-title {
  font-size: 2.3em; /* Cỡ chữ tiêu đề bài viết lớn hơn */
  color: #212529;  /* Màu tiêu đề đậm */
  margin-bottom: 10px;
  line-height: 1.3;
}

.post-meta {
  font-size: 0.9em;
  color: #6c757d; /* Màu xám cho meta */
  margin-bottom: 25px; /* Khoảng cách dưới meta */
  display: block;
  border-bottom: 1px dashed #dee2e6; /* Thêm đường kẻ dưới meta */
  padding-bottom: 15px;
}
.post-meta a {
    color: #007bff; /* Link category màu xanh */
    text-decoration: none;
    border-bottom: 1px dotted #007bff;
}
 .post-meta a:hover {
    color: #0056b3;
    border-bottom-color: #0056b3;
 }

/* --- Định dạng cho Nội dung chính (sinh ra từ Markdown) --- */
.post-content {
  font-size: 1.05em; /* Cỡ chữ nội dung đọc lớn hơn chút */
  line-height: 1.75; /* Giãn dòng nhiều hơn cho dễ đọc */
  color: #343a40;
}

/* Định dạng các tiêu đề con (h2, h3...) bên trong bài viết */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-top: 2.2em; /* Khoảng cách trên nhiều hơn */
  margin-bottom: 1em;
  font-weight: 600;
  color: #212529;
}

.post-content h2 { font-size: 1.7em; padding-bottom: 0.4em; border-bottom: 1px solid #eee; }
.post-content h3 { font-size: 1.4em; }
.post-content h4 { font-size: 1.2em; }

/* Khoảng cách đoạn văn */
.post-content p {
  margin-bottom: 1.3em;
}

/* Danh sách trong bài viết */
.post-content ul,
.post-content ol {
  margin-bottom: 1.3em;
  padding-left: 2em; /* Thụt lề nhiều hơn */
}
 .post-content ul li,
 .post-content ol li {
   margin-bottom: 0.6em;
 }

/* Trích dẫn */
.post-content blockquote {
  border-left: 5px solid #007bff; /* Viền xanh dày hơn */
  padding: 10px 20px; /* Padding trong quote */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.3em;
  background-color: #f8f9fa; /* Nền xám nhẹ cho quote */
  color: #5a6268;
  font-style: italic;
  border-radius: 0 5px 5px 0; /* Bo góc nhẹ bên phải */
}
 .post-content blockquote p:last-child {
     margin-bottom: 0;
 }

/* Định dạng cơ bản cho Khối Code */
.post-content pre {
  background-color: #282c34; /* Nền tối cho code block */
  color: #abb2bf; /* Màu chữ sáng trên nền tối */
  border: none; /* Bỏ viền cũ */
  border-radius: 6px;
  padding: 1.2em 1.5em;
  overflow-x: auto;
  line-height: 1.5;
  font-size: 0.9em;
  margin-bottom: 1.5em; /* Tăng khoảng cách dưới */
}

.post-content pre code {
  background-color: transparent;
  padding: 0;
  font-size: 1em;
  color: inherit; /* Kế thừa màu từ <pre> */
  /* Để có syntax highlighting đẹp cần dùng thêm thư viện JS như Prism.js hoặc Highlight.js sau này */
}

/* Định dạng cho code inline (nằm trong đoạn văn) */
.post-content > p code,
.post-content > ul code,
.post-content > ol code,
.post-content > li code { /* Thêm li code */
     background-color: #eef2f7; /* Nền sáng hơn chút */
     padding: 0.2em 0.5em;
     font-size: 0.9em;
     border-radius: 4px;
     color: #343a40; /* Màu chữ thường */
     border: 1px solid #d6dce1; /* Thêm viền nhẹ */
}

/* ==========================================================================
   20. Right Sidebar - Tag Cloud Styling
   ========================================================================== */

   .widget-tags .tag-cloud {
    display: flex;
    flex-wrap: wrap; /* Cho phép tag xuống hàng */
    gap: 6px 8px; /* Khoảng cách dọc và ngang giữa các tag */
    padding-top: 5px; /* Khoảng cách nhỏ dưới tiêu đề widget */
  }
  
  .widget-tags .tag-link {
    display: inline-block;
    background-color: #e9ecef; /* Nền xám nhạt */
    padding: 4px 10px; /* Padding bên trong tag */
    border-radius: 4px; /* Bo góc */
    font-size: 0.88em; /* Cỡ chữ tag nhỏ hơn chút */
    color: #495057; /* Màu chữ */
    text-decoration: none;
    border: 1px solid #dee2e6; /* Thêm viền nhẹ */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  
  .widget-tags .tag-link:hover {
    background-color: #007bff; /* Nền xanh khi hover */
    color: #fff; /* Chữ trắng */
    border-color: #0056b3; /* Viền xanh đậm hơn */
  }
  
  /* Định dạng số lượng bài viết trong tag */
  .widget-tags .tag-link .tag-count {
    font-size: 0.9em; /* Nhỏ hơn tên tag */
    color: #6c757d; /* Màu xám */
    margin-left: 5px; /* Khoảng cách với tên tag */
    /* background-color: #fff; */ /* Có thể thêm nền trắng nhỏ nếu muốn */
    /* padding: 0 3px; */
    /* border-radius: 3px; */
  }
  
  .widget-tags .tag-link:hover .tag-count {
    color: #eee; /* Màu sáng hơn khi hover */
    /* background-color: transparent; */
  }

  /* ==========================================================================
   21. Archives Page Styling (archives.md)
   ========================================================================== */

.archive-list {
  margin-top: 1.5em;
}

.archive-group {
  margin-bottom: 3em; /* Khoảng cách giữa các nhóm năm */
}

.archive-year {
  font-size: 1.9em; /* Tiêu đề năm lớn */
  color: #343a40;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 0.3em;
  margin-bottom: 1.8em; /* Khoảng cách dưới tiêu đề năm */
}

.archive-month {
  font-size: 1.35em; /* Tiêu đề tháng */
  color: #495057;
  margin-bottom: 1em;
  margin-left: 15px; /* Thụt lề tiêu đề tháng */
  font-weight: 600;
}

.archive-posts-list {
  list-style: none;
  padding-left: 30px; /* Thụt lề danh sách bài viết */
}

.archive-posts-list li {
  margin-bottom: 12px; /* Khoảng cách giữa các bài viết */
  display: flex;
  align-items: baseline; /* Căn chỉnh ngày và tiêu đề */
}

.archive-post-date {
  display: inline-block;
  width: 25px; /* Chiều rộng cố định cho ngày */
  color: #868e96; /* Màu xám nhạt cho ngày */
  font-size: 0.9em;
  text-align: right;
  margin-right: 12px; /* Khoảng cách sau ngày */
  flex-shrink: 0; /* Không co ngày lại */
}

.archive-posts-list li a {
  /* Kế thừa style link chung */
  font-weight: 500; /* Đậm vừa cho tiêu đề bài viết */
}

/* ==========================================================================
   22. Categories Page Styling (Trang danh sách chủ đề)
   ========================================================================== */

  /* Định dạng danh sách danh mục */
.category-list {
  list-style: none; /* Bỏ dấu chấm đầu dòng */
  padding-left: 0;
  margin-top: 1.5em;
  display: grid; /* Sử dụng Grid Layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Tự động chia cột */
  gap: 20px; /* Khoảng cách giữa các ô danh mục */
}

.category-list-item {
  background-color: #ffffff; /* Nền trắng */
  border: 1px solid #e9ecef; /* Viền xám nhạt */
  border-radius: 6px; /* Bo góc */
  transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển động */
  border-left: 4px solid #e9ecef; /* Viền trái */
}

.category-list-item:hover {
  transform: translateY(-3px); /* Nâng nhẹ lên */
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08); /* Đổ bóng rõ hơn */
  border-left-color: #007bff; /* Đổi màu viền trái thành xanh */
}

.category-list-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  text-decoration: none;
  color: #343a40;
  font-weight: 600;
  font-size: 1.15em; /* Tăng kích thước chữ */
}

.category-list-item a:hover {
  color: #0056b3; /* Đổi màu chữ khi hover */
}

.category-post-count {
  font-size: 0.8em; /* Cỡ chữ nhỏ hơn */
  font-weight: 500; /* Đậm vừa */
  color: #fff; /* Chữ màu trắng */
  background-color: #6c757d; /* Nền màu xám */
  padding: 4px 10px; /* Padding trong huy hiệu */
  border-radius: 12px; /* Bo tròn thành hình viên thuốc */
  white-space: nowrap; /* Đảm bảo không xuống dòng */
  transition: background-color 0.2s ease; /* Hiệu ứng đổi màu nền */
}

.category-list-item:hover .category-post-count {
  background-color: #007bff; /* Nền màu xanh khi hover */
}

/* ----- Styling for Page Titles (e.g., H1 in main content) ----- */
.main-content-area > h1 {
  font-size: 2.4em; /* Tăng kích thước chữ */
  font-weight: 700; /* Tăng độ đậm */
  color: #343a40; /* Màu chữ đậm hơn (có thể đổi nếu muốn) */
  margin-top: 0.5em; /* Giảm khoảng cách trên nếu cần */
  margin-bottom: 1em; /* Tăng khoảng cách dưới */
  padding-bottom: 0.4em; /* Khoảng cách giữa chữ và đường kẻ dưới */
  border-bottom: 2px solid #007bff; /* Thêm đường kẻ chân màu xanh */
  display: inline-block; /* Cho đường kẻ chỉ dài bằng chữ */
}

   /* ----- Add Cyclic Colors to Category Items ----- */

   :root {
    --cat-color-1: #007bff; /* Blue */
    --cat-color-2: #28a745; /* Green */
    --cat-color-3: #ffc107; /* Yellow */
    --cat-color-4: #dc3545; /* Red */
    --cat-color-5: #6f42c1; /* Purple */
  }
  
  .category-list-item:nth-child(5n + 1) { border-left-color: var(--cat-color-1); }
  .category-list-item:nth-child(5n + 2) { border-left-color: var(--cat-color-2); }
  .category-list-item:nth-child(5n + 3) { border-left-color: var(--cat-color-3); }
  .category-list-item:nth-child(5n + 4) { border-left-color: var(--cat-color-4); }
  .category-list-item:nth-child(5n + 5) { border-left-color: var(--cat-color-5); }
  
  .category-list-item:nth-child(5n + 1):hover .category-post-count { background-color: var(--cat-color-1); }
  .category-list-item:nth-child(5n + 2):hover .category-post-count { background-color: var(--cat-color-2); }
  .category-list-item:nth-child(5n + 3):hover .category-post-count { background-color: var(--cat-color-3); color: #333; }
  .category-list-item:nth-child(5n + 4):hover .category-post-count { background-color: var(--cat-color-4); }
  .category-list-item:nth-child(5n + 5):hover .category-post-count { background-color: var(--cat-color-5); }

/* --- Language Selector Styling --- */
.language-selector {
  text-align: center; /* Căn giữa menu trong sidebar */
  margin-top: 20px; /* Tạo khoảng cách phía trên */
  margin-bottom: 10px; /* Tạo khoảng cách phía dưới */
}

.language-selector select {
  padding: 8px 15px; /* Tăng vùng chọn */
  font-size: 14px; /* Cỡ chữ vừa phải */
  border-radius: 5px; /* Bo góc để mềm mại hơn */
  border: 1px solid #ccc; /* Viền nhạt */
  background-color: #ffffff; /* Nền trắng */
  color: #495057; /* Màu chữ tối ưu */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Hiệu ứng chuyển động mượt */
}

.language-selector select:hover {
  background-color: #f8f9fa; /* Nền nhạt hơn khi hover */
  border-color: #007bff; /* Đổi màu viền */
}

.language-selector select:focus {
  border-color: #007bff; /* Viền xanh khi focus */
  outline: none; /* Loại bỏ outline mặc định */
}