z
<header id="siteHeader" class="header">
  <div class="inner">
    <div class="brandbox">
      <div class="brand">XBOX COFFEE &amp; BEER</div>
      <div class="addr">48 Đường số 15, P. Tân Kiểng, Quận 7</div>
    </div>
    <nav class="hdr-navchips">
      <a class="navchip" href="/info.php#rules">Thể lệ</a>
      <a class="navchip" href="/info.php#prizes">Giải thưởng</a>
      <a class="navchip" href="/winners-public.php">Lịch sử giải</a>
      <a class="navchip" href="/live.php">LIVE</a>
    </nav>
  </div>
</header>
<!-- credit_popup.php -->
<div class="credit-toast at-tr" id="creditToast" aria-live="polite" aria-atomic="true">
  <div class="ct-box">
    <div class="ct-line1"></div>
    <div class="ct-line2"></div>
  </div>
</div>

<style>
  /* Vị trí mặc định: top-right; đè lên header */
  .credit-toast{
    position:fixed; z-index:1200; pointer-events:none;
    top:10px; right:10px;
  }
  .credit-toast .ct-box{
    position:relative; pointer-events:auto; max-width:92vw;
    padding:8px 12px; border-radius:14px;
    font:600 12px/1.25 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    color:#cffff6; background:rgba(5,15,15,.85); border:1px solid rgba(0,255,204,.28);
    box-shadow:0 0 16px rgba(0,255,204,.22), inset 0 0 0 1px rgba(0,255,204,.06);
    text-shadow:0 0 6px rgba(0,255,204,.18);
    transform:translateY(-8px); opacity:0; transition:transform 4.35s ease, opacity 3.35s ease;
    white-space:normal; overflow:hidden;
  }
  .credit-toast.show .ct-box{ transform:translateY(0); opacity:1 }

  .ct-line1{ font-weight:700; line-height:1.25 }
  .ct-line2{ font-weight:600; line-height:1.25; opacity:.95 }

  /* Viền neon quét */
  .credit-toast .ct-box::after{
    content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
    background:linear-gradient(90deg,rgba(0,255,204,0) 0%,rgba(0,255,204,.9) 50%,rgba(0,255,204,0) 100%);
    background-size:200% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ct-sweep 3.2s ease-in-out infinite;
  }
  @keyframes ct-sweep{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

  /* Safe-area mobile */
  @media (max-width:480px){
    .credit-toast{ right:12px; top:calc(env(safe-area-inset-top) + 8px) }
  }
  @media (prefers-reduced-motion:reduce){
    .credit-toast .ct-box, .credit-toast .ct-box::after{ animation:none; transition:none }
  }
</style>
<style>
  /* Vị trí (cao hơn chút) */
  #creditToast{ top:12px !important; right:8px !important; }

  /* Thu hẹp hộp: dùng width cố định thay vì max-width */
  #creditToast .ct-box{
  width:90px !important;              /* kích thước mong muốn */
  box-sizing:border-box !important;    /* width đã bao gồm padding -> 2 bên đều */
  padding:6px 1px !important;         /* trái = phải */
  border-radius:12px !important;
  text-align:center !important;        /* căn giữa nội dung -> nhìn cân 2 bên */
  font-size:8px !important;
  line-height:1.2 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

  /* Đảm bảo 2 dòng được xuống dòng */
  #creditToast .ct-line1,
  #creditToast .ct-line2{
    white-space:normal !important;
  }
</style>
<script>
  // Áp lại vị trí sau khi ghi đè CSS
  if (window.creditToast) creditToast.place();
