/* ===================================================
   Classic Theme — Inspired by xsmn.mobi layout
   Scoped under #classic-theme to avoid Tailwind clash
   =================================================== */

#classic-theme * { box-sizing: border-box; }
#classic-theme { background: #f0f0f0; min-height: 100vh; }

/* Bo vuong toan bo trong Classic theme */
#classic-theme *,
#classic-theme *::before,
#classic-theme *::after { border-radius: 0 !important; }

#classic-theme .soicau-ball,
#classic-theme .rounded-xl,
#classic-theme .rounded-2xl,
#classic-theme .rounded-full,
#classic-theme .bingo-ball-pop {
  border-radius: 9999px !important;
}

/* Bo gap (space-y) giua cac khoi content — sat nhau kieu co dien */
#classic-theme .space-y-3 > * + *,
#classic-theme .space-y-6 > * + * { margin-top: 0 !important; }
#classic-theme .shadow-sm { box-shadow: none !important; }

/* Gap giua cac ky xo so — nen page lo ra giua cac block */
#classic-theme .classic-date-groups { display: flex; flex-direction: column; gap: 12px; }

/* Remove all borders from first result block — flush with tabs above */
#classic-theme .classic-first-block > div:first-child { border: none !important; box-shadow: none !important; }

/* Exceptions: giu tron cho cac phan tu vong tron */
#classic-theme .rounded-full,
#classic-theme .vietlott-ball,
#classic-theme .dt-ball,
#classic-theme .vietlott-mini-ball,
#classic-theme .vl-inline-ball,
#classic-theme .keno-ball,
#classic-theme .keno-ball-spinning,
#classic-theme .bingo-ball-pop,
#classic-theme .live-prize-spinner,
  #classic-theme .soicau-ball,
#classic-theme .vietlott-ball::before,
#classic-theme .dt-ball::before,
#classic-theme .keno-ball::before,
#classic-theme .keno-ball-spinning::before { border-radius: 50% !important; }

/* live-dot dung width/height co dinh — dung 50% thay 9999px */
#classic-theme .live-dot { border-radius: 50% !important; }

/* Link color chi ap dung cho sidebar va breadcrumb — KHONG ap dung vao .col-l (component goc) */
#classic-theme aside.col-r a,
#classic-theme ul.tab-panel a,
#classic-theme .title-bor a,
#classic-theme .title-bor-c1 a,
#classic-theme footer a { color: #0066cc; text-decoration: none; }
#classic-theme aside.col-r a:hover,
#classic-theme ul.tab-panel a:hover { color: #cc0000; text-decoration: none; }

/* ---- Clearfix ---- */
#classic-theme .clearfix::after { content: ""; display: table; clear: both; }

/* ---- Main wrapper ---- */
#classic-theme .xsmain { max-width: 1100px; margin: 0 auto; padding: 0 5px; }

/* ====== CONTENT WRAPPER ====== */
#classic-theme section.xscontent { margin-top: 5px; }
#classic-theme .col2 { overflow: hidden; }
#classic-theme .col-l { float: left; width: 73%; }
#classic-theme .col-r { float: right; width: 25%; }

/* ====== TAB PANEL (ngay trong tuan) ====== */
#classic-theme ul.tab-panel { list-style: none; margin: 5px 0; padding: 0; display: flex; flex-wrap: wrap; border-bottom: 2px solid #cc0000; }
#classic-theme ul.tab-panel li a { display: block; padding: 5px 10px; color: #333; border: 1px solid #ddd; border-bottom: none; margin-right: 2px; margin-bottom: -1px; font-size: 12px; background: #f5f5f5; }
#classic-theme ul.tab-panel li a:hover { color: #cc0000; text-decoration: none; }
#classic-theme ul.tab-panel li.active a { background: #cc0000; color: #fff; border-color: #cc0000; }

#classic-theme .skq-shot-head { margin: 5px 0 10px; border: 1px solid #d7dbe3; background: #fff; overflow: hidden; }
#classic-theme .skq-shot-row { display: grid; background: #fff; }
#classic-theme .skq-shot-row + .skq-shot-row { border-top: 1px solid #d7dbe3; }
#classic-theme .skq-shot-row-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#classic-theme .skq-shot-row-days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#classic-theme .skq-shot-tab { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 6px; border-right: 1px solid #d7dbe3; color: #44597a; background: #fff; text-align: center; font-weight: 700; text-decoration: none; }
#classic-theme .skq-shot-tab:last-child { border-right: none; }
#classic-theme .skq-shot-row-regions .skq-shot-tab { min-height: 60px; font-size: 18px; line-height: 1.2; }
#classic-theme .skq-shot-row-days .skq-shot-tab { min-height: 46px; font-size: 15px; line-height: 1.2; font-weight: 600; }
#classic-theme .skq-shot-row-regions .skq-shot-tab.is-active { background: #d91517; color: #fff; }
#classic-theme .skq-shot-row-days .skq-shot-tab.is-active { background: #faecec; color: #dd1b1b; }
#classic-theme .skq-shot-row-regions .skq-shot-tab:hover { background: #fff5f5; color: #d91517; text-decoration: none; }
#classic-theme .skq-shot-row-regions .skq-shot-tab.is-active:hover { background: #d91517; color: #fff; }
#classic-theme .skq-shot-row-days .skq-shot-tab:hover { background: #fff6f6; color: #d91517; text-decoration: none; }

