body { background: #f4f6f9; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0; }
  .header-vn { background: linear-gradient(to right, #c4161c, #ffcc00); color: white; padding: 15px; text-align: center; font-weight: bold; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  .btn-capture { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: 1px solid white; color: #000; padding: 5px 12px; border-radius: 20px; font-size: 12px; transition: 0.3s; cursor: pointer; }
  .btn-capture:hover { background: white; color: #c4161c; }
  .main-wrapper { max-width: 850px; margin: 0 auto; padding: 10px; }
  .kq-card { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 15px; margin-top: 10px; }
  .kq-table { width: 100%; border-collapse: collapse; text-align: center; }
  .kq-table th, .kq-table td { border: 1px solid #dee2e6; padding: 8px 4px; vertical-align: middle; }
  .kq-table thead { background: #c4161c; color: white; }
  .kq-table th:first-child { width: 50px; background: #f8f9fa; color: #333; }
  .num-item { display: block; font-weight: 600; font-size: 17px; color: #222; margin-bottom: 2px; letter-spacing: 1px; }
  .hl-match { background-color: #fdff0063; font-weight: 800; border-radius: 2px; padding: 0 1px; }
  .prize-db { background: #fff3cd !important; }
  .prize-db .num-item { color: #c4161c; font-size: 20px; font-weight: 800; }
  .prize-g8 { background: #e8f7ff; }
  .prize-g8 .num-item { color: #0066cc; }
  #toast-msg { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 10px 20px; border-radius: 30px; display: none; z-index: 9999; font-size: 13px; }
  .watermark-box { margin-top: 8px; padding: 6px 10px; background: rgba(0,0,0,0.04); border-top: 1px dashed #ccc; font-size: 11px; color: #666; letter-spacing: 0.5px; }
  .watermark-box i, .watermark-link { color: #c4161c; }
  .watermark-link { font-weight: 600; text-decoration: none; }
  .watermark-link:hover { text-decoration: underline; }
  .cell-loading { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 38px; }
  .skeleton-line { width: 60%; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%); background-size: 400% 100%; animation: skeleton-loading 1.2s ease-in-out infinite; }
  @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  .live-badge { color: #e60000; font-weight: bold; margin-left: 8px; animation: blink 1s infinite; }
  @keyframes blink { 50% { opacity: 0.4; } }
  .kq-phan-tich-card { background: linear-gradient(135deg, #ffffff, #f8f9fa); border-radius: 18px; padding: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); transition: 0.3s; }
  .kq-phan-tich-card:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0,0,0,0.08); }
  .kq-phan-tich-card h5 { font-weight: 700; color: #c4161c; margin-bottom: 15px; }
  .kq-phan-tich-card #tail-input { border-radius: 12px; border: 1px solid #dee2e6; padding: 8px 12px; transition: 0.2s; }
  .kq-phan-tich-card #tail-input:focus { border-color: #c4161c; box-shadow: 0 0 0 3px rgba(196,22,28,0.15); outline: none; }
  .kq-phan-tich-card .btn { border-radius: 12px; font-weight: 600; transition: 0.2s; border: none; }
  .kq-phan-tich-card .btn-primary { background: linear-gradient(45deg,#c4161c,#ff4d4f); color: white; }
  .kq-phan-tich-card .btn-primary:hover { transform: scale(1.05); }
  .kq-phan-tich-card .btn-danger { background: linear-gradient(45deg,#ff4d4f,#ff7875); color: white; }
  .kq-phan-tich-card .btn-secondary { background: #6c757d; color: white; }
  .kq-phan-tich-card #stats-box { background: #fff; border-radius: 14px; padding: 15px; min-height: 80px; box-shadow: inset 0 0 10px rgba(0,0,0,0.03); }
  .kq-phan-tich-card .badge { border-radius: 10px; padding: 6px 10px; font-size: 13px; transition: 0.2s; }
  .kq-phan-tich-card .badge:hover { transform: scale(1.1); }
  .kq-phan-tich-card .alert { border-radius: 14px; font-weight: 500; }
  .next-schedule-box { margin-top: 10px; padding: 10px 12px; border: 1px dashed rgba(0,0,0,.12); border-radius: 10px; background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(248,248,248,.96)); font-size: 13px; color: #666; font-style: italic; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  .next-schedule-wrapper { display: flex; flex-direction: column; gap: 6px; }
  .next-schedule-header { font-size: 12px; color: #888; padding-bottom: 4px; border-bottom: 1px dashed rgba(0,0,0,.08); }
  .next-schedule-header span { font-weight: 600; color: #444; }
  .next-region-row { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
  .next-region-title { min-width: 100px; font-weight: 600; color: #555; font-style: normal; }
  .next-region-list { flex: 1; color: #777; }
  .crawl-loading-box { margin: 20px 0; padding: 18px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; text-align: center; color: #64748b; }
  .crawl-spinner { width: 42px; height: 42px; margin: 0 auto 12px; border: 3px solid #dbeafe; border-top: 3px solid #2563eb; border-radius: 50%; animation: spin .8s linear infinite; }
  .crawl-title { font-weight: 600; color: #0f172a; margin-bottom: 6px; }
  .crawl-desc { font-size: 13px; opacity: .8; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* RESPONSIVE & MOBILE OPTIMIZATION */
  @media (max-width: 768px) {
    body { background: #f5f5f5; }
    .container-fluid { padding: 0 !important; }
    .main-wrapper { max-width: 100% !important; padding: 0 4px !important; margin: 0 !important; }
    .kq-card, .kq-phan-tich-card, .next-schedule-box { border-radius: 0 !important; box-shadow: none !important; }
    .kq-card { margin-top: 4px !important; padding: 8px 4px !important; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
    .table-responsive { overflow-x: auto; padding: 0 !important; }
    .kq-table { table-layout: fixed; background: #fff; }
    .kq-table thead th, .kq-table td { padding: 6px 2px !important; font-size: 12px; }
    .kq-table th:first-child, .kq-table td:first-child { width: 42px !important; font-weight: 700; }
    .num-item { font-size: 15px !important; letter-spacing: 0 !important; font-weight: 700; line-height: 1.25; }
    .prize-db .num-item { font-size: 18px !important; }
    .kq-phan-tich-card { padding: 12px !important; }
    .kq-phan-tich-card .btn, .kq-phan-tich-card #tail-input { width: 100% !important; max-width: 100% !important; margin-bottom: 8px; }
    .next-region-title, .next-region-list { font-size: 12px; }
    .next-region-title { min-width: 82px; }
    .btn-capture { right: 8px; padding: 4px 8px; border-radius: 10px; }
    .btn-capture span { display: none; }
    .header-vn { padding: 12px 10px; font-size: 15px; }
  }
  .stats-btn {
  min-width: 85px;
}


.smart-banner {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    margin: 15px auto;

    overflow: hidden;

}

/* desktop */

@media screen and (min-width: 768px) {

    .smart-banner-728x90 {

        width: 728px;

        height: 90px;

    }

    .smart-banner-300x250 {

        width: 300px;

        height: 250px;

    }

}

/* mobile */

@media screen and (max-width: 767px) {

    .smart-banner {

        max-width: 100%;

    }

    .smart-banner-728x90 {

        width: 100%;

        min-height: 90px;

    }

    .smart-banner-300x250 {

        width: 100%;

        min-height: 250px;

    }

}

/* iframe */

.smart-banner iframe {

    border: 0 !important;

    display: block !important;

    margin: auto !important;

    max-width: 100% !important;

}

/* image referral */

.smart-banner img {

    display: block;

    max-width: 100%;

    height: auto;

    object-fit: contain;

}
/* =============================================
   SILENT REFRESH: Animation highlight khi DOM
   được cập nhật mà không reload trang.
   Dùng bởi renderKqTable() trong index.ejs
============================================= */
@keyframes kq-flash {
  0%   { background-color: #fff9c4; transform: scale(1.04); }
  60%  { background-color: #fff9c4; }
  100% { background-color: transparent; transform: scale(1); }
}

.num-item.kq-updated {
  animation: kq-flash 1.2s ease-out forwards;
}

/* Badge "Đã cập nhật" hiện brief trên tiêu đề ngày */
.kq-refreshed-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #28a745;
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 1.5s ease;
  vertical-align: middle;
}

.kq-refreshed-badge.fade-out {
  opacity: 0;
}