</script>
<script>
(function(){
  const el = document.getElementById('creditToast');
  if (!el) return;
  const line1El = el.querySelector('.ct-line1');
  const line2El = el.querySelector('.ct-line2');

  // Luôn giữ top-right; nếu có header cố định -> bám ngay dưới header
  function place(){
  const header = document.getElementById('siteHeader');
  const h = header ? (header.getBoundingClientRect().height || 0) : 0;

  const OFFSET = 4;      // ↑ nhỏ = sát mép trên hơn (đang 4 ở code bạn)
  const OVERLAY = true;  // true = đè lên header; false = nằm ngay dưới header

  el.style.top = (OVERLAY ? OFFSET : (h ? h + OFFSET : OFFSET)) + 'px';
  el.style.right = '8px';
  el.style.bottom = '';  // luôn ở top
}


  let hideTimer = null;
  function show(line1, line2, opts){
    opts = opts || {};
    if (typeof line1 === 'string') line1El.textContent = line1;
    if (typeof line2 === 'string') line2El.textContent = line2;
    el.classList.add('show');
    clearTimeout(hideTimer);
    if (!opts.sticky){
      hideTimer = setTimeout(()=> el.classList.remove('show'), opts.duration || 4000);
    }
  }
  function hide(){
    clearTimeout(hideTimer);
    el.classList.remove('show');
  }

  // Khởi tạo
  place();
  window.addEventListener('resize', place);

  // Hiện 1 lần khi vào trang (ví dụ)
  show('@2025 HeartMade', 'By Hoan Nguyen', { duration: 5000 });

  // Expose API
  window.creditToast = { show, hide, place };
  if (!window.__creditTicker) {
  window.__creditTicker = setInterval(() => {
    creditToast.show('@2025 HeartMade','By Hoan Nguyen',{ duration: 3000 });
  }, 15000);
}

})();
</script>
<style>
  :root{
    --neon:#00ffcc;
    --ink:#eaffff;
    --header-h: 90px; /* fallback khi JS chưa chạy */
  }

/* Đẩy nội dung xuống bằng đúng chiều cao header (có fallback 90px trong :root) */
//body{ padding-top: var(--header-h); }

/* Khi nhảy tới #anchor (ví dụ /info.php#rules), giữ phần tiêu đề không bị header che */
//html{ scroll-padding-top: var(--header-h); }
/* (tuỳ chọn – hỗ trợ tốt hơn trên Safari cũ) */
//[id]{ scroll-margin-top: var(--header-h); }

  /* RESET */
  #siteHeader, #siteHeader * { box-sizing: border-box; }

  /* HEADER chính */
  #siteHeader.header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: linear-gradient(270deg, rgba(0,0,0,.90), rgba(0,35,35,.88), rgba(0,0,0,.90));
    background-size: 300% 100%;
    border-bottom: 1px solid rgba(0,255,204,.18);
    animation: headerSweep 12s ease-in-out infinite;
  }

  @keyframes headerSweep{
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  #siteHeader .inner{
    width: min(1100px, 100% - 20px);
    margin: 0 auto;
    padding: 4px 0 1px;
    position: relative;
  border-radius: 14px; /* tuỳ ý: 0 nếu muốn góc vuông */
  }

  /* BRAND + ĐỊA CHỈ */
  #siteHeader .brandbox{ text-align: center; margin-bottom: 6px; }
  #siteHeader .brand{
    font-size: 18px; font-weight: 800; color: var(--neon);
    text-shadow: 0 0 6px rgba(0,255,204,.55), 0 0 18px rgba(0,255,204,.35);
  }
  #siteHeader .addr{
    font-size: 12.5px; color:#9fd6d6;
    text-shadow: 0 0 6px rgba(0,255,204,.25);
  }

  /* NAVIGATION 4 nút*/
  .hdr-navchips{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; padding:4px 0 6px;
}
.navchip{
  display:flex; align-items:center; justify-content:center;
  height:22px;              /* chiều cao cố định */
  padding:0 14px;
  border-radius:14px;
  text-decoration:none; white-space:nowrap;
  font-weight:700; font-size:14px; line-height:1;
  letter-spacing:.2px;
  color:#eaffff; background:#0b1616;
  border:1px solid rgba(0,255,204,.38);
  box-shadow:0 0 10px rgba(0,255,204,.35),
             0 0 22px rgba(0,255,204,.22),
             inset 0 0 0 1px rgba(0,255,204,.08);
  text-shadow:0 0 6px rgba(0,255,204,.25);
  transition:transform .12s ease, box-shadow .12s ease;
  position:relative; overflow:hidden; z-index:0;
}
.navchip:hover{
  transform:translateY(-1px);
  box-shadow:0 0 14px rgba(0,255,204,.5),
             0 0 26px rgba(0,255,204,.28),
             inset 0 0 0 1px rgba(0,255,204,.1);
}
.navchip:active{ transform:translateY(0); }

