/* Canvas: Martial Arts */

:root {

  --cf-black: #080808;
  --cf-black2: #0F0F0F;
  --cf-dark: #141414;
  --cf-dark2: #1A1A1A;
  --cf-red: var(--cnvs-themecolor);
  --cf-red-hi: #D93636;
  --cf-red-dark: #991010;
  /* Đỏ cho CHỮ NHỎ trên nền đen: --cf-red (#C72222) chỉ đạt 3.51:1 → trượt WCAG AA
     cho text <18px. Sắc này 4.92:1 ✓. Dùng cho eyebrow/link/label đỏ, KHÔNG dùng cho nền nút. */
  --cf-red-text: #E04747;
  --cf-red-glow: rgba(var(--cnvs-themecolor-rgb), 0.18);
  --cf-gold: #C9A84C;
  --cf-text: #E8E8E8;
  --cf-muted: #888888;
  --cf-border: rgba(255,255,255,0.07);

  --cnvs-heading-color: var(--cnvs-white);
  --cnvs-body-color: var(--cf-text);

  /* Lever blog NATIVE của Canvas. Mặc định --cnvs-post-meta-fontsize: 90% (≈0.9rem)
     lệch thang chữ 3 bậc (decisions.md §4) → ép về bậc 0.875rem. */
  --cnvs-post-meta-fontsize: 0.875rem;
}

/* ================================================================
   DARK BASE — bật cơ chế .dark GỐC của Canvas (body + #header đều .dark)
   thay vì vá lẻ. Chỉ remap 2 biến nền của Canvas về brand black:
     --cnvs-contrast-bg         → nền chính (body qua --cnvs-body-bg, #content,
                                   header-bg + sticky-bg)
     --cnvs-contrast-bg-offset  → nền phụ (section/footer/topbar)
   Canvas tự lo phần còn lại: header/sticky = contrast-bg; contrast scale đảo sáng.
   brand.css nạp SAU style.css → .dark ở đây thắng .dark vendor (#212529 xám).
   ================================================================ */
.dark {
  --cnvs-contrast-bg: var(--cf-black);
  --cnvs-contrast-bg-offset: var(--cf-black2);
}

/* Sticky header: nâng nền 1 bậc so với body (--cf-black) để có ranh giới khi cuộn.
   Dùng đúng lever của Canvas (--cnvs-header-sticky-bg) — không đắp background đè. */
#header.dark {
  --cnvs-header-sticky-bg: var(--cf-black2);
}

/* Logo — Canvas ép `#header-wrap #logo img { height: var(--cnvs-header-height) }`
   (100/80/60px) và KHÔNG có lever padding → logo xuất sát viền sẽ to lù + đẩy
   hamburger xuống dòng. Ép lại theo chiều CAO THẬT + giữ tỉ lệ: thả file nào cũng vừa.
   1 lever duy nhất: --cf-logo-h (+ bản shrink khi sticky). */
:root {
  --cf-logo-h: 44px;
  --cf-logo-h-sticky: 34px;
}

#header-wrap #logo img {
  height: var(--cf-logo-h);
  width: auto;
  max-width: none;   /* logo BẤT BIẾN — không co theo bề rộng header */
  max-height: none;
}

.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
  height: var(--cf-logo-h-sticky);
}

@media (max-width: 991.98px) {
  #header-wrap #logo img { height: var(--cf-logo-h-sticky); }
}

/* Header 1 dòng — KHÔNG dùng flex-wrap:nowrap trên .header-row:
   Canvas cho .primary-menu { flex-basis:100% } để nav RỚT XUỐNG DÒNG RIÊNG khi mở
   trên mobile. Ép nowrap sẽ kéo nav vào cùng hàng → vỡ menu.
   Cách đúng: LOGO bất biến (không co, không wrap), CTA là thứ nhường chỗ. */

/* Logo — ưu tiên cao nhất, kích thước cố định, không bao giờ co */
#logo {
  flex: 0 0 auto;
  margin-right: auto;   /* đẩy CTA + hamburger sang phải */
}

/* Hamburger — KHÔNG dùng order/margin-left:auto:
   .primary-menu có flex-basis:100% (luôn chiếm trọn 1 dòng). Đặt order lớn hơn nav sẽ
   đẩy hamburger xuống DÒNG SAU nav, dù header còn thừa chỗ.
   Trong DOM hamburger đã đứng TRƯỚC nav → nó tự ở lại dòng 1; `margin-right:auto` của
   #logo đã đẩy cụm CTA + ☰ sát lề phải, ☰ là phần tử cuối = ngoài cùng bên phải. */
.primary-menu-trigger {
  flex: 0 0 auto;
}

/* CTA — phần duy nhất được phép co/rút gọn khi chật */
.header-misc {
  flex: 0 1 auto;
  min-width: 0;
}

.cf-header-cta {
  flex: 0 1 auto;
  white-space: nowrap;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem;
}

/* Menu ngang chỉ bật từ 1200px (body[data-menu-breakpoint="1200"] — lever của Canvas).
   Dưới 1200px: Canvas tự thay menu bằng hamburger → header còn logo + CTA + ☰, 1 dòng.
   1200–1399px: container 1140, chỗ hơi khít → co nhẹ menu để có biên an toàn. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root { --cnvs-primary-menu-font-size: 0.875rem; }
}

/* Nhãn CTA rút gọn dần theo bề rộng — thứ tự ưu tiên: LOGO & ☰ luôn giữ, CTA nhường chỗ.
   ≥480px "THAM GIA NGAY" · 360–479 "ĐĂNG KÝ" · 320–359 "Đ.KÝ" · <320 "ĐK"
   Trio (logo cố định + CTA + ☰) provably vừa 1 dòng tới 280px. */
.cf-cta-l2,
.cf-cta-l3,
.cf-cta-l4 { display: none; }

