/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ================================================================
   Header — sau khi bật DARK BASE (body.dark + remap --cnvs-contrast-bg trong
   brand.css), Canvas tự lo nền tối cho #content / body / header / sticky /
   mobile. Các bản vá cũ đã BỎ vì thừa:
     • #content + body ép nền  → body.dark: --cnvs-body-bg = --cf-black
     • sticky/mobile header bg → header-bg & sticky-bg = --cnvs-contrast-bg = --cf-black
     • logo-text #fff          → header.njk đã set inline color: var(--cnvs-white)
   Chỉ giữ màu chữ menu: transparent-header không đặt màu menu sáng cho MỌI
   trạng thái → ép sáng + active/hover = đỏ brand.
   ================================================================ */
#header .menu-container > .menu-item > .menu-link { color: rgba(255,255,255,0.86); }
#header .menu-container > .menu-item.current > .menu-link,
#header .menu-container > .menu-item > .menu-link:hover { color: var(--cnvs-themecolor); }

/* ================================================================
   Khối nút CTA "chọn theo màu" (10 nút, cùng 1 đích) — 2 cột mobile,
   3 cột ≥576px, căn giữa. Nút co giãn đều theo cột (không phụ thuộc
   độ dài nhãn), giữ .button-3d gốc nguyên vẹn (không override radius/shadow).
   ================================================================ */
.cf-luck-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 cột ở MỌI kích thước — 10 nút = 5 hàng đều, không hàng lẻ */
  gap: 0.5rem;
  justify-items: stretch;
}
.cf-luck-grid .button {
  margin: 0;
  width: 100%;
  text-align: center;
  justify-content: center;
}
@media (min-width: 576px) {
  .cf-luck-grid { gap: 0.75rem; }
}
@media (min-width: 768px) {
  /* Cột nội dung bài (.postcontent.col-lg-9) rộng ~700-950px — 2 cột không giới hạn sẽ kéo
     nút quá khổ, chữ lọt thỏm giữa nhiều khoảng trắng. Giới hạn + căn giữa cho vừa mắt. */
  .cf-luck-grid { max-width: 560px; margin-left: auto; margin-right: auto; gap: 1rem; }
}

/* Nút nền sáng (vàng/chanh/hồng/hổ phách/ngọc/xanh bẩn): ép chữ tối để
   đủ tương phản WCAG AA — .button mặc định chữ trắng, các màu này quá sáng. */
.button.cf-btn-ink,
.button.cf-btn-ink:hover { color: var(--bs-gray-900); }
/* Breadcrumb: căn trái trên mobile (Canvas mặc định justify-content:center) */
@media (max-width: 767.98px) {
  .breadcrumb { justify-content: flex-start; }
}