/* ====== TITLE BARS ====== */
#classic-theme .title-bor-c1 { background: #cc0000; color: #fff; padding: 5px 8px; }
#classic-theme .title-bor-c1 h2 { font-size: 14px; font-weight: bold; margin: 0; display: inline; }
#classic-theme .title-bor { border: 1px solid #e0e0e0; border-top: none; padding: 4px 6px; background: #f9f9f9; font-size: 12px; }

/* ====== CITY WRAPPER ====== */
#classic-theme .ba-city,
#classic-theme .bon-city { border: 1px solid #ddd; border-top: none; margin-bottom: 8px; overflow-x: auto; }

/* ====== PRIZE TABLE ====== */
#classic-theme table.read-result { width: 100%; border-collapse: collapse; }
#classic-theme table.read-result thead tr th { background: #d6e4f5; border: 1px solid #c8d8ec; padding: 4px 3px; text-align: center; font-size: 13px; }
#classic-theme table.read-result thead tr th.first { width: 28px; min-width: 28px; background: #e8e8e8; }
#classic-theme table.read-result tbody tr td { border: 1px solid #ddd; padding: 5px 4px; text-align: center; vertical-align: top; }
#classic-theme table.read-result tbody tr td:first-child { font-size: 12px; font-weight: bold; color: #555; background: #f5f5f5; width: 32px; vertical-align: middle; text-align: center; }
#classic-theme table.read-result tbody tr.gdb { background: #fff5f5; }
#classic-theme table.read-result tbody tr.gdb td { vertical-align: middle; }

/* Prize number divs */
#classic-theme .v-gdb { display: block; font-size: 36px; font-weight: bold; color: #cc0000; line-height: 1.25; letter-spacing: 1px; }
#classic-theme .v-g1  { display: block; font-size: 24px; font-weight: bold; color: #000; line-height: 1.3; }
#classic-theme .v-g2  { display: block; font-size: 20px; font-weight: bold; color: #000; line-height: 1.35; }
#classic-theme .v-g3-0, #classic-theme .v-g3-1 { display: block; font-size: 18px; line-height: 1.35; }
#classic-theme .v-g4-0, #classic-theme .v-g4-1, #classic-theme .v-g4-2,
#classic-theme .v-g4-3, #classic-theme .v-g4-4, #classic-theme .v-g4-5,
#classic-theme .v-g4-6 { display: block; font-size: 16px; line-height: 1.4; }
#classic-theme .v-g5  { display: block; font-size: 18px; line-height: 1.35; }
#classic-theme .v-g6-0, #classic-theme .v-g6-1, #classic-theme .v-g6-2 { display: block; font-size: 16px; line-height: 1.4; }
#classic-theme .v-g7  { display: block; font-size: 16px; line-height: 1.4; }
#classic-theme .v-g8  { display: block; font-size: 16px; line-height: 1.4; }

/* Highlight (digit filter) */
#classic-theme .num-hl { color: #cc0000 !important; font-weight: bold; }
#classic-theme .num-dim { opacity: 0.18; }

/* Text alignment helpers */
#classic-theme .txt-center { text-align: center; }
#classic-theme .border-x { border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; }
#classic-theme .bold { font-weight: bold; }
#classic-theme .colorLinkBlue { color: #0055aa; text-decoration: none; }
#classic-theme .colorLinkBlue:hover { color: #cc0000; text-decoration: underline; }

/* ====== CONTROL PANEL (filter bar BELOW table) ====== */
#classic-theme .control-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 8px; border: 1px solid #ddd; border-top: none; background: #fafafa; margin-bottom: 8px; }
#classic-theme .digits-form { display: flex; align-items: center; gap: 10px; }
#classic-theme .digits-form label.radio { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; cursor: pointer; }
#classic-theme .digits-form label.radio input { cursor: pointer; }
#classic-theme .digit-btns { display: flex; gap: 3px; }
#classic-theme .digit-btn { min-width: 22px; height: 22px; border: 1px solid #ccc; background: #fff; font-size: 12px; cursor: pointer; border-radius: 2px; padding: 0 3px; }
#classic-theme .digit-btn:hover { background: #ffd0d0; border-color: #cc0000; }
#classic-theme .digit-btn.active { background: #cc0000; color: #fff; border-color: #cc0000; }

/* ====== LOTO TABLE (dau/duoi) ====== */
#classic-theme .colgiai { margin-bottom: 8px; }
#classic-theme table.firstlast-mn { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
#classic-theme table.firstlast-mn th,
#classic-theme table.firstlast-mn td { border: 1px solid #ddd; padding: 2px 4px; text-align: center; }
#classic-theme table.firstlast-mn tr.header th { background: #d6e4f5; font-size: 12px; }
#classic-theme table.firstlast-mn th.first { width: 22px; background: #eee; }
#classic-theme .clred { color: #cc0000 !important; }