@media (max-width: 767.98px) {
  .cf-header-cta {
    font-size: 0.6875rem;
    padding: 0.42rem 0.72rem;
    gap: 5px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 575.98px) {
  :root { --cf-logo-h-sticky: 30px; }
  .cf-header-cta {
    font-size: 0.625rem;
    padding: 0.38rem 0.6rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 479.98px) {
  .cf-cta-l1 { display: none; }
  .cf-cta-l2 { display: inline; }
}

@media (max-width: 359.98px) {
  .cf-cta-l2 { display: none; }
  .cf-cta-l3 { display: inline; }
}

@media (max-width: 319.98px) {
  :root { --cf-logo-h-sticky: 26px; }
  .cf-cta-l3 { display: none; }
  .cf-cta-l4 { display: inline; }
  .cf-header-cta { padding: 0.34rem 0.5rem; }
}

/* Logo wordmark (text) — fallback khi chưa có site.images.logo.
   Cần .logo-default để Canvas không ẩn ([class^=logo-]). */
.logo-text {
  font-family: var(--cnvs-primary-font);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--cnvs-white);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Base */
body {
  background-color: var(--cf-black);
  color: var(--cf-text);
  font-family: var(--cnvs-body-font);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cnvs-primary-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-wrap: balance;
  color: var(--cnvs-white);
}

/* Uppercase CHỈ ở h1 (+ nav/button). h2–h6 để chữ thường: dễ đọc cho bài dài
   và đúng ngôn ngữ 12BET (uppercase chỉ dùng cho nav/CTA).
   line-height >= 1.15: chữ hoa tiếng Việt có dấu chồng (Ế, Ộ, Ỡ) → tránh cắt dấu. */
h1 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.16;
}

/* Menu — dùng lever CÓ SẴN của Canvas, không viết rule đè.
   Canvas mặc định 0.8125rem/700 → 0.9375rem (15px)/500 theo bản chuẩn 12BET. */
:root {
  --cnvs-primary-menu-font-size: 0.9375rem;
  --cnvs-primary-menu-font-weight: 500;
}

/* Header */
#header.transparent-header.dark .header-row {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Hero */
#home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--cf-black);
  overflow: hidden;
}

.cf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.7) 50%, rgba(var(--cnvs-themecolor-rgb),0.12) 100%);
  z-index: 1;
}

.cf-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--cf-hero-image, none);
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.cf-hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: 2;
  opacity: 0.4;
  pointer-events: none;
}

.cf-hero-inner {
  position: relative;
  z-index: 3;
  padding: 10rem 0 6rem;
}

.cf-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cnvs-body-font);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cf-red-text);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.cf-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--cf-red);
}

.cf-hero-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 1.08;          /* §4: h1 hoa tiếng Việt cần ≥1.05 tránh chồng dấu */
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: var(--cnvs-white);
}

.cf-hero-title .accent {
  color: var(--cf-red);
  display: block;
}

.cf-hero-sub {
  font-size: 1.05rem;
  color: rgba(232,232,232,0.75);
  max-width: 480px;
  margin-bottom: 2.5rem;
  font-weight: 300;
  line-height: 1.7;
}

.cf-hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Hero — padding dọc bằng CLASS (không inline) để media query bắt được.
   Longhand: .cf-hero-pad gắn trên .container → shorthand sẽ xóa padding-left/right 12px (§5). */
.cf-hero-pad { padding-top: 8rem; padding-bottom: 5rem; }

@media (max-width: 767.98px) {
  .cf-hero-pad { padding-top: 4.5rem; padding-bottom: 3.5rem; }
}

@media (max-width: 575.98px) {
  .cf-hero-ctas { flex-direction: column; align-items: stretch; }
  .cf-hero-ctas .btn-cf-primary,
  .cf-hero-ctas .btn-cf-outline { width: 100%; justify-content: center; }
}

.btn-cf-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cnvs-themecolor);
  color: var(--cnvs-white);
  font-family: var(--cnvs-primary-font);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  font-weight: 500;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

/* 🛡 GUARD — nút LUÔN giữ màu chữ của chính nó, bất chấp mọi rule `... a { color }`
   của thân bài (hiện tại hoặc sau này). `:link`/`:visited` nâng specificity lên (0,2,0),
   thắng cả `.cf-article a` / `.entry-content a` (0,1,1) dù rule đó nằm sau trong cascade.
   Đây là lưới an toàn cho BẪY 6 — đã dính 2 lần, không để dính lần 3. */
.btn-cf-primary:link,
.btn-cf-primary:visited { color: var(--cnvs-white); }
.btn-cf-outline:link,
.btn-cf-outline:visited { color: var(--cnvs-white); }

/* decisions.md §4: --cf-red-hi = HOVER · --cf-red-dark = PRESSED.
   Trước đây hover lấy nhầm --cf-red-dark → --cf-red-hi thành token chết (khai báo,
   không dùng) và nút hover bị tối hơn nền thường thay vì sáng lên. */
.btn-cf-primary:hover {
  background: var(--cf-red-hi);
  color: var(--cnvs-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(var(--cnvs-themecolor-rgb), 0.45);
  text-decoration: none;
}
.btn-cf-primary:active {
  background: var(--cf-red-dark);
  color: var(--cnvs-white);
  transform: translateY(0);
  box-shadow: none;
}

.btn-cf-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--cnvs-white);
  font-family: var(--cnvs-primary-font);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  text-decoration: none;
  font-weight: 500;
}

.btn-cf-outline:hover {
  border-color: var(--cnvs-themecolor);
  color: var(--cf-red-text);
  background: rgba(var(--cnvs-themecolor-rgb), 0.06);
  text-decoration: none;
}

