@charset "UTF-8";

/* =========================================================
   MỤC LỤC
   1. Biến màu (light / dark)
   2. Base
   3. Khung layout (desktop / tablet / điện thoại ngang / dọc)
   4. Typography
   5. Link
   6. Header, site title, menu
   7. Danh sách bài (ul.posts, tag, tìm kiếm, trang chủ)
   8. Ảnh, blockquote, list trong bài
   9. Tag, pagination, search, show-more
  10. Dropdown chọn năm (trang chủ)
  11. Dark mode (phần còn lại)
  12. Responsive nhỏ (<=600, <=480)
   ========================================================= */


/* =========================================================
   1. BIẾN MÀU
   ========================================================= */
:root {
  --bg: #fff;
  --text: #2e2e2e;
  --heading: #111;
  --muted: #888;
  --hover: #111;
  --list-hover: #888;
  --border: #ddd;
  --hover-bg: rgba(0, 0, 0, .045);
  --menu-shadow: 0 5px 18px rgba(0, 0, 0, .06);
  --quote-text: #555;
  --img-b: 1;
  --img-c: 1;
}

body.dark-theme {
  --bg: #1a1a1a;
  --text: #e0e0e0;
  --heading: #fff;
  --muted: #999;
  --hover: #fff;
  --list-hover: #fff;
  --border: #444;
  --hover-bg: rgba(255, 255, 255, .06);
  --menu-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  --quote-text: #e0e0e0;
  --img-b: .85;
  --img-c: 1.1;
}


/* =========================================================
   2. BASE
   ========================================================= */
html {
  width: 100%;
  overflow-x: clip;
}

html,
body {
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html:has(body.dark-theme) {
  background-color: #1a1a1a !important;
}

body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: clip;
}

main,
article,
section,
.content,
.page-content,
footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 3rem !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
}

/* Dark mode: ép màu chữ chung.
   Dùng :where() để độ ưu tiên thấp, các rule cụ thể phía dưới
   (menu, tag, pagination...) chỉ cần viết sau là thắng. */
body.dark-theme :where(h2, h3, h4, h5, h6, p, li, span, a, time, strong, em, b, i) {
  color: var(--text) !important;
}

body.dark-theme h1 {
  color: var(--heading) !important;
}

body.dark-theme :where(.wrapper, .container, .main, main) {
  background-color: var(--bg) !important;
}


/* =========================================================
   3. KHUNG LAYOUT
   Một hệ tọa độ chung cho .home-page và .site-layout.
   Mỗi breakpoint chỉ đổi biến, không viết lại rule.
   ========================================================= */
.home-page,
.site-layout {
  --wrap-w: calc(100% - 48px);
  --wrap-max: 1000px;
  --wrap-margin: 4rem auto 6rem;
  --side-w: 150px;
  --col-gap: 36px;
  --side-pad: 20px;
  --sticky-top: 4rem;
  --content-max: 680px;
  --header-mb: 1.5rem;
  --menu-mt: 1.5rem;
}

/* iPad dọc / tablet */
@media (min-width: 721px) and (max-width: 1024px) {
  .home-page,
  .site-layout {
    --wrap-w: calc(100% - 40px);
    --wrap-margin: 2.5rem auto 4rem;
    --side-w: 140px;
    --col-gap: 28px;
    --side-pad: 16px;
    --sticky-top: 2.5rem;
    --content-max: none;
  }
}

/* Điện thoại xoay ngang: sidebar vẫn bên trái */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 720px) {
  .home-page,
  .site-layout {
    --wrap-w: calc(100% - 32px);
    --wrap-max: none;
    --wrap-margin: 1.5rem auto 3rem;
    --side-w: 110px;
    --col-gap: 20px;
    --side-pad: 12px;
    --sticky-top: 1.5rem;
    --content-max: none;
    --header-mb: 1rem;
    --menu-mt: 1rem;
  }
}

/* Điện thoại dọc: sidebar nằm trên nội dung */
@media (max-width: 720px) and (orientation: portrait), (max-width: 599px) {
  .home-page,
  .site-layout {
    --wrap-w: calc(100% - 32px);
    --wrap-max: 680px;
    --wrap-margin: 2rem auto 4rem;
    --content-max: none;
    --header-mb: 1rem;
    --menu-mt: 1rem;
  }

  .home-page {
    --menu-mt: 0;
  }
}