/* ====== XSMB SINGLE PROVINCE TABLE ====== */
#classic-theme table.xsmb-table { width: 100%; border-collapse: collapse; }
#classic-theme table.xsmb-table td { border: 1px solid #ddd; padding: 6px 8px; vertical-align: middle; }
#classic-theme table.xsmb-table td.lbl { width: 30px; font-size: 11px; font-weight: bold; color: #555; background: #f5f5f5; text-align: center; white-space: nowrap; }
#classic-theme table.xsmb-table td.nums { text-align: left; }
#classic-theme table.xsmb-table tr.gdb-row { background: #fff5f5; }
#classic-theme .xsmb-num { display: inline-block; margin: 2px 5px; }
#classic-theme .xsmb-num.db  { font-size: 36px; font-weight: bold; color: #cc0000; letter-spacing: 1px; }
#classic-theme .xsmb-num.g1  { font-size: 24px; font-weight: bold; }
#classic-theme .xsmb-num.g2  { font-size: 20px; font-weight: bold; }
#classic-theme .xsmb-num.g3  { font-size: 18px; }
#classic-theme .xsmb-num.g4  { font-size: 16px; }
#classic-theme .xsmb-num.g5  { font-size: 16px; }
#classic-theme .xsmb-num.g6  { font-size: 16px; }
#classic-theme .xsmb-num.g7  { font-size: 16px; }

/* ====== SIDEBAR ====== */
#classic-theme aside.col-r .box { margin-bottom: 8px; border: 1px solid #ddd; background: #fff; }
#classic-theme .title-r { background: #cc0000; padding: 7px 10px; display: flex; align-items: center; }
#classic-theme .title-r .title-a { color: #fff; font-weight: bold; font-size: 14px; text-shadow: 0 1px rgba(0,0,0,.3); display: block; }
#classic-theme .title-r .title-a:hover { text-decoration: none; color: #ffe; }
#classic-theme ul.list-citymn-cale { list-style: none; margin: 0; padding: 4px; display: flex; flex-wrap: wrap; }
#classic-theme ul.list-citymn-cale li { width: 50%; }
#classic-theme ul.list-citymn-cale li a { font-size: 13px; color: #0055aa; line-height: 2; display: block; padding: 0 4px; }
#classic-theme ul.list-citymn-cale li a:hover { color: #cc0000; text-decoration: none; }
#classic-theme .title-r:before {
    background-image: url(https://xskh.co.uk/wp-content/uploads/2026/04/icon-coin.webp);
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: contain;
    margin-right: 6px;
}

/* ====== LIVE BADGE ====== */
#classic-theme .live-badge { display: inline-flex; align-items: center; gap: 4px; background: #cc0000; color: #fff; font-size: 11px; font-weight: bold; padding: 1px 5px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
#classic-theme .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: liveblink 1s infinite; }
@keyframes liveblink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ====== CLASSIC HEADER (xsmn.mobi style) ====== */

/* Wrapper */
#classic-theme .ch-header { background: #fff; position: relative; z-index: 1000; }

/* Container dung chung voi .xsmain width */
#classic-theme .ch-container { max-width: 1100px; margin: 0 auto; padding: 0 8px; }

/* --- H1 title bar --- */
#classic-theme .ch-title-bar {
  padding: 4px 0;
}
#classic-theme .ch-title-h1 {
  font-size: 12px;
  font-weight: normal;
  color: #555;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* --- Logo row --- */
#classic-theme .ch-logo-row {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 8px 0;
}
#classic-theme .ch-logo-row .ch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#classic-theme .ch-logo-main-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#classic-theme .ch-mobile-modern-btn {
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}

#classic-theme .ch-mobile-modern-btn:hover {
  background: rgba(255,255,255,0.2);
}

#classic-theme .xs-mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

#classic-theme .xs-mobile-menu-list li {
  border-bottom: 1px solid #ddd;
}

#classic-theme .xs-mobile-menu-list li:last-child {
  border-bottom: 0;
}

#classic-theme .xs-mobile-menu-list > li > a,
#classic-theme .xs-mobile-item-row > a {
  display: block;
  padding: 14px 20px;
  color: #333 !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease;
}

#classic-theme .xs-mobile-menu-list > li > a:hover,
#classic-theme .xs-mobile-item-row > a:hover {
  color: #cc0000 !important;
  background: rgba(255,255,255,0.1);
}

#classic-theme .xs-mobile-menu-list > li > a.is-active-mobile,
#classic-theme .xs-mobile-item-row > a.is-active-mobile {
  color: #facc15 !important;
  background: rgba(255,255,255,0.1);
}

#classic-theme .xs-mobile-item-row {
  display: flex;
  align-items: center;
}

#classic-theme .xs-mobile-item-row > a {
  flex: 1;
}

#classic-theme .xs-mobile-item-toggle {
  padding: 14px 16px;
  color: rgba(255,255,255,0.8);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .2s ease;
}

#classic-theme .xs-mobile-item-toggle:hover {
  color: #fff;
}