.cf-hero-stats {
  display: flex;
  flex-wrap: wrap;
  /* row-gap · column-gap: co giãn theo viewport → 4-up desktop, 2-up mobile, không tràn */
  gap: 1.75rem clamp(1.25rem, 4vw, 3rem);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.cf-hero-stats > div {
  flex: 0 1 auto;
  min-width: 0;
}

.cf-stat-num {
  font-family: var(--cnvs-primary-font);
  font-size: 2rem;
  color: var(--cf-red);
  font-weight: 600;
  line-height: 1;
}

.cf-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-muted);
  margin-top: 4px;
}

/* Section base overrides */
.section { background-color: var(--cf-black); }

.cf-section-dark { background-color: var(--cf-black2) !important; }
.cf-section-darker { background-color: var(--cf-dark) !important; }

/* PAGE HERO (trang trong) — ảnh nền cho page-header.njk.
   Chỉ bật khi front-matter có `headerBg`; không có → giữ nền phẳng --cf-dark.
   Overlay ĐỐI XỨNG (khác .cf-hero-overlay chéo 105deg của home) vì text canh giữa.
   rgba(8,8,8,…) = --cf-black dạng alpha — theo đúng tiền lệ .cf-hero-overlay. */
.cf-page-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cf-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, rgba(8,8,8,0.50) 0%, rgba(8,8,8,0.88) 100%),
    linear-gradient(180deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.55) 40%, rgba(8,8,8,0.96) 100%);
  z-index: 0;
}

.cf-page-hero > .container { position: relative; z-index: 1; }

/* CARD TRONG BÀI VIẾT — nền gradient thay màu phẳng của Bootstrap.
   Dùng background-image (không phải background) → --bs-card-bg vẫn nằm dưới làm nền dự phòng.
   Scope .card.<class> = (0,2,0) để thắng .card.border-default, không cần !important. */
.card.cf-card-cta {
  background-image: linear-gradient(115deg,
    var(--cf-dark2) 0%,
    var(--cf-dark) 42%,
    rgba(var(--cnvs-themecolor-rgb), 0.20) 100%);
  border-color: rgba(var(--cnvs-themecolor-rgb), 0.28);
}

.card.cf-card-soft {
  background-image: linear-gradient(135deg,
    var(--cf-dark2) 0%,
    var(--cf-black2) 100%);
}

/* PROMO SLOT — banner ảnh/video (sidebar 160x600 · trong bài 728x90).
   Tên class trung tính (không "banner"/"ads"/kích thước) — ad-blocker chặn theo chuỗi.
   max-width:100% BẮT BUỘC: 728px tràn container 720px ở viewport 768. */
.cf-promo-slot {
  display: block;
  line-height: 0;
}

.cf-promo-slot img,
.cf-promo-slot video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.cf-section-header {
  margin-bottom: 3.5rem;
}

.cf-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cf-red-text);
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-family: var(--cnvs-body-font);
}

.cf-section-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--cf-red);
  display: inline-block;
}

.cf-section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--cnvs-white);
  margin: 0;
}

.cf-section-title span { color: var(--cf-red); }

/* Disciplines Grid */
.cf-disciplines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cf-border);
}

@media (max-width: 991px) {
  .cf-disciplines-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .cf-disciplines-grid { grid-template-columns: 1fr; }
}

.cf-discipline-card {
  display: block;
  background: var(--cf-dark2);
  padding: 2.2rem 2rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s;
}

.cf-discipline-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cnvs-themecolor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.cf-discipline-card:hover { background: var(--cf-dark); }
.cf-discipline-card:hover::before { transform: scaleX(1); }

.cf-discipline-icon {
  font-size: 2rem;
  color: var(--cf-red);
  margin-bottom: 1rem;
  display: block;
}

.cf-discipline-name {
  font-family: var(--cnvs-primary-font);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cnvs-white);
  margin-bottom: 0.5rem;
}

.cf-discipline-desc {
  font-size: 0.875rem;
  color: var(--cf-muted);
  line-height: 1.6;
  margin: 0;
}

.cf-discipline-tag {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cf-red-text);
  border: 1px solid rgba(var(--cnvs-themecolor-rgb), 0.35);
  padding: 2px 8px;
  font-family: var(--cnvs-body-font);
  font-weight: 700;
}

/* Free Bet Banner */
.cf-trial-banner {
  background: var(--cnvs-themecolor);
  padding: 3.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cf-trial-banner::before {
  content: 'FREE BET';
  position: absolute;
  font-family: var(--cnvs-primary-font);
  font-size: 8rem;
  opacity: 0.06;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.cf-trial-banner h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--cnvs-white);
  margin-bottom: 0.5rem;
}

.cf-trial-banner p {
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
  margin-bottom: 1.8rem;
}

.btn-cf-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cnvs-white);
  color: var(--cf-red);
  font-family: var(--cnvs-primary-font);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2.4rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  font-weight: 600;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn-cf-white:hover {
  background: var(--cf-black);
  color: var(--cnvs-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  text-decoration: none;
}

/* Schedule */
.cf-schedule-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--cf-border);
  margin-bottom: 2rem;
  overflow-x: auto;
}