.home-page,
.site-layout {
  width: var(--wrap-w) !important;
  max-width: var(--wrap-max) !important;
  margin: var(--wrap-margin) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.home-page .home-layout,
.site-layout {
  display: grid !important;
  grid-template-columns: var(--side-w) minmax(0, 1fr) !important;
  column-gap: var(--col-gap) !important;
  row-gap: 0 !important;
  align-items: start !important;
}

/* Sidebar */
.home-page .home-sidebar,
.site-layout > .sidebar {
  position: sticky !important;
  top: var(--sticky-top) !important;
  left: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 var(--side-pad) 0 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  text-align: right !important;
  transform: none !important;
}

/* Nội dung */
.home-page .home-content,
.site-layout > main.content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: var(--content-max) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home-page .home-layout,
.home-page .home-content,
.site-layout > main.content,
.site-layout > main.content > section {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.home-page .home-content,
.site-layout > main.content {
  overflow-wrap: break-word;
}

/* Giới hạn bề rộng phần đọc bài */
.site-layout > main.content > section > span[itemprop="articleBody"] {
  display: block !important;
  width: 100% !important;
  max-width: 660px !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

.site-layout > main.content > section > span[itemprop="articleBody"] p,
.site-layout > main.content > section > span[itemprop="articleBody"] ul,
.site-layout > main.content > section > span[itemprop="articleBody"] ol {
  max-width: 600px !important;
  box-sizing: border-box !important;
}

.site-layout > main.content > section > span[itemprop="articleBody"] table {
  max-width: 660px !important;
  box-sizing: border-box !important;
}

.home-page img,
.site-layout img,
.site-layout iframe,
.site-layout video,
.site-layout pre,
.site-layout table {
  max-width: 100% !important;
}

.site-layout pre,
.site-layout table {
  overflow-x: auto;
}

/* Điện thoại dọc: xếp dọc */
@media (max-width: 720px) and (orientation: portrait), (max-width: 599px) {
  .home-page .home-layout,
  .site-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .home-page .home-sidebar,
  .site-layout > .sidebar {
    position: static !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    
  }

  .home-page .home-sidebar::after,
.site-layout > .sidebar::after {
  content: "";
  display: block;
  width: 150px;
  height: 1px;
  margin-top: 16px;
  background: var(--border);
}

  .home-page .home-content,
  .site-layout > main.content {
    max-width: none !important;
  }
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */
h1,
h2,
h3,
h4,
h5 {
  color: var(--heading);
  line-height: 1.5;
  font-weight: 400 !important;
  margin-top: 0 !important;
  text-align: left !important;
}

h1 {
  font-size: clamp(1.4rem, 4vw, 1.6rem) !important;
  margin: 3.5rem 0 2rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

h2 {
  font-size: clamp(1.1rem, 3.5vw, 1.35rem) !important;
  margin-bottom: 0.8em !important;
}

h3 {
  font-size: clamp(1rem, 3vw, 1.2rem) !important;
  margin-bottom: 0.5em !important;
  font-style: italic;
}

article h2,
article h3,
article h4,
.post-content h2,
.post-content h3 {
  margin-top: 2.5em !important;
}

p,
main p,
article p,
span[itemprop="articleBody"] p,
.content p {
  font-size: 1.063rem !important;
  color: var(--text) !important;
  margin: 0 0 1.5rem !important;
  line-height: 1.65 !important;
}

/* Tiêu đề ở các trang dùng .site-layout */
.site-layout > main.content > section:has(span[itemprop="articleBody"]) > h1,
.site-layout > main.content:has(#search-input) > section > h1,
.site-layout > main.content.tag-page > section > h1 {
  color: var(--heading) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.site-layout > main.content.tag-page > section > h1 {
  margin-left: 0 !important;
  text-transform: lowercase;
}

.site-layout > main.content.tag-page > section > h1::before {
  content: "#";
  margin-right: 0.05em;
}

.site-layout > main.content > section > h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   5. LINK
   ========================================================= */
article a,
.post-content a {
  color: #555 !important;
  border-bottom: 1px solid #ddd !important;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

article a:hover,
.post-content a:hover {
  color: var(--hover) !important;
  border-bottom-color: var(--hover) !important;
}

.post-title a,
.posts li a,
header a,
footer a {
  border-bottom: none !important;
  text-decoration: none !important;
  color: var(--text);
  transition: color 0.2s ease-in-out;
}

#theme-toggle,
ul.posts li a,
.header-left a {
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}


/* =========================================================
   6. HEADER, SITE TITLE, MENU
   ========================================================= */
.site-header {
  display: block !important;
  width: 100% !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  text-align: right !important;
}

.site-title {
  display: inline-block !important;
  width: fit-content !important;
  color: var(--heading) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

.header-dash {
  display: block !important;
  width: fit-content !important;
  margin: 0 0 0 auto !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.site-layout .site-header,
.home-page .home-sidebar .site-header {
  margin: 0 0 var(--header-mb) !important;
  text-align: right !important;
}

/* Nút đổi theme */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  appearance: none;
  -webkit-appearance: none;
}

#theme-toggle:hover {
  color: var(--hover) !important;
}

#theme-toggle svg {
  display: block;
  width: 17px;
  height: 17px;
}

body.dark-theme #theme-toggle svg {
  stroke: var(--muted) !important;
}

/* Menu */
.main-menu {
  margin-top: 1.2rem !important;
  margin-bottom: 0 !important;
}

.main-menu ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-menu li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.main-menu li::after {
  content: none !important;
}

.main-menu a {
  color: var(--muted) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: color 0.2s ease;
}

.main-menu a i {
  color: inherit !important;
}

.main-menu a:hover {
  color: var(--hover) !important;
}

body.dark-theme .main-menu a.active,
body.dark-theme .main-menu a[aria-current="page"] {
  color: #fff !important;
}

body.dark-theme .menu-separator {
  color: #666 !important;
}

/* Menu trong sidebar */
.site-layout .main-menu,
.home-page .home-sidebar .main-menu {
  margin: var(--menu-mt) 0 0 !important;
  text-align: right !important;
}

.site-layout .main-menu ul,
.home-page .home-sidebar .main-menu ul {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

.site-layout .main-menu a:hover,
.site-layout .main-menu a:focus-visible,
.site-layout .main-menu a.active {
  font-weight: 700 !important;
}

/* Điện thoại: ẩn dấu gạch, menu nằm ngang khi xếp dọc */
@media (max-width: 720px) {
  .site-layout .header-dash,
  .home-page .home-sidebar .header-dash {
    display: none !important;
  }
}

@media (max-width: 720px) and (orientation: portrait), (max-width: 599px) {
  .site-layout .site-header,
  .home-page .home-sidebar .site-header,
  .site-layout .main-menu,
  .home-page .home-sidebar .main-menu {
    text-align: left !important;
  }

  .site-layout .main-menu ul,
  .home-page .home-sidebar .main-menu ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
  }
}


/* =========================================================
   7. DANH SÁCH BÀI
   ========================================================= */

/* --- ul.posts (các trang thường) --- */
ul.posts {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 !important;
}

.site-layout > main.content > section > ul.posts {
  margin-top: 0.5rem !important;
}

.site-layout > main.content.tag-page > section > ul.posts {
  margin-top: -0.8rem !important;
}

@media (max-width: 720px) {
  .site-layout > main.content.tag-page > section > ul.posts {
    margin-top: 1.5rem !important;
  }
}

ul.posts li {
  display: flex !important;
  align-items: baseline !important;
  margin-bottom: 0.2rem !important;
}

ul.posts li::before {
  content: none !important;
  display: none !important;
}

ul.posts li .post-number,
ul.posts li time {
  display: none !important;
}

ul.posts li a {
  display: inline-block !important;
  color: var(--text) !important;
  font-weight: 400;
  letter-spacing: -0.015em !important;
  font-size: 1.08rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-decoration: none !important;
}

ul.posts li a:hover {
  color: var(--list-hover) !important;
}

ul.posts li.post-hidden {
  display: none !important;
}

/* --- Trang tag --- */
.tag-page .tag-posts {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.tag-page .tag-posts > li {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  column-gap: 5px !important;
  align-items: baseline !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  min-width: 0 !important;
  list-style: none !important;
}

.tag-page .tag-posts > li::before,
.tag-page .tag-posts > li > a::before {
  content: none !important;
  display: none !important;
}

.tag-page .tag-posts > li > time {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

.tag-page .tag-posts > li > a {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

/* --- Kết quả tìm kiếm ---
   li ẩn mặc định (không dùng !important) để JS có thể bật lại
   bằng style.display = "grid" / "block". */
#search-results {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#search-results li {
  display: none;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  line-height: 1.5 !important;
  list-style: none !important;
}

#search-results li::before,
#search-results li a::before {
  content: none !important;
  display: none !important;
}

#search-results li time {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

#search-results li a {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
  text-decoration: none !important;
}

#no-results {
  display: none;
}

@media (max-width: 600px) {
  #search-results li {
    column-gap: 12px;
  }
}

/* --- Danh sách trang chủ --- */
.home-page ul.home-post-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home-page ul.home-post-list li.home-post {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  column-gap: 5px !important;
  align-items: baseline;
  margin: 0 !important;
  padding: 4px 0 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
}

.home-page ul.home-post-list li::before,
.home-page ul.home-post-list li a::before {
  content: none !important;
  display: none !important;
}

.home-page ul.home-post-list li time {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  white-space: nowrap;
}

.home-page ul.home-post-list li a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 1.08rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.home-page ul.home-post-list li a:hover {
  color: var(--list-hover) !important;
}

/* Ẩn theo năm / "xem thêm". Độ ưu tiên cao hơn li.home-post
   nên không phụ thuộc thứ tự viết trong file. */
.home-page ul.home-post-list li.home-post:is(.year-hidden, .post-hidden) {
  display: none !important;
}

@media (max-width: 720px) {
  .home-page ul.home-post-list li.home-post {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    padding: 3px 0 !important;
  }

  .home-page ul.home-post-list li time {
    font-size: 0.82rem !important;
  }
}

/* Cạnh dưới trang chủ: nút xem thêm */
.home-page .home-show-more {
  display: block;
  width: fit-content;
  margin: 18px 0 0 !important;
}

.home-page .home-show-more[hidden] {
  display: none !important;
}


/* =========================================================
   8. ẢNH, BLOCKQUOTE, LIST TRONG BÀI
   ========================================================= */
article img,
.post-content img,
.content img,
span[itemprop="articleBody"] img {
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border: 1px solid #eee !important;
  border-radius: 0.25rem;
  display: block;
  margin: 2em auto;
  filter: grayscale(100%) brightness(var(--img-b)) contrast(var(--img-c)) !important;
  transition: filter 0.5s ease !important;
}

article img:hover {
  filter: grayscale(0%) brightness(var(--img-b)) contrast(var(--img-c)) !important;
}

body.dark-theme img {
  filter: brightness(var(--img-b)) contrast(var(--img-c));
  border-color: #333 !important;
}

body.dark-theme header a img,
body.dark-theme .menu a img {
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Blockquote */
blockquote {
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--quote-text) !important;
  font-style: italic !important;
  opacity: 1 !important;
  text-align: left !important;
}

blockquote p {
  margin: 0 !important;
  padding: 0 !important;
}

blockquote p::before {
  content: "\201C" !important;
  font-style: normal !important;
  margin-right: 6px !important;
}

blockquote p::after {
  content: "\201D" !important;
  font-style: normal !important;
  margin-left: 4px !important;
}

blockquote *,
body main blockquote *,
span[itemprop="articleBody"] blockquote *,
.post-content blockquote * {
  color: var(--quote-text) !important;
}

/* Danh sách dấu * */
article ul,
.post-content ul,
.content ul,
span[itemprop="articleBody"] ul {
  list-style: none !important;
  padding-left: 0 !important;
}

main ul li,
article ul li,
span[itemprop="articleBody"] ul li,
.post-content ul li,
.content ul li {
  font-size: 1.063rem !important;
  line-height: 1.5 !important;
  margin-bottom: 0.35rem !important;
}

article ul li,
.post-content ul li,
span[itemprop="articleBody"] ul li {
  position: relative !important;
  padding-left: 1.2rem !important;
}

article ul li::before,
.post-content ul li::before,
span[itemprop="articleBody"] ul li::before {
  content: "*" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: inherit !important;
}

main ol li,
article ol li,
.post-content ol li,
.content ol li,
span[itemprop="articleBody"] ol li {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1.2rem !important;
  color: inherit !important;
}

main ol li ul,
article ol li ul,
.post-content ol li ul {
  margin-top: 1.2rem !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   9. TAG, PAGINATION, SEARCH, SHOW-MORE
   ========================================================= */

/* Tag cuối bài: #tag */
.tags a,
.post-tags a,
.post-meta a[href*="/tags/"] {
  display: inline-block !important;
  background: none !important;
  color: var(--muted) !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  margin: 0 8px 0 0 !important;
  transition: color 0.2s ease !important;
}

.tags a::before,
.post-tags a::before,
.post-meta a[href*="/tags/"]::before {
  content: "#" !important;
  display: inline-block !important;
  color: #bbb !important;
  text-decoration: none !important;
  margin-right: 1px !important;
}

/* Không gạch chân / viền cho mọi link tag; chỉ gạch khi rê chuột */
a[href*="/tags/"] {
  border-bottom: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.tags a:hover,
.post-tags a:hover,
.post-meta a[href*="/tags/"]:hover,
a[href*="/tags/"]:hover {
  color: var(--hover) !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

.meta .tag,
.meta .tag a,
.meta .tag-hash {
  font-size: 0.9rem !important;
}

/* Ngày tháng cuối bài */
.meta time {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
}

.site-layout > main.content > section > .meta {
  margin-top: 1rem !important;
  padding-top: 0 !important;
}

/* Pagination */
.pagination {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-top: 1.5rem !important;
  padding: 0 !important;
}

.pagination a {
  color: var(--muted) !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.pagination a:hover {
  color: var(--hover) !important;
}

.pagination-empty {
  display: none !important;
}

/* Ô tìm kiếm */
.search {
  margin-bottom: 2rem;
}

.search input {
  width: 50%;
  box-sizing: border-box;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.063rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.search input::placeholder {
  color: inherit;
  opacity: 0.5;
}

.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Nút "xem thêm" */
.show-more {
  display: block;
  margin: 0.8rem 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.show-more:hover {
  color: var(--hover);
}

.show-more::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-right: 1.8px solid var(--text);
  border-bottom: 1.8px solid var(--text);
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
  opacity: 1;
}


/* =========================================================
   10. DROPDOWN CHỌN NĂM (TRANG CHỦ)
   ========================================================= */
.home-page .home-year-selector {
  position: relative;
  top: 8px;
  display: inline-block;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.home-page .year-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.home-page .year-toggle:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 4px;
}

.home-page .year-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.home-page .year-toggle[aria-expanded="true"] .year-chevron {
  transform: rotate(225deg);
}

.home-page .year-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 12px);
  left: 0;
  min-width: 125px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  box-shadow: var(--menu-shadow);
  animation: year-menu-in 160ms ease-out;
}

.home-page .year-menu[hidden] {
  display: none !important;
}

.home-page .year-option {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.home-page .year-option:hover {
  background: var(--hover-bg);
  color: var(--hover);
}

.home-page .year-option[aria-pressed="true"] {
  color: var(--text);
}

.home-page .year-check {
  visibility: hidden;
  font-size: 0.9rem;
}

.home-page .year-option[aria-pressed="true"] .year-check {
  visibility: visible;
}

@keyframes year-menu-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .year-menu {
    animation: none;
  }
}


/* =========================================================
   11. DARK MODE (phần còn lại)
   Phần lớn đã xử lý bằng biến ở mục 1.
   ========================================================= */
body.dark-theme .home-page .home-sidebar,
body.dark-theme .site-layout > .sidebar {
  border-right-color: var(--border) !important;
}

/* =========================================================
   12. RESPONSIVE NHỎ
   Các mốc dùng chung: 480 / 600 / 720 / 1024
   ========================================================= */
@media (max-width: 720px) {
  /* Khoảng cách tiêu đề bài viết khi xếp dọc */
  .site-layout > main.content > section:has(span[itemprop="articleBody"]) > h1 {
    margin-bottom: 28px !important;
  }
}

@media (max-width: 600px) {
  header {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  header a:not(:has(img)) {
    font-size: 1rem !important;
  }

  #theme-toggle {
    margin-left: 0 !important;
  }

  h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.2rem !important;
  }

  main p,
  article p,
  span[itemprop="articleBody"] p,
  .content p {
    font-size: 1.063rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.4rem !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 22px !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
  }

  .show-more {
    font-size: 1.05rem;
  }

  .main-menu a {
    font-size: 1.05rem !important;
  }
}



/* Bảng: bỏ nền trắng, dùng chung light + dark */
table {
  margin-bottom: 2rem !important;
}

table,
table :is(thead, tbody, tfoot, tr, th, td) {
  background: transparent !important;
  color: #2e2e2e !important;
  border-color: #ddd !important;
}

body.dark-theme table,
body.dark-theme table :is(thead, tbody, tfoot, tr, th, td) {
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

table :is(th, td) :where(p, span, a, strong, em, b, i, code) {
  color: inherit !important;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-brand #theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}