#classic-theme .xs-mobile-submenu {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
}

#classic-theme .xs-mobile-submenu a {
  display: block;
  padding: 10px 20px 10px 40px;
  color: rgba(255,255,255,0.9) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

#classic-theme .xs-mobile-submenu a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06);
}

#classic-theme .xs-mobile-submenu a.is-active-mobile {
  color: #facc15 !important;
  background: rgba(255,255,255,0.08);
}

#classic-theme .xs-mobile-submenu a:last-child {
  border-bottom: 0;
}

#classic-theme .xs-mobile-sub-title {
  padding: 6px 20px 5px 24px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(250,204,21,0.85);
  background: rgba(255,255,255,0.05);
}

/* Fallback styles for modern-like mobile menu in classic */
#classic-theme #xsMobileMenu {
  color: #fff;
}
#classic-theme #xsMobileMenu.hidden {
  display: none !important;
}

/* Logo link */
#classic-theme .ch-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: inherit;
}
#classic-theme .ch-logo img { max-height: 60px; }

/* Ball icon */
#classic-theme .ch-ball { display: flex; align-items: center; flex-shrink: 0; }
#classic-theme .ch-ball svg { display: block; }

/* Logo name */
#classic-theme .ch-logo-name {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  font-family: Arial, sans-serif !important;
}
#classic-theme .ch-logo-main { color: #e87722; }
#classic-theme .ch-logo-hl   { color: #cc0000; font-size: 36px; }

/* Slogan */
#classic-theme .ch-slogan {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

/* --- Nav bar --- */
#classic-theme .ch-navbar {
  background: #c00;
  overflow: visible;
  position: relative;
  z-index: 100;
}
#classic-theme .ch-navbar .ch-container {
  position: static;
  overflow: visible;
}

/* Nav scroll wrapper */
#classic-theme .ch-nav-scroll {
  overflow: visible;
}

/* Nav list */
#classic-theme .ch-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
}
#classic-theme .ch-nav-list li a {
  display: block;
  padding: 10px 14px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: .3px;
  transition: background .15s;
}
#classic-theme .ch-nav-list li a:hover {
  background: rgba(0,0,0,0.15);
  text-decoration: none !important;
}
#classic-theme .ch-nav-list li.active > a {
  background: #a00000;
  position: relative;
}
#classic-theme .ch-nav-list li.active > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #fff;
}

/* Arrow icon in nav items with sub */
#classic-theme .ch-nav-arrow {
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  opacity: 0.8;
}

/* Nav item wrapper */
#classic-theme .ch-nav-list li.ch-nav-item {
  position: relative;
}

/* --- Dropdown --- */
#classic-theme .ch-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  border-top: 2px solid #cc0000;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#classic-theme .ch-nav-item.has-sub:hover > .ch-dropdown {
  display: block;
}
#classic-theme .ch-nav-list .ch-dropdown a {
  display: block !important;
  padding: 8px 14px !important;
  color: #333 !important;
  font-size: 13px !important;
  font-weight: normal !important;
  border-bottom: 1px solid #f0f0f0;
  background: #fff !important;
}
#classic-theme .ch-nav-list .ch-dropdown a:last-child { border-bottom: none; }
#classic-theme .ch-nav-list .ch-dropdown a:hover { background: #c00 !important; color: #fff !important; }
#classic-theme .ch-nav-list .ch-dropdown a.active { color: #cc0000 !important; font-weight: bold !important; }

/* Grouped dropdown — flex layout */
#classic-theme .ch-dropdown.ch-dropdown-groups {
  display: none;
  flex-direction: row;
}
#classic-theme .ch-nav-item.has-sub:hover > .ch-dropdown.ch-dropdown-groups {
  display: flex;
}
#classic-theme .ch-dropdown-group {
  flex: 1;
  border-right: 1px solid #f0f0f0;
}
#classic-theme .ch-dropdown-group:last-child { border-right: none; }
#classic-theme .ch-dropdown-group-title {
  background: #cc0000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Mobile nav --- */
#classic-theme .ch-mobile-nav {
  background: #cc0000;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-height: 70vh;
  overflow-y: auto;
}
#classic-theme .ch-mobile-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#classic-theme .ch-mobile-item-row {
  display: flex;
  align-items: center;
}
#classic-theme .ch-mobile-item-row > a {
  flex: 1;
  display: block;
  padding: 10px 14px;
  color: #fff !important;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none !important;
}
#classic-theme .ch-mobile-item-row > a.active { color: #ffdd00 !important; }
#classic-theme .ch-mobile-item-row > button {
  padding: 10px 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
#classic-theme .ch-mobile-sub {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
}
#classic-theme .ch-mobile-sub a {
  display: block;
  padding: 8px 14px 8px 24px;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#classic-theme .ch-mobile-sub a:last-child { border-bottom: none; }
#classic-theme .ch-mobile-sub a:hover { color: #fff !important; }
#classic-theme .ch-mobile-sub-title {
  padding: 5px 14px 3px 14px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Mobile toggle bar — hidden by default */
#classic-theme .ch-mobile-toggle {
  display: none;
}