.cf-schedule-tab {
  font-family: var(--cnvs-primary-font);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
  border: none;
  background: none;
  color: var(--cf-muted);
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.cf-schedule-tab.active,
.cf-schedule-tab:hover {
  color: var(--cnvs-white);
  border-bottom-color: var(--cnvs-themecolor);
}

.cf-schedule-panel { display: none; }
.cf-schedule-panel.active { display: block; }

/* Bảng kèo: bọc trong .table-responsive (cơ chế Bootstrap có sẵn: overflow-x auto).
   min-width buộc bảng TRÀN trên mobile → mới kéo ngang được; nowrap để ô không vỡ dòng. */
.cf-schedule-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.cf-schedule-table th,
.cf-schedule-table td {
  white-space: nowrap;
}

/* Scrollbar mảnh + màu brand → người dùng nhận ra bảng kéo được */
.cf-schedule-panel .table-responsive {
  scrollbar-width: thin;
  scrollbar-color: var(--cf-red) transparent;
}
.cf-schedule-panel .table-responsive::-webkit-scrollbar { height: 4px; }
.cf-schedule-panel .table-responsive::-webkit-scrollbar-track { background: transparent; }
.cf-schedule-panel .table-responsive::-webkit-scrollbar-thumb {
  background: var(--cf-red);
  border-radius: 2px;
}

.cf-schedule-table th {
  font-family: var(--cnvs-primary-font);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cf-muted);
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--cf-border);
}

.cf-schedule-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--cf-border);
  font-size: 1rem;
  vertical-align: middle;
}

.cf-schedule-table tr:last-child td { border-bottom: none; }

.cf-schedule-table tr:hover td { background: rgba(255,255,255,0.02); }

.cf-class-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  font-family: var(--cnvs-body-font);
}

/* Bảng màu badge — 16 biến thể theo họ màu (cặp bg tint + text sáng cho nền tối).
   NGOẠI LỆ literal-color có chủ đích (cùng loại .belt-* / vip.json §1): đây là palette
   nội dung, KHÔNG phải màu brand ⇒ không tokenize. */
