:root {
  --ck-font-base: "Segoe UI", Tahoma, sans-serif;
  --ck-color-bg: #0b1220;
  --ck-color-surface: #121a2a;
  --ck-color-text: #e9eef8;
  --ck-color-muted: #9aa8bf;
  --ck-color-primary: #1e63ff;
  --ck-space-1: 4px;
  --ck-space-2: 8px;
  --ck-space-3: 12px;
  --ck-space-4: 16px;
  --ck-space-5: 24px;
  --ck-radius: 10px;
  /* Thanh cuộn (khớp nền tối, tránh track trắng mặc định Windows) */
  --ck-scrollbar-track: var(--ck-color-bg);
  --ck-scrollbar-thumb: rgba(154, 168, 191, 0.35);
  --ck-scrollbar-thumb-hover: rgba(154, 168, 191, 0.55);
}

body {
  font-family: var(--ck-font-base);
  color: var(--ck-color-text);
}

.dv2-layout-ck .dv2-list-match,
.dv2-layout-ck .dv2-right-box,
.dv2-layout-ck .dv2-main-layout {
  display: grid;
  gap: var(--ck-space-4);
}

.dv2-layout-ck .dv2-match-item,
.dv2-layout-ck .dv2-item,
.dv2-layout-ck .dv2-card {
  background: var(--ck-color-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ck-radius);
  padding: var(--ck-space-3) var(--ck-space-4);
}

.dv2-layout-ck .dv2-meta,
.dv2-layout-ck .dv2-time,
.dv2-layout-ck .dv2-league-name {
  color: var(--ck-color-muted);
}

.dv2-layout-ck a,
.dv2-layout-ck .button,
.dv2-layout-ck .btn {
  color: #fff;
}

/* ---------- Thanh cuộn trang (Firefox) ---------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ck-scrollbar-thumb) var(--ck-scrollbar-track);
}

/* ---------- Thanh cuộn trang (Chrome, Edge, Safari, Opera) ---------- */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track {
  background: var(--ck-scrollbar-track);
}

html::-webkit-scrollbar-thumb {
  background: var(--ck-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--ck-scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--ck-scrollbar-thumb-hover);
}

html::-webkit-scrollbar-corner {
  background: var(--ck-scrollbar-track);
}

/*
 * Mobile: tràn ngang — xung đột Flatsome + custom*.css
 * Flatsome: .row:not(.row-collapse) { margin-left/right: -15px } cân bằng padding ngang .col.
 * custom6212 (và các custom*.css): @media (max-width:549px) .col { padding: 0 } → mất gutter nhưng
 * row vẫn margin âm → nội dung tràn khỏi viewport.
 */
@media (max-width: 549px) {
  .row:not(.row-collapse),
  .row .gallery,
  .row .row:not(.row-collapse) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-small:not(.row-collapse),
  .row .row-small:not(.row-collapse),
  .row-large:not(.row-collapse),
  .row .row-large:not(.row-collapse),
  .row-xsmall:not(.row-collapse),
  .row .row-xsmall:not(.row-collapse) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Flex layout Cakhia: con phải co được trong viewport */
@media (max-width: 849px) {
  .cakhia2-wrapper,
  .cakhia2-main-content {
    min-width: 0;
  }

  .col-inner {
    box-sizing: border-box;
    max-width: 100%;
  }

  .entry-content img,
  .entry-content video,
  .entry-content iframe,
  .col-inner img,
  .col-inner video,
  .col-inner iframe,
  .section-content img {
    max-width: 100%;
    height: auto;
  }

  .entry-content,
  .col-inner,
  .section-content {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}