/* Mobile slide-down menu — handled by .ch-mobile-nav rules from production */

/* --- Sub-nav (ngay trong tuan) --- */
#classic-theme .ch-subnav {
  background: #a00000;
  border-top: 1px solid rgba(255,255,255,0.15);
}
#classic-theme .ch-subnav .ch-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 2px;
  padding: 2px 8px;
}
#classic-theme .ch-subnav .ch-container::-webkit-scrollbar { display: none; }
#classic-theme .ch-subnav-label {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0 2px;
}
#classic-theme .ch-subnav-sep {
  color: rgba(255,255,255,0.3);
  padding: 0 4px;
  font-size: 12px;
}
#classic-theme .ch-subnav-link {
  display: inline-block;
  padding: 4px 10px;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
}
#classic-theme .ch-subnav-link:hover,
#classic-theme .ch-subnav-link.active {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Mobile responsive — header/logo (< 768px) */
@media (max-width: 767px) {
  #classic-theme .ch-logo-name { font-size: 24px; }
  #classic-theme .ch-logo-hl   { font-size: 28px; }
  #classic-theme .ch-ball svg  { width: 32px; height: 32px; }
  #classic-theme .ch-slogan    { display: none; }
  #classic-theme .ch-nav-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #classic-theme .ch-nav-scroll::-webkit-scrollbar { display: none; }
  #classic-theme .ch-nav-list li a { padding: 9px 11px; font-size: 12px; }
}

/* ====== FOOTER ====== */
#classic-theme footer {
  background: #a70000;
  color: #fff;
  margin-top: 10px;
}
#classic-theme .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5px;
}

/* Footer link columns */
#classic-theme .footer-cols {
  display: flex;
  flex-wrap: wrap;
  padding: 18px 0 14px;
  border-bottom: 1px solid #555;
}
#classic-theme .footer-col {
  flex: 0 0 25%;
  padding: 0 10px;
}
#classic-theme .footer-col-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
#classic-theme .footer-col-title a {
  color: #fff;
  text-decoration: none;
}
#classic-theme .footer-col-title a:hover { color: #ffcc00; }
#classic-theme .footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#classic-theme .footer-col-list li { padding: 3px 0; }
#classic-theme .footer-col-list li a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}
#classic-theme .footer-col-list li a:hover { color: #fff; }

/* Footer policy links */
#classic-theme .footer-policy-links {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}
#classic-theme .footer-policy-links li a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
#classic-theme .footer-policy-links li a:hover { color: #ffcc00; }

/* Footer description, keywords, copyright */
#classic-theme .footer-desc {
  font-size: 12px;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.7;
  text-align: center;
}
#classic-theme .footer-keywords {
  font-size: 11px;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.5;
  text-align: center;
}
#classic-theme .footer-copyright {
  font-size: 12px;
  color: #fff;
  margin: 0;
  text-align: center;
  padding-bottom: 16px;
}
#classic-theme footer a { color: #fff; }

/* ====== BACK TO TOP BUTTON ====== */
#classic-theme .go-top {
  position: fixed;
  bottom: 20px;
  right: 16px;
  width: 38px;
  height: 38px;
  background: #cc0000;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  line-height: 1;
}
#classic-theme .go-top:hover { background: #aa0000; }

/* ====== SIDEBAR TOGGLE BUTTON (mobile only) ====== */
#classic-theme .sidebar-toggle-btn {
  display: none;
  width: 100%;
  background: #cc0000;
  color: #fff;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
#classic-theme .sidebar-toggle-btn:hover { background: #aa0000; }