.badge-red     { background: rgba(var(--cnvs-themecolor-rgb),0.15); color: var(--cf-red-text); }
.badge-rose    { background: rgba(244,63,94,0.14);   color: #fb7185; }
.badge-pink    { background: rgba(236,72,153,0.14);  color: #f472b6; }
.badge-orange  { background: rgba(249,115,22,0.14);  color: #fb923c; }
.badge-amber   { background: rgba(245,158,11,0.14);  color: #fbbf24; }
.badge-gold    { background: rgba(201,168,76,0.15);  color: var(--cf-gold); }
.badge-lime    { background: rgba(132,204,22,0.14);  color: #a3e635; }
.badge-green   { background: rgba(46,204,113,0.10);  color: #58d68d; }
.badge-emerald { background: rgba(16,185,129,0.14);  color: #34d399; }
.badge-teal    { background: rgba(20,184,166,0.14);  color: #2dd4bf; }
.badge-cyan    { background: rgba(6,182,212,0.14);   color: #22d3ee; }
.badge-blue    { background: rgba(52,152,219,0.15);  color: #5dade2; }
.badge-indigo  { background: rgba(99,102,241,0.14);  color: #818cf8; }
.badge-violet  { background: rgba(139,92,246,0.14);  color: #a78bfa; }
.badge-purple  { background: rgba(168,85,247,0.14);  color: #c084fc; }
.badge-slate   { background: rgba(255,255,255,0.07); color: var(--cf-text); }

/* Membership */
.cf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .cf-pricing-grid { grid-template-columns: 1fr; }
}

.cf-pricing-card {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border);
  padding: 2.5rem 2rem;
  position: relative;
  transition: border-color 0.25s, transform 0.25s;
}

.cf-pricing-card:hover {
  border-color: rgba(var(--cnvs-themecolor-rgb), 0.4);
  transform: translateY(-4px);
}

.cf-pricing-card.featured {
  border-color: var(--cnvs-themecolor);
  background: var(--cf-dark);
}

.cf-pricing-card.featured::before {
  content: 'KHUYÊN CHỌN';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cnvs-themecolor);
  color: var(--cnvs-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-family: var(--cnvs-primary-font);
  padding: 4px 16px;
}

.cf-plan-name {
  font-family: var(--cnvs-primary-font);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cf-muted);
  margin-bottom: 1rem;
}

.cf-plan-price {
  font-family: var(--cnvs-primary-font);
  font-size: 3rem;
  color: var(--cnvs-white);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.cf-plan-price sup {
  font-size: 1.4rem;
  vertical-align: super;
  color: var(--cf-red);
}

.cf-plan-period {
  font-size: 0.875rem;
  color: var(--cf-muted);
  margin-bottom: 1.8rem;
}

.cf-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.cf-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--cf-border);
  font-size: 1rem;
  color: var(--cf-text);
}

.cf-plan-features li:last-child { border-bottom: none; }

.cf-plan-features li i {
  color: var(--cf-red);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Belt System */
.cf-belt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .cf-belt-grid { grid-template-columns: 1fr; }
}

.cf-belt-card {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border);
  padding: 2rem;
}

.cf-belt-title {
  font-family: var(--cnvs-primary-font);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cnvs-white);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cf-belt-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 1.5rem;
}

.cf-belt {
  height: 12px;
  border-radius: 2px;
  flex: 1;
}

/* Lộ trình thăng hạng VIP — thang "Kim loại → Quý kim → Hắc kim".
   Màu NỘI DUNG (cùng loại ngoại lệ đã ghi ở §1 decisions.md): biểu thị THỨ HẠNG,
   tăng đơn điệu theo độ quý rồi độ nóng. KHÔNG token hóa — không phải màu brand.
   Trùng #CC1616 ở t9 là CỐ Ý (mốc "chạm màu thương hiệu"), không phải var brand. */
.vip-t0  { background: #707A82; }   /* Thép */
.vip-t1  { background: #9C6633; }   /* Đồng */
.vip-t2  { background: #B87333; }   /* Đồng sáng */
.vip-t3  { background: #9BA5AE; }   /* Bạc */
.vip-t4  { background: #CBD4DC; }   /* Bạch kim */
.vip-t5  { background: #D4A93C; }   /* Vàng */
.vip-t6  { background: #E8B923; }   /* Vàng rực */
.vip-t7  { background: #E08A22; }   /* Hổ phách */
.vip-t8  { background: #DD5F26; }   /* Cam lửa */
.vip-t9  { background: #CC1616; }   /* Đỏ brand */
.vip-t10 { background: #A31241; }   /* Ruby thẫm */
.vip-t11 { background: #7D3AA6; }   /* Tía hoàng gia */
.vip-t12 { background: #14141A; border: 1px solid var(--cf-gold); }   /* Hắc kim */

.cf-belt-stages {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cf-belt-stages li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--cf-border);
  font-size: 0.875rem;
}

.cf-belt-stages li:last-child { border-bottom: none; }

.cf-belt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.cf-belt-stage-name {
  color: var(--cnvs-white);
  font-weight: 600;
  font-family: var(--cnvs-primary-font);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cf-belt-stage-desc {
  color: var(--cf-muted);
  font-size: 0.875rem;
  margin-top: 2px;
  line-height: 1.5;
}

/* Competition Team */
.cf-competition-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cf-competition-bg {
  position: absolute;
  inset: 0;
  background-image: var(--cf-competition-image, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.cf-competition-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,0.95) 40%, rgba(8,8,8,0.3) 100%);
  z-index: 1;
}

.cf-competition-content {
  position: relative;
  z-index: 2;
  /* CHỈ padding dọc. Dùng shorthand `padding: 4rem 0` sẽ XÓA padding-left/right 12px
     của .container (class này gắn kèm .container) → lệch lề so với các section khác. */
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.cf-trophy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .cf-trophy-grid { grid-template-columns: repeat(2, 1fr); }
}

.cf-trophy-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--cf-border);
  padding: 1.2rem;
  text-align: center;
}

.cf-trophy-num {
  font-family: var(--cnvs-primary-font);
  font-size: 1.8rem;
  color: var(--cf-red);
  font-weight: 600;
  line-height: 1;
}

.cf-trophy-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-muted);
  margin-top: 4px;
  font-family: var(--cnvs-body-font);
}

/* Kids Curriculum */
.cf-kids-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .cf-kids-grid { grid-template-columns: 1fr; }
}

.cf-kids-card {
  background: var(--cf-dark2);
  border-left: 3px solid var(--cnvs-themecolor);
  padding: 1.8rem;
  transition: background 0.2s;
}

.cf-kids-card:hover { background: var(--cf-dark); }

.cf-kids-icon {
  font-size: 1.8rem;
  color: var(--cf-red);
  margin-bottom: 0.8rem;
  display: block;
}

.cf-kids-title {
  font-family: var(--cnvs-primary-font);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cnvs-white);
  margin-bottom: 0.5rem;
}

.cf-kids-text {
  font-size: 0.875rem;
  color: var(--cf-muted);
  line-height: 1.6;
  margin: 0;
}

/* Instructors */
.cf-instructor-card {
  background: var(--cf-dark2);
  overflow: hidden;
  transition: transform 0.25s;
}

.cf-instructor-card:hover { transform: translateY(-4px); }

.cf-instructor-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.cf-instructor-body {
  padding: 1.5rem;
  border-top: 3px solid var(--cnvs-themecolor);
}

.cf-instructor-name {
  font-family: var(--cnvs-primary-font);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cnvs-white);
  margin-bottom: 0.25rem;
}

.cf-instructor-title {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-red-text);
  margin-bottom: 1rem;
  font-family: var(--cnvs-body-font);
  font-weight: 700;
}

.cf-instructor-creds {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cf-instructor-creds li {
  font-size: 0.875rem;
  color: var(--cf-muted);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--cf-border);
  display: flex;
  gap: 8px;
  align-items: center;
}

.cf-instructor-creds li:last-child { border-bottom: none; }
.cf-instructor-creds li i { color: var(--cf-gold); font-size: 0.75rem; }

/* Testimonials */
.cf-testimonial-card {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border);
  padding: 2rem;
  transition: border-color 0.2s;
}

.cf-testimonial-card:hover { border-color: rgba(var(--cnvs-themecolor-rgb), 0.3); }

.cf-testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
}

.cf-testimonial-stars i { color: var(--cf-gold); font-size: 0.875rem; }

.cf-testimonial-text {
  font-size: 1rem;
  color: var(--cf-text);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.cf-testimonial-text::before { content: '"'; color: var(--cf-red); font-size: 1.5rem; line-height: 0; vertical-align: -0.4rem; margin-right: 2px; }
.cf-testimonial-text::after { content: '"'; color: var(--cf-red); font-size: 1.5rem; line-height: 0; vertical-align: -0.4rem; margin-left: 2px; }

.cf-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cf-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--cnvs-themecolor-rgb), 0.4);
}

.cf-testimonial-name {
  font-family: var(--cnvs-primary-font);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnvs-white);
}

.cf-testimonial-meta {
  font-size: 0.75rem;
  color: var(--cf-muted);
}

/* Gallery */
.cf-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 6px;
}

@media (max-width: 767px) {
  .cf-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.cf-gallery-item {
  overflow: hidden;
  position: relative;
}

.cf-gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.cf-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s, filter 0.4s;
  aspect-ratio: 1;
}

.cf-gallery-item:first-child img { aspect-ratio: 1; }

.cf-gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.8);
}

/* Stats band */
.cf-stats-band {
  background: var(--cnvs-themecolor);
  padding: 3rem 0;
}

.cf-stats-band .cf-stat-num { color: var(--cnvs-white); font-size: 2.2rem; }
.cf-stats-band .cf-stat-label { color: rgba(255,255,255,0.7); }

@media (max-width: 575.98px) {
  .cf-stats-band .cf-stat-num { font-size: 1.6rem; }
}

.cf-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

@media (max-width: 767px) {
  .cf-stats-inner { grid-template-columns: repeat(2, 1fr); }
}

.cf-divider {
  border: none;
  border-top: 1px solid var(--cf-border);
  margin: 0;
}

/* Footer */
#footer {
  --cnvs-footer-bg: #0A0202;
  --cnvs-footer-top-border: 1px solid rgba(var(--cnvs-themecolor-rgb),0.2);
  --cnvs-copyrights-link-color: rgba(255,255,255,0.45);
}

.cf-footer-brand p {
  font-size: 1rem;
  color: var(--cf-muted);
  line-height: 1.7;
  margin-top: 1rem;
}

.cf-footer-heading {
  font-family: var(--cnvs-primary-font);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cnvs-white);
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--cf-border);
}