/* LED chạy viền */
.navchip::before{
  content:""; position:absolute; inset:-2px; padding:3px; border-radius:inherit;
  background: linear-gradient(90deg,
              rgba(0,255,204,0) 0%,
              rgba(0,255,204,.0) 20%,
              rgba(0,255,204,.95) 50%,
              rgba(0,255,204,.0) 80%,
              rgba(0,255,204,0) 100%);
  background-size:200% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  animation: led-sweep 2.2s ease-in-out infinite alternate;
  box-shadow:0 0 14px rgba(0,255,204,.24);
}
.navchip::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 16px rgba(0,255,204,.18),
             inset 0 0 10px rgba(0,255,204,.08);
  pointer-events:none;
}
.navchip.is-active{
  color:#001413;
  background:linear-gradient(180deg,#7bffe9 0%,#33ffd9 100%);
  border-color:#0eead6; text-shadow:none;
}

@keyframes led-sweep{
  0%   { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
@keyframes headerSweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width:480px){
  .hdr-navchips{ gap:6px; }
}
</style>

<script>
(function(){
  function setHeaderHeight(){
    var h = document.getElementById('siteHeader');
    if(!h) return;
    var hh = Math.ceil(h.getBoundingClientRect().height) + 'px';
    document.documentElement.style.setProperty('--header-h', hh);
  }
  window.addEventListener('DOMContentLoaded', setHeaderHeight);
  window.addEventListener('load', setHeaderHeight);
  window.addEventListener('resize', setHeaderHeight);
})();
</script>
<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Người trúng gần đây</title>
  <meta name="color-scheme" content="dark light" />
  <style>
    :root{
      --bg:#060a10; --panel:#0b1217; --ink:#eaf6ff; --muted:#9bb4c8;
      --neon:#00ffcc; --accent:#77ffe7; --edge:#0e1a22;
      --radius:16px; --gap:14px; --font:16.6px;
    }
    body{ background:var(--bg); color:var(--ink); font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
    main{ max-width:980px; margin:0 auto; padding:18px 14px 80px; }
    .hero{
      border:1px solid var(--neon); border-radius:24px; padding:16px 14px;
      background:
        radial-gradient(1200px 140px at 10% 0%, rgba(0,255,204,.09), transparent 60%),
        radial-gradient(1200px 180px at 90% 0%, rgba(0,255,204,.07), transparent 60%),
        var(--panel);
      box-shadow: 0 0 18px rgba(0,255,204,.35), inset 0 0 10px rgba(0,255,204,.25);
      margin-bottom:14px;
    }
    h1{ font-size:1.55rem; letter-spacing:.2px; margin:0 0 6px 0; }
    .sub{ color:var(--muted); font-size:.96rem; margin:0 0 6px 0;}
    .toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
    .input{ flex:1 1 180px; min-width:160px; padding:10px 12px; border-radius:12px;
            border:1px solid rgba(255,255,255,.12); background:#0e161d; color:var(--ink); }
    .btn{ padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
          background:#0e161d; color:var(--ink); text-decoration:none; cursor:pointer; }
    .btn.neon{ border-color: rgba(0,255,204,.5); background: rgba(0,255,204,.12); }
    .card{
      border:1px solid #0d1a22; background:linear-gradient(180deg, rgba(0,255,204,.03), transparent 160px), var(--panel);
      border-radius:var(--radius); padding:12px 12px; box-shadow: inset 0 0 0 1px rgba(0,255,204,.06);
    }
    .list{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }
    .row{
      display:grid; grid-template-columns: 90px 1fr; gap:10px;
      padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03);
    }
    .time{ color:var(--muted); font-variant-numeric:tabular-nums; }
    .meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
           background:rgba(0,255,204,.06); border:1px solid rgba(0,255,204,.2); color:var(--accent); font-weight:600; }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; }
    .empty{ text-align:center; color:var(--muted); padding:18px 8px; }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <h1>Người trúng gần đây</h1>
      <p class="sub">Hiển thị realtime (ẩn bớt số điện thoại). Dữ liệu tham chiếu từ hệ thống winners.</p>
      <div class="toolbar">
        <input id="filter" class="input" type="text" inputmode="numeric" maxlength="4" placeholder="Lọc theo 4 số cuối (ví dụ 3468)" />
        <button id="btnReload" class="btn">Tải lại</button>
        <button id="btnAuto" class="btn neon" data-on="1">Auto 10s: Bật</button>
      </div>
    </section>

    <section class="card">
      <div id="list" class="list"></div>
      <div id="empty" class="empty" style="display:none">Chưa có dữ liệu người trúng.</div>
    </section>
  </main>

  <script>
    (function(){
      const $list  = document.getElementById('list');
      const $empty = document.getElementById('empty');
      const $filter= document.getElementById('filter');
      const $btnReload = document.getElementById('btnReload');
      const $btnAuto   = document.getElementById('btnAuto');
      let autoplay = true;
      let timer = null;

      function maskPhone(p){
        if (!p) return '*** *** ****';
        const s = String(p).replace(/\D/g, '');
        if (s.length <= 4) return '*** *** ' + s.padStart(4,'*');
        return '*** *** ' + s.slice(-4);
      }
      function pad4(n){
        const x = (n ?? '').toString();
        return x.padStart(4, '0').slice(-4);
      }
      function fmtTime(ts){
        // Expect 'YYYY-MM-DD HH:MM:SS' or ISO
        if (!ts) return '—';
        const s = ts.replace('T',' ').slice(0,19);
        return s;
      }

      function render(rows){
        const q = ($filter.value || '').replace(/\D/g, '');
        const frag = document.createDocumentFragment();
        let count = 0;
        (rows||[]).forEach(r => {
          const t = fmtTime(r.created_at || r.t0 || r.t || r.time);
          const phone = maskPhone(r.phone);
          const win = pad4(r.winning_number || r.number || r.win || r.result);
          if (q && !win.endsWith(q)) return; // filter by tail
          const d  = Number(r.digit || r.digit_type || r.mode_digit || 4);
          const pay= (r.payout != null ? String(r.payout) : '').trim();
          const cur= (r.currency || '').trim();
          const li = document.createElement('div');
          li.className='row';
          li.innerHTML = `
            <div class="time mono">${t}</div>
            <div class="meta">
              <span class="pill"><span>👤</span>${phone}</span>
              <span class="pill"><span>🎯</span><span class="mono">${win}</span></span>
              <span class="pill"><span>🔢</span>${d} số</span>
              ${pay ? `<span class="pill"><span>💰</span>${pay}${cur?(' '+cur):''}</span>` : ''}
            </div>`;
          frag.appendChild(li);
          count++;
        });
        $list.innerHTML='';
        $list.appendChild(frag);
        $empty.style.display = count ? 'none' : 'block';
      }

      async function fetchWinners(){
        const endpoints = [
          '/api/public.php?action=winners',
          '/api/public.php?action=recent_winners',
          '/api/public.php?action=results_recent',
          '/api/public.php?action=latest_winners'
        ];
        for (const url of endpoints){
          try{
            const r = await fetch(url, {cache:'no-store'});
            if (!r.ok) continue;
            const j = await r.json();
            // Normalize: array or {rows:[...]}
            let rows = Array.isArray(j) ? j : (j.rows || j.winners || j.result || j.data);
            if (!Array.isArray(rows) && j.ok && Array.isArray(j.ok?.rows)) rows = j.ok.rows;
            if (Array.isArray(rows) && rows.length){
              render(rows);
              return;
            }
          }catch(e){ /* try next */ }
        }
        render([]);
      }

      function start(){
        fetchWinners();
        timer = setInterval(() => { if (autoplay) fetchWinners(); }, 10000);
      }
      $btnReload?.addEventListener('click', fetchWinners);
      $btnAuto?.addEventListener('click', () => {
        autoplay = !autoplay;
        $btnAuto.dataset.on = autoplay ? '1':'0';
        $btnAuto.textContent = 'Auto 10s: ' + (autoplay ? 'Bật' : 'Tắt');
        $btnAuto.className = 'btn ' + (autoplay ? 'neon' : '');
      });
      $filter?.addEventListener('input', () => fetchWinners());
      start();
    })();
  </script>
</body>
</html>