/* ====== RESPONSIVE MOBILE ====== */
@media (max-width: 767px) {
  /* 1-column layout */
  #classic-theme .col-l { float: none; width: 100%; }
  #classic-theme .col-r { float: none; width: 100%; margin-top: 6px; }
  #classic-theme .col-r.mobile-closed { display: none; }

  /* Toggle sidebar button visible on mobile */
  #classic-theme .sidebar-toggle-btn { display: flex; }

  /* Result tables — horizontal scroll when needed */
  #classic-theme .ba-city,
  #classic-theme .bon-city { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Day tabs — horizontal scroll */
  #classic-theme ul.tab-panel {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid #cc0000;
  }
  #classic-theme ul.tab-panel::-webkit-scrollbar { display: none; }
  #classic-theme ul.tab-panel li { flex-shrink: 0; }
  #classic-theme ul.tab-panel li a { padding: 6px 10px; font-size: 12px; white-space: nowrap; }

  /* Control panel — stack on mobile */
  #classic-theme .control-panel { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 8px; }
  #classic-theme .digits-form  { flex-wrap: wrap; gap: 6px; }
  #classic-theme .digit-btns   { flex-wrap: wrap; gap: 3px; }

  /* Title bars */
  #classic-theme .title-bor-c1 h2 { font-size: 13px; }

  /* Prize number sizes — smaller on mobile */
  #classic-theme .v-gdb { font-size: 26px; }
  #classic-theme .v-g1  { font-size: 18px; }
  #classic-theme .v-g2  { font-size: 16px; }
  #classic-theme .v-g3-0, #classic-theme .v-g3-1,
  #classic-theme .v-g4-0, #classic-theme .v-g4-1, #classic-theme .v-g4-2,
  #classic-theme .v-g4-3, #classic-theme .v-g4-4, #classic-theme .v-g4-5,
  #classic-theme .v-g4-6, #classic-theme .v-g5,
  #classic-theme .v-g6-0, #classic-theme .v-g6-1, #classic-theme .v-g6-2,
  #classic-theme .v-g7, #classic-theme .v-g8 { font-size: 13px; }

  /* XSMB mobile */
  #classic-theme .xsmb-num.db  { font-size: 26px; }
  #classic-theme .xsmb-num.g1  { font-size: 18px; }
  #classic-theme .xsmb-num.g2  { font-size: 16px; }
  #classic-theme .xsmb-num.g3, #classic-theme .xsmb-num.g4,
  #classic-theme .xsmb-num.g5, #classic-theme .xsmb-num.g6,
  #classic-theme .xsmb-num.g7 { font-size: 13px; }

  /* Main container padding smaller */
  #classic-theme .xsmain { padding: 0 4px; }

  /* Loto table */
  #classic-theme table.firstlast-mn { font-size: 11px; }
  #classic-theme table.firstlast-mn th,
  #classic-theme table.firstlast-mn td { padding: 2px 2px; }

  /* Prize table */
  #classic-theme table.read-result thead tr th { font-size: 12px; padding: 3px 2px; }
  #classic-theme table.read-result tbody tr td { padding: 4px 2px; font-size: 12px; }

  /* Sidebar boxes — 3-column list on mobile */
  #classic-theme ul.list-citymn-cale li { width: 33.33%; }

  /* Footer cols — 2 columns on mobile */
  #classic-theme .footer-col { flex: 0 0 50%; }
}

/* ====== RESPONSIVE SMALL MOBILE (max 480px) ====== */
@media (max-width: 480px) {
  /* Footer cols — 2 columns on small screen */
  #classic-theme .footer-col { flex: 0 0 50%; }

  /* Back to top */
  #classic-theme .go-top { width: 34px; height: 34px; font-size: 14px; right: 12px; bottom: 12px; }
}

/* ====== RESPONSIVE TABLET ====== */
@media (min-width: 768px) and (max-width: 1024px) {
  #classic-theme .col-l { width: 68%; }
  #classic-theme .col-r { width: 29%; }
  #classic-theme .v-gdb { font-size: 32px; }
  #classic-theme .v-g1  { font-size: 22px; }
  #classic-theme .xsmb-num.db { font-size: 32px; }
  #classic-theme .xsmb-num.g1 { font-size: 22px; }
}


/* ===================================================================
   WORDPRESS-SPECIFIC OVERRIDES
   Rules needed only in the WP version (not in the React SPA).
   app.min.css (Tailwind build) sets Be Vietnam Pro font on body
   and uses CSS custom properties for colors — we override them here.
   =================================================================== */

/* ---- Font --------------------------------------------------------
   Production SPA uses Be Vietnam Pro globally and classic theme inherits it.
   We do NOT override the font here — let app.min.css cascade through.
   Only .ch-logo-name gets Arial (set in logo section above). ---------- */
/* Keep monospace where needed */
#classic-theme code,
#classic-theme pre,
#classic-theme kbd {
  font-family: Consolas, Monaco, 'Courier New', monospace !important;
}

body.classic-body {
  background: #f0f0f0;
  margin: 0;
  padding: 0;
}

/* ---- CSS Custom Properties for Tailwind components ---------------- */
#classic-theme {
  --background: 0 0% 94%;
  --foreground: 0 0% 20%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 20%;
  --border: 0 0% 83%;
  --muted: 0 0% 91%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 0% 91%;
  --accent-foreground: 0 0% 20%;
  --primary: 0 100% 40%;         /* #cc0000 */
  --primary-foreground: 0 0% 100%;
  --secondary: 214 40% 90%;     /* #d6e4f5 header blue */
  --secondary-foreground: 0 0% 20%;
  --prize-number: 0 0% 20%;
  --prize-special: 0 100% 40%;  /* #cc0000 */
  --sidebar-heading-bg: 0 100% 40%;
  --sidebar-heading-fg: 0 0% 100%;
  --radius: 0;
}

/* ---- Override modern lottery-table for classic look ----------------
   helpers.php renders tables with .lottery-table / .prize-number
   / .prize-special-number classes. ---------------------------------- */