.cf-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cf-footer-links li { margin-bottom: 0.5rem; }

.cf-footer-links a {
  font-size: 1rem;
  color: var(--cf-muted);
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-footer-links a:hover { color: var(--cnvs-themecolor); }

.cf-footer-contact-item {
  display: flex;
  gap: 10px;
  align-items: center;      /* icon & text cùng trục ngang — bỏ hack margin-top:2px */
  margin-bottom: 0.8rem;
  font-size: 0.875rem;      /* đồng bộ với text (trước để inline → lệch line-box với icon) */
  line-height: 1.5;
  color: var(--cf-muted);
}

.cf-footer-contact-item i {
  color: var(--cf-red);
  font-size: 1rem;
  line-height: 1;           /* line-box của icon = đúng chiều cao glyph → canh giữa chuẩn */
  flex-shrink: 0;
}

/* Link trong contact item — TRƯỚC ĐÂY KHÔNG CÓ RULE NÀO ⇒ rơi vào --bs-link-color
   (= --cnvs-themecolor #CC1616) = 3.37:1 trên nền footer: TRƯỢT WCAG AA cho chữ 14px (§4).
   Nay chữ theo tông footer như .cf-footer-links (2 cột kia), ĐỎ để dành cho icon + hover
   ⇒ cả footer một ngôn ngữ link, và đỏ giữ đúng nghĩa "hành động". */
.cf-footer-contact-item a {
  color: var(--cf-muted);            /* 5.41:1 ✓ */
  text-decoration: none;
  transition: color 0.2s;
}

.cf-footer-contact-item a:hover,
.cf-footer-contact-item a:focus-visible {
  color: var(--cf-red-text);         /* 4.71:1 ✓ — đỏ chỉ xuất hiện khi tương tác */
}

.cf-social-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.cf-social-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--cf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}

.cf-social-btn:hover {
  background: var(--cnvs-themecolor);
  border-color: var(--cnvs-themecolor);
  color: var(--cnvs-white);
}

/* Animations */
@keyframes cf-fadein {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cf-animate { animation: cf-fadein 0.7s ease both; }
.cf-animate-d1 { animation-delay: 0.1s; }
.cf-animate-d2 { animation-delay: 0.25s; }
.cf-animate-d3 { animation-delay: 0.4s; }
.cf-animate-d4 { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .cf-animate { animation: none; }
}

/* Misc */
.text-red { color: var(--cnvs-themecolor) !important; }
.text-gold { color: var(--cf-gold) !important; }
.text-muted-cf { color: var(--cf-muted) !important; }
.bg-dark-card { background: var(--cf-dark2) !important; }

.cf-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 10px;
  font-family: var(--cnvs-body-font);
  border-radius: 2px;
}

.cf-tag-red { background: rgba(var(--cnvs-themecolor-rgb), 0.12); color: var(--cf-red); border: 1px solid rgba(var(--cnvs-themecolor-rgb), 0.3); }

/* Badge chủ đề chèn giữa .entry-image và .entry-title — KHÔNG phải component gốc Canvas
   nên phải tự lo khoảng cách (Canvas không cấp margin cho phần tử lạ).
   Scope #posts: .cf-tag còn dùng ở footer (badge Est.) — không được đụng vào đó. */
#posts .grid-inner > .cf-tag {
  margin-top: 0.15rem;
  margin-bottom: 0.6rem;
}

#copyrights { background: rgba(0,0,0,0.3); }
#copyrights a { color: var(--cnvs-themecolor) !important; }

.content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

.section {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 991px) {
  #disciplines .cf-disciplines-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 575px) {
  #disciplines .cf-disciplines-grid {
    grid-template-columns: 1fr !important;
  }
}
/* =============================================================
   12bv — Site-level additions (moved out of inline <style>)
   ============================================================= */

/* VIP strip: even distribution when số cấp thay đổi (was inline @ index) */
.vip-strip-6 .cf-belt { flex: 1 1 16.66%; }
.vip-strip-7 .cf-belt { flex: 1 1 14.28%; }

/* Anchor jump offset — sticky header không che tiêu đề section
   (thay cho scrollOffset của module onepage, trang không dùng onepage-link) */
html { scroll-padding-top: 80px; }

/* A11y — focus nhìn thấy được (Canvas custom buttons/inputs bỏ outline mặc định) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cnvs-themecolor);
  outline-offset: 2px;
}

/* Tôn trọng prefers-reduced-motion cho hero (bổ sung — brand.css đã tắt .cf-animate) */
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; }
}

/* ================================================================
   BLOG — dùng component NATIVE Canvas (.post-grid · .entry · .entry-meta ·
   .postcontent · .sidebar · .posts-sm · .posts-md · .tagcloud).
   Ở đây CHỈ có: (a) typography thân bài markdown, (b) 3 bản vá dark cho utility
   Bootstrap mà Canvas không remap. Không viết lại thứ Canvas đã lo.
   Thay cho <style> inline .cf-article cũ trong post.njk.
   ================================================================ */

/* --- Thân bài (markdown) ---
   Màu chữ / link / nền: để Canvas lo qua contrast scale + --cnvs-body-color.
   Chỉ set nhịp dọc + cỡ heading. */
