@charset "utf-8";
/* ============================================================
   Trần Phú Hiền Blog — Dark Theme 2024 (Bootstrap 5)
   Link vàng · Lazy load · Responsive · Fast load
   ============================================================ */

:root, [data-bs-theme="dark"] {
  --link-yellow: #ffd54f;
  --link-yellow-hover: #ffeb3b;
  --bg-body: #0d1117;
  --bg-card: #161b22;
  --bg-hover: #21262d;
  --border-color: #30363d;
  --text-primary: #e6edf3;
  --text-muted: #8b949e;
  --accent: #00c853;
  --btn-yellow: #d4a017;
}

* { box-sizing: border-box; }

html, body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 960px;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Links ---------- */
a { color: var(--link-yellow) !important; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-yellow-hover) !important; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 700; line-height: 1.3; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

img { max-width: 100%; height: auto; border-radius: 6px; }
img[loading="lazy"] { background: var(--bg-hover); min-height: 40px; }
iframe { max-width: 100%; border-radius: 8px; }

/* ---------- Form ---------- */
input[type="text"], input[type="password"], input[type="search"],
input[type="email"], select, textarea {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  transition: border-color .15s;
}
input[type="text"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: var(--link-yellow);
  box-shadow: 0 0 0 3px rgba(255,213,79,.15);
}
input[type="submit"], .button, .btn-yellow {
  background-color: var(--btn-yellow);
  color: #1a1a1a !important;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
input[type="submit"]:hover, .button:hover, .btn-yellow:hover {
  background-color: var(--link-yellow);
  color: #000 !important;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- Khối nội dung ---------- */
.phdr {
  background: linear-gradient(135deg, #1f6feb 0%, #0d47a1 100%);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 1rem;
  margin: 10px 0;
  border: 1px solid #1f6feb;
  box-shadow: 0 2px 8px rgba(31,111,235,.25);
}
.phdr a { color: #fff !important; }

.content, .menu, .list1, .list2, .news {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: justify;
  color: var(--text-primary);
}

.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.article-card h1 { color: var(--link-yellow); }

.breadcrumb-dark {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

.rmenu {
  background-color: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
}
.rmenu a {
  display: inline-block;
  background: var(--btn-yellow);
  color: #1a1a1a !important;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 700;
}
.rmenu a:hover { background: var(--link-yellow); text-decoration: none; }

.quote {
  border-left: 3px solid var(--link-yellow);
  background: var(--bg-card);
  padding: 8px 14px;
  color: var(--text-muted);
  border-radius: 0 8px 8px 0;
}

.code {
  background-color: #0f141a;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  font-family: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--text-primary);
}

/* ---------- Phân trang ---------- */
.filelist_paging, .page, .xt_pagination {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  margin: 12px 0;
}
.currentpage, .page span, .filelist_paging span, .xt_pagination .selected {
  background: var(--btn-yellow);
  color: #1a1a1a !important;
  margin: 2px;
  display: inline-block;
  border-radius: 6px;
  padding: 4px 11px;
  font-weight: 700;
}
.filelist_paging a, .page a, .xt_pagination a, .currentpage a {
  background: var(--bg-hover);
  color: var(--link-yellow) !important;
  margin: 2px;
  display: inline-block;
  border-radius: 6px;
  padding: 4px 11px;
  border: 1px solid var(--border-color);
}
.filelist_paging a:hover, .page a:hover, .currentpage a:hover {
  background: var(--btn-yellow);
  color: #1a1a1a !important;
  text-decoration: none;
}

/* ---------- Banner ---------- */
.banner {
  background: var(--bg-card);
  color: var(--text-muted);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  margin: 10px 0;
}
.banner a { color: var(--link-yellow) !important; padding: 4px 8px; }
.banner a:hover { background: var(--bg-hover); border-radius: 6px; }

/* ---------- Utilities ---------- */
.small { background: transparent; padding-left: 20px; }
.green { color: var(--accent) !important; }
.purple { color: #d500f9 !important; }
.xanh { color: #40c4ff !important; }
.red { color: #ff5252 !important; }
.blue { color: #40c4ff !important; }
.bold, .b { font-weight: 700; }
.italic { font-style: italic; }
.center { text-align: center; }
.clr { clear: both; }
.hidden { display: none !important; }
.inline { display: inline; }
.gachchan { text-decoration: underline; }

/* ---------- Header / Footer ---------- */
.site-header { margin-bottom: 1rem; }
.site-footer { border-radius: 0; }
.site-footer a { color: var(--link-yellow) !important; }
.site-footer .text-muted { color: var(--text-muted) !important; }

.navbar-dark .navbar-nav .nav-link {
  color: #c9d1d9 !important;
  border-radius: 6px;
  transition: all .15s;
  padding: 8px 14px;
  font-weight: 500;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--link-yellow) !important;
  background: rgba(255,213,79,.1);
}
.navbar-brand { color: #fff !important; }

/* ---------- Google menu footer ---------- */
.googlemenu {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 12px;
  border-top: 1px solid var(--border-color);
  margin-top: 20px;
}
.googlemenu a { margin: 0 3px; font-size: 11px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  html, body { font-size: 14px; }
  .content, .menu, .list1, .list2, .news, .article-card { padding: 13px; border-radius: 10px; }
  .phdr { font-size: .95rem; padding: 9px 12px; }
  .article-card { padding: 16px; }
  h1 { font-size: 1.25rem; }
}

/* ---------- Scrollbar đẹp ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--link-yellow); }

/* Bổ sung cho xem.xt */
.article-card h1 { color: var(--link-yellow) !important; }

.breadcrumb-dark {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
}

/* List group custom cho cm.xt */
.list-group-item-action.bg-dark:hover {
  background-color: var(--bg-hover) !important;
  color: var(--link-yellow-hover) !important;
}

/* Article body typography */
.article-card .content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-primary);
  text-align: justify;
  line-height: 1.75;
}
.article-card .content p { margin-bottom: 1rem; }
.article-card .content h2,
.article-card .content h3,
.article-card .content h4 { color: var(--link-yellow) !important; margin: 1.2rem 0 .6rem; }
.article-card .content img { margin: .5rem auto; display: block; }

/* Facebook comments container */
.fb-comments { min-height: 100px; }