#classic-theme .lottery-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #ddd;
}
#classic-theme .lottery-table th {
  background: #d6e4f5 !important; border: 1px solid #c8d8ec;
  padding: 4px 3px; text-align: center; font-size: 13px;
  font-weight: bold; color: #333;
}
#classic-theme .lottery-table th a { color: #0055aa; text-decoration: none; }
#classic-theme .lottery-table th a:hover { color: #cc0000; text-decoration: underline; }
#classic-theme .lottery-table tr.classic-province-row th {
  background: #f0f0f0 !important;
  border-color: #ddd !important;
}
#classic-theme .lottery-table tr.classic-province-row th a {
  color: #0055aa !important;
}
#classic-theme .lottery-table tr.classic-province-row th a:hover {
  color: #003d7a !important;
  text-decoration: underline;
}
#classic-theme .lottery-table td {
  border: 1px solid #ddd !important; padding: 5px 4px;
  text-align: center; vertical-align: middle;
}
#classic-theme .lottery-table .prize-label {
  font-size: 12px; font-weight: bold; color: #555;
  background: #fff; width: 32px;
}
#classic-theme .prize-number {
  font-size: 26px; font-weight: bold; color: #333;
  letter-spacing: 0;
}
#classic-theme .prize-special-number {
  font-size: 32px; font-weight: bold; color: #cc0000;
  letter-spacing: 0;
}
#classic-theme .text-lottery-prize {
  color: #cc0000 !important;
}

/* Card header — classic red */
#classic-theme .bg-primary {
  background: #cc0000 !important;
}
#classic-theme .bg-primary.text-primary-foreground {
  color: #fff !important;
}

/* Day tabs — font weight normal, mobile wrap */
#classic-theme .classic-results-wrap > .flex > a:not(:first-child) {
  font-weight: 400 !important;
}
@media (max-width: 767px) {
  #classic-theme .classic-results-wrap > .flex {
    flex-wrap: wrap;
  }
  #classic-theme .classic-results-wrap > .flex > a {
    flex: 1 1 calc(25% - 1px) !important;
    min-width: 0;
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
  }
}

/* Override bg-card */
#classic-theme .bg-card {
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
}

#classic-theme .bg-card > .flex {
    flex-wrap: wrap;
}

#classic-theme .border-border { border-color: #ddd !important; }

/* Last-two highlight */
#classic-theme .last-two-highlight {
  background-color: #cc0000 !important;
  color: #fff !important;
  border-radius: 2px !important;
}

/* Digit filter buttons (modern toolbar variant) */
#classic-theme .c-digit-btn {
  min-width: 22px; height: 22px; border: 1px solid #ccc; background: #fff;
  font-size: 12px; cursor: pointer; text-align: center; line-height: 22px;
  color: #333; padding: 0;
}
#classic-theme .c-digit-btn:hover { background: #ffd0d0; border-color: #cc0000; }
#classic-theme .c-digit-btn.active { background: #cc0000; color: #fff; border-color: #cc0000; }

/* Space between cards — classic gap */
#classic-theme .space-y-4 > * + * { margin-top: 8px; }
#classic-theme .space-y-5 > * + * { margin-top: 10px; }

/* Vietlott/Keno/Bingo — square corners */
#classic-theme .vietlott-card { border: 1px solid #ddd; }
#classic-theme .vietlott-jackpot-card { border-radius: 12px !important; }
#classic-theme .rounded-lg,
#classic-theme .rounded-xl,
#classic-theme .rounded-2xl { border-radius: 0 !important; }

/* Tab bars — classic Vietlott tab bar 
#classic-theme .scrollbar-hide { border-bottom: 2px solid #e5e7eb; }
*/

#classic-theme .scrollbar-hide a {
    background: #fff !important;
    color: #4b5563 !important;
    border: 1px solid #ddd !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
}
/* Active Tab Override */
  #classic-theme .scrollbar-hide a.text-primary,
  #classic-theme .scrollbar-hide a.border-primary,
  #classic-theme .scrollbar-hide a[class*="bg-primary"] {
    background: #cc0000 !important;
    color: #fff !important;
    border-color: #cc0000 !important;
  }

/* Mobile responsive for modern prize numbers */
@media (max-width: 767px) {
  #classic-theme .prize-number { font-size: 18px; }
  #classic-theme .prize-special-number { font-size: 24px; }
}

/* Override modern grid — classic uses float */
/* /* grid override removed */ */
#classic-theme main.flex-1 { padding: 0; }
#classic-theme main > .grid { max-width: none; padding: 0; }

/* Hide modern sidebars */
#classic-theme .hidden.xl\:block { display: none !important; }

/* WP mobile/tablet nav compat — hide desktop nav below xl (1280px) */
@media (max-width: 1279px) {
  #classic-theme .ch-navbar { overflow-x: auto; }
  #classic-theme .ch-mobile-toggle { display: flex; }
  #classic-theme .ch-subnav { display: none; }
  #classic-theme .ch-mobile-modern-btn { display: inline-flex; }
}

/* Desktop (>= xl): hide mobile controls */
@media (min-width: 1280px) {
  #classic-theme .ch-mobile-toggle { display: none; }
  #classic-theme .ch-mobile-menu,
  #classic-theme .ch-mobile-nav,
  #classic-theme #xsMobileMenu { display: none !important; }
}

/* ---- Print ---- */
@media print {
  .ch-header, .ch-footer, .col-r, .control-panel, .go-top,
  .sidebar-toggle-btn, .no-print { display: none !important; }
  .col-l { float: none; width: 100%; }
  table.read-result, table.xsmb-table, table.firstlast-mn { font-size: 11px; }
}

