/*
Theme Name: ThemeBlog
Theme URI: https://github.com/BeHaoCute/Theme-Blog.git
Author: Phạm Gia Hào & Phạm Phú Trọng
Author URI: https://github.com/BeHaoCute
Description: Đây là một theme chủ đề blog đơn giản phục vụ cho mục đích học tập và sẽ không dùng cho mục đích thương mại. Theme hiện đã hoàn chỉnh nhưng vẫn còn nhiều thiếu sót.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: themeblog
Tags: blog, theme
*/

a {
  color: #5a5a5a !important;
}
a:hover {
  color: #000 !important;
}
body.dark a {
  color: #ccc !important;
}
body.dark a:hover {
  color: #fff !important;
}

/* button dark/light */
.theme-checkbox {
  --toggle-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 3em;
  height: 1.5em;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(50%, #efefef),
      color-stop(50%, #2a2a2a)
    )
    no-repeat;
  background: -o-linear-gradient(left, #efefef 50%, #2a2a2a 50%) no-repeat;
  background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat;
  background-size: 205%;
  background-position: 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  border-radius: 99em;
  position: relative;
  cursor: pointer;
  font-size: var(--toggle-size);
}

.theme-checkbox::before {
  content: "";
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(50%, #efefef),
      color-stop(50%, #2a2a2a)
    )
    no-repeat;
  background: -o-linear-gradient(left, #efefef 50%, #2a2a2a 50%) no-repeat;
  background: linear-gradient(to right, #efefef 50%, #2a2a2a 50%) no-repeat;
  background-size: 205%;
  background-position: 100%;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.theme-checkbox:checked::before {
  left: calc(100% - 1em - 0.2em);
  background-position: 0;
}

.theme-checkbox:checked {
  background-position: 100%;
}

/* Đảm bảo toàn trang chiếm đủ chiều cao */
html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #fff;
  color: #000;
  transition: background 0.3s, color 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body.dark {
  background: #121212;
  color: #eee;
}

/* Header */
.header-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 30px auto 0;
  padding: 10px 20px;
}

.avatar img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
}

.main-nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.menu-list {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list li a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  color: #5a5a5a;
}

body.dark .menu-list li a {
  color: #ccc;
}

.menu-list li a:hover {
  color: #000;
}

body.dark .menu-list li a:hover {
  color: #fff;
}

/* Main content */
.site-main {
  flex: 1 0 auto;
  padding: 40px 20px;
}

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  text-transform: uppercase;
}

body.dark .page-title {
  color: #fff;
}

.page-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
}

body.dark .page-description {
  color: #aaa;
}

/* Posts list */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.post-item {
  display: flex;
  gap: 20px;
  text-align: left;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  transition: background 0.3s;
}

body.dark .post-item {
  background: #2a2a2a;
}

.post-thumbnail img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.post-content {
  flex: 1;
}

.post-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.post-title a {
  color: #000;
  text-decoration: none;
}

body.dark .post-title a {
  color: #fff;
}

.post-title a:hover {
  color: #1e90ff;
}

.post-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

body.dark .post-meta {
  color: #aaa;
}

.post-meta .post-date,
.post-meta .post-author {
  margin-right: 15px;
}

.post-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

body.dark .post-excerpt {
  color: #ccc;
}

.read-more {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #1e90ff;
  text-decoration: none;
}

/* .read-more:hover {
    text-decoration: underline;
} */

/* Pagination */
.pagination {
  margin-top: 40px;
  text-align: center;
}

.pagination a,
.pagination span {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px;
  /* color: #1e90ff; */
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
}

body.dark .pagination a,
body.dark .pagination span {
  border-color: #444;
}

.pagination a:hover {
  color: #fff;
}

.pagination .current {
  background: #5a5a5a;
  color: #fff;
}

/* Footer */
.site-footer {
  flex-shrink: 0;
  /* background: #f8f9fa; */
  padding: 30px 20px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* body.dark .site-footer {
    background: #2a2a2a;
    color: #ccc;
} */

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-menu-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  justify-content: center;
}

.footer-menu-list li {
  margin: 0 15px;
}

.footer-menu-list li a {
  text-decoration: none;
  color: #5a5a5a;
}

body.dark .footer-menu-list li a {
  color: #ccc;
}

.footer-menu-list li a:hover {
  color: #000;
}

body.dark .footer-menu-list li a:hover {
  color: #fff;
}

body.dark .toggle-label {
  background-color: #666;
}

body.dark .toggle-label::before {
  transform: translateX(20px);
}

body .toggle-label::before {
  transform: translateX(2px);
}

/* Single */
.single-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: left;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

.post-title {
  font-size: 36px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  text-transform: uppercase;
}

body.dark .post-title {
  color: #fff;
}

.post-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

body.dark .post-meta {
  color: #aaa;
}

.post-meta .post-date,
.post-meta .post-author {
  margin-right: 0;
}

.post-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

body.dark .post-content {
  color: #ccc;
}

.post-content p {
  margin-bottom: 20px;
}

.post-content a {
  color: #1e90ff;
  text-decoration: none;
}

/* .post-content a:hover {
    text-decoration: underline;
} */

/* Social Links */
.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.social-links a {
  color: #5a5a5a;
  font-size: 16px; /* Kích thước chữ */
  text-decoration: none;
  font-weight: 500;
}

body.dark .social-links a {
  color: #ccc;
}

.social-links a:hover {
  color: #000;
  /* text-decoration: underline; Gạch chân khi hover */
}

body.dark .social-links a:hover {
  color: #fff;
  /* text-decoration: underline; */
}

/* Search Form */
.search-form {
  margin: 20px 0;
  text-align: center;
}

.search-form input[type="search"] {
  padding: 10px;
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* .search-form input[type="submit"] {
    padding: 10px 20px;
    background: #5A5A5A;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
} */

/* .search-form input[type="submit"]:hover {
    background: #000;
} */

/* Search Results */
.search-results {
  max-width: 800px;
  margin: 0 auto;
}

.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  /* border-bottom: 1px solid #eee; */
}

.result-title a {
  color: #000;
  text-decoration: none;
  font-size: 18px;
}

/* .result-title a:hover {
    text-decoration: underline;
} */

.result-date {
  color: #666;
  font-size: 14px;
}

body.dark .result-title a {
  color: #ccc;
}

/* body.dark .result-date {
    color: #999;
} */

/* body.dark .search-result-item {
    border-bottom: 1px solid #444;
} */

/* Hero Section */
.hero-section {
  text-align: center;
  padding: 40px 0;
  background: #f4f4f4;
  margin-bottom: 20px;
}

body.dark .hero-section {
  background: #333;
}

.hero-section h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: #000;
}

body.dark .hero-section h1 {
  color: #fff;
}

.hero-section p {
  font-size: 18px;
  color: #666;
}

body.dark .hero-section p {
  color: #ccc;
}

/* Search Form (đã có từ trước) */
.search-form {
  margin: 20px 0;
  text-align: center;
}

.search-form input[type="search"] {
  padding: 10px;
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* .search-form input[type="submit"] {
    padding: 10px 20px;
    background: #5A5A5A;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
} */

/* .search-form input[type="submit"]:hover {
    background: #000;
} */

/* Latest Posts */
.latest-posts {
  max-width: 800px;
  margin: 0 auto 40px;
}

.latest-posts h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #000;
}

body.dark .latest-posts h2 {
  color: #fff;
}

.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.result-title a {
  color: #000;
  text-decoration: none;
  font-size: 18px;
}

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

.result-date {
  color: #666;
  font-size: 14px;
}

body.dark .result-title a {
  color: #ccc;
}

body.dark .result-date {
  color: #999;
}

body.dark .search-result-item {
  border-bottom: 1px solid #444;
}