.single-post .entry-content { font-size: 1rem; line-height: 1.85; }
.single-post .entry-content > *:first-child { margin-top: 0; }
.single-post .entry-content h2 { font-size: 1.5rem; margin: 2.4rem 0 0.9rem; }
.single-post .entry-content h3 { font-size: 1.18rem; margin: 1.8rem 0 0.7rem; }
.single-post .entry-content ul,
.single-post .entry-content ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.single-post .entry-content li { margin: 0.35rem 0; }
.single-post .entry-content strong { color: var(--cnvs-white); }
.single-post .entry-content img { max-width: 100%; height: auto; border-radius: var(--cnvs-post-image-rounded); }
.single-post .entry-content blockquote { border-left: 3px solid var(--cnvs-themecolor); padding-left: 1.2rem; }

/* Link thân bài = chữ <18px trên nền đen → --cf-red-text (4.92:1 ✓).
   --cnvs-themecolor (#C72222) chỉ 3.51:1 → trượt WCAG AA.

   ⚠ PHẢI dùng :not([class]) — KHÔNG dùng :not(.btn):not(.more-link).
   Link do markdown sinh ra KHÔNG có class; mọi link ta tự đặt trong template đều CÓ
   class (.btn-cf-primary · .social-icon · .more-link). Selector cũ `:not(.btn)` không
   loại được `.btn-cf-primary` (class là "btn-cf-primary", không phải "btn") → đè
   `color:var(--cnvs-white)` của nút ⇒ CHỮ ĐỎ TRÊN NỀN ĐỎ (1.40:1). */
.single-post .entry-content a:not([class]) {
  color: var(--cf-red-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Bảng trong bài: markdown-it đã bọc .table-responsive (eleventy.config.js).
   min-width là BẮT BUỘC — thiếu nó bảng width:100% luôn vừa khung, không kéo được
   (decisions.md §5). */
.single-post .entry-content .table-responsive > table { min-width: 560px; }

/* --- 3 utility Bootstrap KHÔNG được Canvas .dark remap ---
   .text-dark dùng --bs-dark-rgb (33,37,41) → đen trên đen. [data-bs-theme=dark]
   cũng KHÔNG remap biến này. Demo Canvas dùng .text-dark ở post-nav + tên tác giả
   → ta không copy class đó; 2 rule dưới chỉ để phòng hờ nếu lọt vào markup sau này. */
.dark .text-dark,
.dark a.text-dark { color: var(--cnvs-heading-color) !important; }
.dark .btn-outline-dark {
  --bs-btn-color: var(--cf-text);
  --bs-btn-border-color: var(--cf-border);
  --bs-btn-hover-bg: var(--cnvs-themecolor);
  --bs-btn-hover-border-color: var(--cnvs-themecolor);
  --bs-btn-hover-color: var(--cnvs-white);
}

/* --- Sidebar --- */
.sidebar .widget + .widget { margin-top: 2.5rem; }
.sidebar .widget > h4 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--cf-border);
}

/* ── Sidebar CTA sticky (desktop) ─────────────────────────────
   Khối "Nhận thưởng ngay" + banner bám theo khi cuộn bài dài.
   Chỉ ≥992px (khớp col-lg-3); mobile cột xếp dọc → để trôi tự nhiên. */
@media (min-width: 992px) {
  .cf-sidebar-sticky {
    position: sticky;
    top: 90px;            /* chừa chỗ cho header dính. Header desktop KHÔNG dính → hạ ~1.5rem */
  }
}

/* Khoảng cách khối sticky ↔ widget tĩnh phía trên = đúng nhịp .widget + .widget (2.5rem).
   Đặt NGOÀI @media để mobile (cột dọc, không sticky) cũng có gap đều. */
.cf-sidebar-sticky { margin-top: 2.5rem; }

/* ⚑ ĐIỀU KIỆN để sticky trên chạy: Canvas đặt .content-wrap { overflow:hidden } (style.css)
   → .content-wrap thành scroll-container, .cf-sidebar-sticky bám vào NÓ thay vì viewport = đơ.
   Class .cf-sticky-context CHỈ gắn ở .content-wrap của post.njk; đổi hidden → clip: cắt tràn
   y hệt nhưng KHÔNG tạo scroll-container → sticky bám viewport lại. .content-wrap trang khác
   giữ nguyên. brand.css nạp SAU style.css, cùng specificity (0,1,0) → thắng, khỏi !important. */
.cf-sticky-context { overflow: clip; }

/* Canvas có .bg-facebook/.bg-x-twitter/.bg-whatsapp/.bg-email3 nhưng THIẾU .bg-telegram —
   Telegram là kênh chính của site. Bổ sung đúng 1 hằng màu THƯƠNG HIỆU BÊN THỨ BA
   (cùng loại ngoại lệ với .belt-* / vip.json — không phải màu brand của mình). */