#classic-theme .scrollbar-hide a:not(.border-primary):not(.text-primary):hover {
    color: #cc0000 !important;
    background: #fef2f2 !important;
}

/* Homepage set to region — hide original home nav, reorder */
.hide-home-btn .nav-original-home { display: none !important; }
.hide-home-btn .ch-nav-list { display: flex !important; flex-wrap: wrap; }
.hide-home-btn .xs-mobile-menu-list { display: flex !important; flex-direction: column; }
.hide-home-btn .nav-hp-item { order: -1; }

/* ─── Blog styles ────────────────────────────────────────────────────────────── */

/* Breadcrumb */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: #888;
    border-bottom: 1px solid #eee;
}
.blog-breadcrumb a { color: #c00; text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb-sep { color: #ccc; }
.blog-breadcrumb-current { color: #333; font-weight: 500; }

/* Header */
.blog-header {
    padding: 16px 12px 8px;
}
.blog-header-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
}
.blog-header-desc {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* Category tags */
.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 12px;
}
.blog-cat-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #555;
    background: #fafafa;
    transition: all .2s;
}
.blog-cat-tag:hover {
    border-color: #c00;
    color: #c00;
    background: #fff5f5;
}
.blog-cat-tag.active {
    background: #c00;
    color: #fff;
    border-color: #c00;
}

/* Featured post (first on page 1) */
.blog-featured {
    display: block;
    margin: 0 12px 16px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    transition: box-shadow .2s;
}
.blog-featured:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.blog-featured-img {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #f0f0f0;
}
.blog-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.blog-featured:hover .blog-featured-img img { transform: scale(1.03); }
.blog-featured-body { padding: 14px 16px; }
.blog-featured-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 6px 0 8px;
    line-height: 1.35;
}
.blog-featured:hover .blog-featured-title { color: #c00; }
.blog-featured-excerpt {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post grid */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 12px 16px;
}
@container (min-width: 540px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 800px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Post card */
.blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}
.blog-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.07);
    transform: translateY(-2px);
}
.blog-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
}
.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #c00;
    background: #fff5f5;
    border-radius: 4px;
    margin-bottom: 6px;
    width: fit-content;
}
.blog-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card:hover .blog-card-title { color: #c00; }
.blog-card-excerpt {
    font-size: 12px;
    color: #777;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #999;
    margin-top: 8px;
}

/* Small card (related) */
.blog-card--small .blog-card-img { aspect-ratio: 16 / 10; }
.blog-card--small .blog-card-title { font-size: 13px; -webkit-line-clamp: 2; }

/* Empty state */
.blog-empty {
    text-align: center;
    padding: 48px 16px;
    color: #aaa;
}
.blog-empty svg { margin: 0 auto 12px; }

/* Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 16px;
}
.blog-page-btn,
.blog-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    text-decoration: none;
    transition: all .2s;
}
.blog-page-btn:hover,
.blog-page-num:hover {
    border-color: #c00;
    color: #c00;
}
.blog-page-num.active {
    background: #c00;
    color: #fff;
    border-color: #c00;
    font-weight: 700;
}

/* ─── Single article ─────────────────────────────────────────────────────────── */
.blog-article { padding: 0 12px 16px; }

.blog-article-cats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-top: 12px;
}
.blog-article-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 10px;
}
.blog-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.blog-article-author {
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.blog-article-sep { color: #ccc; }
.blog-article-thumb {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}
.blog-article-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Article content */
.blog-article-content {
    font-size: 15px;
    line-height: 1.75;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.blog-article-content h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 24px 0 10px;
    color: #1a1a1a;
}
.blog-article-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 8px;
    color: #1a1a1a;
}
.blog-article-content p { margin: 0 0 14px; }
.blog-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px 0;
}
.blog-article-content ul,
.blog-article-content ol {
    padding-left: 20px;
    margin: 0 0 14px;
}
.blog-article-content li { margin-bottom: 4px; }
.blog-article-content blockquote {
    border-left: 3px solid #c00;
    padding: 10px 16px;
    margin: 16px 0;
    background: #fafafa;
    color: #555;
    font-style: italic;
}
.blog-article-content a { color: #c00; }
.blog-article-content a:hover { text-decoration: underline; }
.blog-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.blog-article-content th,
.blog-article-content td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    font-size: 13px;
}
.blog-article-content th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Tags */
.blog-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0;
    margin-top: 8px;
    border-top: 1px solid #eee;
}
.blog-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    border-radius: 4px;
    text-decoration: none;
    transition: all .2s;
}
.blog-tag:hover { color: #c00; background: #fff5f5; }

/* Share */
.blog-share {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #eee;
}
.blog-share-label { font-size: 13px; color: #888; }
.blog-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    transition: opacity .2s;
}
.blog-share-btn:hover { opacity: .85; }
.blog-share-fb { background: #1877f2; }
.blog-share-tw { background: #1a1a1a; }

/* Related posts */
.blog-related {
    padding: 16px 12px;
    border-top: 2px solid #eee;
}
.blog-related-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@container (min-width: 480px) {
    .blog-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-page-links {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 16px 0;
}