/**
 * HAH brand tokens — logo red + AdSense coexistence.
 *
 * Google Matched Content / related-topic chips are hard-blue and unstyleable.
 * Saturated red on every title fights that blue (complementary clash).
 *
 * Strategy:
 * - Brand red (#d83030) ONLY for logo moments: primary buttons, focus, active chrome.
 * - Content titles / body links use warm ink (near-black), soft rose on hover.
 * - Cool bright surfaces (not pink wash) so page stays "tươi sáng" without warm-red fog vs ad blue.
 */
:root {
  /* Logo (keep for CTA / brand chrome) */
  --hah-brand: #d83030;
  --hah-brand-rgb: 216, 48, 48;
  --hah-brand-hover: #b82525;
  --hah-brand-deep: #9e1f1f;
  --hah-mark: #a83d5c; /* desaturated logo magenta — chords, less fight vs ad blue */
  --hah-mark-soft: #f6eef1;

  /* Content links: warm ink, NOT loud red */
  --hah-link: #2a2424;
  --hah-link-hover: #d83030;
  --hah-link-meta: #6b4f4f; /* artist / secondary links */

  /* Bright cool surfaces (avoid pink wash next to Google blue) */
  --hah-bg: #f7f8fa;
  --hah-surface: #ffffff;
  --hah-surface-muted: #eef1f4;
  --hah-border: #e3e6ea;
  --hah-border-strong: #cfd4da;

  /* Ink */
  --hah-ink: #1a1c1e;
  --hah-ink-muted: #5c636a;
  --hah-ink-faint: #8b929a;

  /* Shape lock */
  --hah-radius: 10px;
  --hah-radius-sm: 6px;

  /* Full-width layout gutters (site-wide) */
  --hah-page-gutter: 1rem;
  --hah-page-gutter-lg: 1.5rem;
  /* 100% = full viewport; soft-cap e.g. 1600px if needed later */
  --hah-content-max: 100%;

  /* Bootstrap: primary = brand (buttons); links = ink */
  --bs-primary: var(--hah-brand);
  --bs-primary-rgb: var(--hah-brand-rgb);
  --bs-link-color: var(--hah-link);
  --bs-link-hover-color: var(--hah-link-hover);
  --bs-link-color-rgb: 42, 36, 36;
  --bs-focus-ring-color: rgba(var(--hah-brand-rgb), 0.22);
  --bs-btn-focus-shadow-rgb: var(--hah-brand-rgb);
}

body {
  color: var(--hah-ink);
  background-color: var(--hah-bg);
}

/* Default links: ink, not screaming red */
a,
a:link,
.widget a,
.site-main a {
  color: var(--hah-link);
}

a:hover,
a:focus,
.widget a:hover,
.site-main a:hover {
  color: var(--hah-link-hover);
}

/* Song titles: ink hierarchy; red only on hover */
.entry-title a,
article .entry-title a,
.site-main .entry-title a {
  color: var(--hah-ink);
  font-weight: 700;
}

.entry-title a:hover,
article .entry-title a:hover,
.site-main .entry-title a:hover {
  color: var(--hah-link-hover);
}

/* Artist / meta links: soft warm, quieter than titles */
.entry-meta a,
.lyric_footer a,
.site-main .entry-meta a,
.entry-summary .text-muted a,
.entry-summary small a {
  color: var(--hah-link-meta);
}

.entry-meta a:hover,
.lyric_footer a:hover,
.entry-summary .text-muted a:hover,
.entry-summary small a:hover {
  color: var(--hah-link-hover);
}

/* Chords: muted mark (still brand family) */
.lyric_chord {
  color: var(--hah-mark) !important;
}

.lyric_chord:hover {
  color: #fff !important;
  background-color: var(--hah-brand) !important;
}

.widget-title,
.song-sidebar .info-box h4 {
  border-bottom-color: var(--hah-brand) !important;
}

.widget.widget_tag_cloud .tagcloud a {
  background-color: var(--hah-surface-muted) !important;
  color: var(--hah-ink) !important;
}

.widget.widget_tag_cloud .tagcloud a:hover {
  background-color: var(--hah-brand) !important;
  color: #fff !important;
}

/* Primary buttons keep logo red — rare, intentional accents.
   Must beat global `a { color: ink }` (Đăng bài is <a class="btn btn-primary">). */
.btn-primary,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--hah-brand);
  --bs-btn-border-color: var(--hah-brand);
  --bs-btn-hover-bg: var(--hah-brand-hover);
  --bs-btn-hover-border-color: var(--hah-brand-hover);
  --bs-btn-active-bg: var(--hah-brand-deep);
  --bs-btn-active-border-color: var(--hah-brand-deep);
  --bs-btn-disabled-bg: var(--hah-brand);
  --bs-btn-disabled-border-color: var(--hah-brand);
  color: #fff !important;
  background-color: var(--hah-brand);
  border-color: var(--hah-brand);
}

a.btn-primary:hover,
a.btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  color: #fff !important;
  background-color: var(--hah-brand-hover);
  border-color: var(--hah-brand-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--hah-brand);
  --bs-btn-border-color: var(--hah-brand);
  --bs-btn-hover-bg: var(--hah-brand);
  --bs-btn-hover-border-color: var(--hah-brand);
  --bs-btn-active-bg: var(--hah-brand-deep);
  --bs-btn-active-border-color: var(--hah-brand-deep);
}

.text-primary {
  color: var(--hah-brand) !important;
}

.bg-primary {
  background-color: var(--hah-brand) !important;
}

.border-primary {
  border-color: var(--hah-brand) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--hah-brand) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hah-brand);
  box-shadow: 0 0 0 0.25rem rgba(var(--hah-brand-rgb), 0.2);
}

.page-link {
  color: var(--hah-link);
}

.page-item.active .page-link {
  background-color: var(--hah-brand);
  border-color: var(--hah-brand);
  color: #fff;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--hah-brand);
}

#site-header {
  background-color: var(--hah-surface) !important;
  border-bottom-color: var(--hah-border) !important;
}

/*
 * Soften AdSense / Matched Content neighborhood when Google injects
 * into our layout (outer wrappers we own). Cannot restyle iframes.
 */
.hade-ad,
.adsbygoogle,
ins.adsbygoogle {
  isolation: isolate;
}

.hade-ad {
  background: var(--hah-surface);
  border-top: 1px solid var(--hah-border);
  border-bottom: 1px solid var(--hah-border);
}

/* ==========================================================================
   Full-width layout (all pages)
   Beat Bootstrap 5.3 container max-widths (540→1320) + theme 1140 cap.
   ========================================================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--hah-content-max) !important;
  width: 100%;
  padding-left: var(--hah-page-gutter);
  padding-right: var(--hah-page-gutter);
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: var(--hah-page-gutter-lg);
    padding-right: var(--hah-page-gutter-lg);
  }
}

/* Header / footer share the same shell width */
#site-header .container.header-desktop,
#site-header .container.header-mobile,
#site-header .container,
.site-footer .container {
  max-width: var(--hah-content-max) !important;
}

.header-desktop .header-search-form {
  width: auto;
  flex: 1 1 28rem;
  max-width: 40rem;
  min-width: 16rem;
}