:root { --cf-telegram: #229ED9; }
.bg-telegram { background-color: var(--cf-telegram) !important; }

/* Kết quả tìm kiếm blog (widget sidebar). Input dùng .form-control/.input-group native
   — đã dark sẵn nhờ data-bs-theme="dark", 0 override. Chỉ style danh sách kết quả. */
.cf-search-results { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.cf-search-results li + li { border-top: 1px solid var(--cf-border); }
.cf-search-results a { display: block; padding: 0.55rem 0; font-size: 0.875rem; line-height: 1.5; color: var(--cnvs-heading-color); }
.cf-search-results a:hover { color: var(--cnvs-themecolor); }
.cf-search-cat { display: block; font-size: 0.75rem; color: var(--cf-muted); margin-top: 0.15rem; }
.cf-search-empty { font-size: 0.875rem; color: var(--cf-muted); margin: 0.75rem 0 0; }

/* Thumbnail "Bài mới nhất" (sidebar): chữ nhật 4:3, bo nhẹ — KHÔNG tròn. */
.cf-thumb-sm {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* CTA sidebar: LUÔN 1 dòng ở MỌI browser.
   Cột sidebar ~261px (container 1140) → nút full-width. "Tham gia ngay" ở 1rem gốc + padding
   2.2rem dễ tràn 2 dòng. Fix baseline không phụ thuộc tính năng mới: nowrap + font 0.9rem +
   padding gọn ⇒ ~200px < 261px, luôn vừa (KHÔNG dùng cqi/vw — chúng fail thầm ở browser cũ).
   Nâng cấp (browser ~2023+ hỗ trợ @container): cột cực hẹp thì đổi hẳn nhãn sang "Đăng ký". */
.cf-cta-sidebar {
  white-space: nowrap;
  justify-content: center;
  width: 100%;
  font-size: 0.9rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.cf-cta-sidebar .cf-cta-short { display: none; }
.sidebar { container-type: inline-size; }
@container (max-width: 200px) {
  .cf-cta-sidebar .cf-cta-full  { display: none; }
  .cf-cta-sidebar .cf-cta-short { display: inline; }
}

:root {
  --cf-selection-bg: #FF4D4F;
  --cf-selection-text: #FFFFFF;
}

::-moz-selection {
  background: var(--cf-selection-bg);
  color: var(--cf-selection-text);
  text-shadow: none;
}

::selection {
  background: var(--cf-selection-bg);
  color: var(--cf-selection-text);
  text-shadow: none;
}

/* ================================================================
   BLOG COMPONENTS — hỗ trợ shortcode dùng lại markup trang chủ
   trong thân bài viết (.entry-content) và .cf-prose.
   Xem eleventy.config.js § BLOG COMPONENTS.
   ================================================================ */

/* 1 · GUARD — `.single-post .entry-content h3` (0,2,1) ĐÈ `.cf-kids-title` (0,1,0)
      ⇒ h3 trong card ăn font-size 1.18rem + margin 1.8rem của thân bài, vỡ card.
      Cùng loại safety-net với `.btn-cf-primary:link` (§10 trap 6). Giữ h3 để
      không mất outline heading của bài. */
.single-post .entry-content h3.cf-kids-title,
.cf-prose h3.cf-kids-title {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

/* 2 · Bảng tab trong thân bài — cột `.postcontent col-lg-9` chỉ ~672px ở dải
      992–1199px, trong khi `.cf-schedule-table` có min-width 720px ⇒ scroll ngang
      ngay trên laptop. Biến thể này dành cho bảng ≤3 cột. */
.cf-schedule-table--narrow { min-width: 460px; }

/* 3 · Nhịp dọc cho khối shortcode. Class riêng, KHÔNG đụng `.cf-kids-grid` gốc
      để trang chủ giữ nguyên. */
.cf-cta-block,
.cf-tabtable,
.cf-card-grid,
.cf-faq-grid { margin: 2rem 0; }

/* 4 · Ô ảnh placeholder — dùng khi item chưa khai báo `img`.
      KHÔNG phát <img> trỏ file chưa tồn tại: sẽ 404 mà build vẫn xanh
      (đúng lỗi allwyn-mua-novibet, §10). Kế thừa aspect-ratio 3/4 từ
      `.cf-instructor-img` nên khung không đổi khi thay ảnh thật. */
.cf-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: var(--cf-dark);
  border: 1px dashed var(--cf-border);
  color: var(--cf-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 5 · ctaPair căn giữa trong thân bài (bổ sung 2026-07-28).
      Chỉ tác động `.cf-cta-block` — hero trang chủ dùng `.cf-hero-ctas` trần nên
      giữ nguyên căn trái. Dưới 576px `.cf-hero-ctas` đã chuyển sang
      flex-direction:column + align-items:stretch ⇒ rule này vô hại ở mobile. */
.cf-cta-block { justify-content: center; }

/* 6 · Nhịp dọc cho component Tier 2 */
.cf-quote-grid,
.cf-product-grid,
.cf-plan-grid,
.cf-tier-list,
.cf-stat-row,
.cf-check-list,
.cf-promo-banner { margin: 2rem 0; }

/* 7 · Dải tag cuối bài (tagList). Chip = .cf-class-badge sẵn có + trạng thái link. */
.cf-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
}
.cf-tag-list-label { font-size: 0.875rem; color: var(--cf-muted); margin-right: 0.25rem; }
a.cf-tag-chip { text-decoration: none; transition: opacity 0.15s; }
a.cf-tag-chip:hover { opacity: 0.85; }

/* ---- Provider marquee (2 hàng ngược chiều) ---- */
.cf-marquee{
  overflow:hidden;
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  background:var(--cf-black2);
  border-top:1px solid var(--cf-border);
  border-bottom:1px solid var(--cf-border);
  padding:18px 0;
}
.cf-marquee-track{
  display:flex; width:max-content; align-items:center;
  animation:cf-marquee 60s linear infinite;   /* chỉnh 40–80s theo mắt */
  will-change:transform;
}
.cf-marquee-track--rev{ animation-direction:reverse; }   /* hàng 2 chạy ngược */
.cf-marquee:hover .cf-marquee-track{ animation-play-state:paused; }
.cf-marquee img{
  height:32px; width:auto; display:block;
  margin:0 clamp(18px,3vw,40px);
  opacity:.55; transition:opacity .25s ease;
  /* SVG còn màu? bỏ comment để ép trắng đồng bộ:
  filter:brightness(0) invert(1); */
}
.cf-marquee img:hover{ opacity:1; }
@keyframes cf-marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }   /* -50% vì mỗi hàng render 2 lần */
}
@media (prefers-reduced-motion:reduce){ .cf-marquee-track{ animation:none; } }