:root{
  --bg:#f8fafc;
  --bg-soft:#f9fbff;
  --card:#ffffff;
  --card-blue:#f8fbff;
  --blue-soft:#eff6ff;
  --line:#e2e8f0;
  --line-blue:#dbeafe;
  --line-blue-strong:#bfdbfe;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-title:#1e3a8a;
  --text:#0f172a;
  --text-strong:#020617;
  --muted:#64748b;
  --muted-2:#475569;
  --red:#ef4444;
  --red-soft:#fef2f2;
  --red-line:#fecaca;
  --amber:#f59e0b;
  --amber-soft:#fffbeb;
  --amber-line:#fde68a;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow-hover:0 14px 36px rgba(37,99,235,.12);
  --radius-lg:20px;
  --radius:16px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% 0%,rgba(37,99,235,.08),transparent 26%),
    radial-gradient(circle at 95% 18%,rgba(191,219,254,.26),transparent 30%),
    linear-gradient(180deg,var(--bg-soft),var(--bg));
  font-size:15px;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
b,strong{font-weight:700}
button,input{font:inherit}
.page-shell{
  width:min(100% - 32px,1180px);
  margin:0 auto;
  padding:24px 0 34px;
}
.hero-card{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px 34px;
  border:1px solid var(--line-blue);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}
.event-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  margin-bottom:12px;
  border-radius:999px;
  background:#f8fbff;
  border:1px solid var(--line);
  color:var(--muted-2);
  font-size:13px;
  font-weight:700;
}
.hero-card h1{
  margin:0;
  color:var(--text-strong);
  font-size:clamp(28px,4vw,34px);
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:800;
}
.hero-card p{
  margin:10px 0 0;
  color:var(--muted-2);
  font-size:16px;
  line-height:1.55;
}
.hero-action,.primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 20px;
  border:0;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(37,99,235,.20);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
  white-space:nowrap;
}
.hero-action:hover,.primary-btn:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 14px 28px rgba(37,99,235,.26)}
.primary-btn:disabled{opacity:.66;cursor:not-allowed;transform:none}
.alert-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid var(--red-line);
  border-left:5px solid var(--red);
  border-radius:14px;
  background:var(--red-soft);
  box-shadow:0 12px 26px rgba(239,68,68,.06);
}
.alert-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--red);
  color:#fff;
  font-size:24px;
  font-weight:900;
  line-height:1;
}
.alert-copy strong{
  display:block;
  margin:0 0 4px;
  color:#dc2626;
  font-weight:800;
  font-size:15px;
}
.alert-copy p{
  margin:0;
  color:#475569;
  line-height:1.55;
  font-size:14px;
}
.alert-copy b{color:#dc2626}
.content-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(360px,.92fr);
  gap:22px;
  align-items:start;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:20px;
}
.card-title-row{margin-bottom:16px}
.card h2{
  margin:0 0 8px;
  color:var(--text-strong);
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:800;
}
.card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
.form-box{
  display:grid;
  gap:15px;
  padding:18px;
  border-radius:14px;
  border:1px solid var(--line-blue-strong);
  background:linear-gradient(180deg,#f8fbff,var(--blue-soft));
}
.field{display:grid;gap:8px}
.field label{
  color:#1e293b;
  font-size:14px;
  font-weight:700;
}
.field input{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  outline:none;
  background:#fff;
  color:#0f172a;
  font-size:15px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.field input::placeholder{color:#94a3b8}
.field input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.field-error{
  min-height:18px;
  color:#dc2626;
  font-size:13px;
  font-weight:600;
}
.field.has-error input{
  border-color:#f87171;
  box-shadow:0 0 0 4px rgba(239,68,68,.10);
}
.inline-note{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 14px;
  border:1px solid var(--amber-line);
  border-radius:12px;
  background:var(--amber-soft);
}
.inline-note-icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--amber);
  color:#fff;
  font-weight:900;
  font-style:normal;
}
.inline-note p{
  margin:0;
  color:#475569;
  line-height:1.55;
  font-size:14px;
}
.inline-note b{color:#92400e}
.reward-error{display:block;margin-top:-4px}
.form-result{
  padding:12px 13px;
  border-radius:12px;
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  color:#166534;
  font-weight:700;
  line-height:1.45;
}
.form-result.error{
  border-color:#fecaca;
  background:#fef2f2;
  color:#dc2626;
}
.reward-card-wrap{
  border-color:#fed7aa;
  background:linear-gradient(180deg,#fff,#fffdf8);
}
.reward-title{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:16px;
}
.reward-title-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  box-shadow:0 10px 18px rgba(37,99,235,.18);
}
.reward-list{
  display:grid;
  gap:12px;
}
.reward-item{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 22px;
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.reward-item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.reward-item:hover{
  transform:translateY(-1px);
  border-color:var(--line-blue-strong);
  box-shadow:0 10px 26px rgba(37,99,235,.08);
}
.reward-thumb{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f8fafc;
}
.reward-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
.reward-thumb.placeholder{
  background:linear-gradient(135deg,#dbeafe,#fff7ed);
  color:#1e3a8a;
  font-weight:800;
  font-size:15px;
}
.reward-text strong{
  display:block;
  margin-bottom:3px;
  color:#0f172a;
  font-size:15px;
  font-weight:800;
}
.reward-text small{
  display:block;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
}
.reward-check{
  width:22px;
  height:22px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  transition:all .16s ease;
}
.reward-item.is-selected,
.reward-item:has(input:checked){
  border-color:var(--blue);
  background:var(--blue-soft);
  box-shadow:0 12px 28px rgba(37,99,235,.12);
}
.reward-item.is-selected .reward-check,
.reward-item:has(input:checked) .reward-check{
  border-color:var(--blue);
  background:var(--blue);
  box-shadow:inset 0 0 0 5px #fff;
}
.success-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(6px);
}
.success-popup{
  position:fixed;
  z-index:1001;
  left:50%;
  top:50%;
  width:min(460px,calc(100vw - 30px));
  transform:translate(-50%,-50%);
  padding:24px;
  border-radius:20px;
  border:1px solid var(--line-blue);
  background:#fff;
  box-shadow:0 24px 70px rgba(15,23,42,.24);
  text-align:center;
}
.success-backdrop[hidden],.success-popup[hidden]{display:none!important}
.popup-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#334155;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.success-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:999px;
  background:#dcfce7;
  color:#16a34a;
  font-size:30px;
  font-weight:900;
}
.success-popup h2{
  margin:0 0 10px;
  font-size:22px;
  color:#0f172a;
}
.success-popup p{
  margin:0;
  color:#475569;
  line-height:1.55;
}
.success-summary{
  display:grid;
  gap:8px;
  margin:16px 0;
  padding:12px;
  border:1px solid var(--line-blue);
  border-radius:14px;
  background:#f8fbff;
  text-align:left;
  color:#475569;
  font-size:14px;
}
.success-summary b{color:#0f172a}
.popup-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border:1px solid var(--line-blue-strong);
  border-radius:12px;
  background:#fff;
  color:#1d4ed8;
  font-weight:700;
}
.secondary-btn:hover{background:var(--blue-soft)}
body.popup-open{overflow:hidden}
.site-footer{
  width:min(100% - 32px,1180px);
  margin:0 auto 26px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#64748b;
  font-size:13px;
}
.site-footer a{color:#2563eb;font-weight:700}
.admin-body{background:#f8fafc}.admin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.admin-top b{display:block;color:#0f172a}.admin-top span{display:block;color:#64748b;font-size:13px}.admin-top nav{display:flex;gap:10px;flex-wrap:wrap}.admin-top nav a,.admin-danger{display:inline-flex;min-height:36px;align-items:center;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#1d4ed8;font-weight:700}.admin-danger{color:#dc2626;cursor:pointer}.admin-wrap{width:min(100% - 32px,1220px);margin:24px auto}.admin-alert{padding:12px 14px;border-radius:12px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;margin-bottom:14px}.admin-alert.ok{background:#f0fdf4;color:#166534;border-color:#bbf7d0}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.admin-stats div,.admin-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}.admin-stats b{display:block;font-size:28px;color:#0f172a}.admin-stats span{color:#64748b}.admin-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.admin-card h1{margin:0 0 6px;font-size:24px}.admin-card p{margin:0;color:#64748b}.admin-filter{display:flex;gap:8px;flex-wrap:wrap}.admin-filter input,.admin-filter select,.inline-form select,.inline-form textarea{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:13px;color:#475569;background:#f8fafc}td small{display:block;color:#64748b;margin-top:4px}.reward-badge,.status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:12px}.status.approved{background:#dcfce7;color:#166534}.status.invalid{background:#fef2f2;color:#dc2626}.status.contacted{background:#fffbeb;color:#92400e}.empty{text-align:center;color:#64748b}.inline-form{display:grid;gap:8px;margin:10px 0}.inline-form textarea{min-height:70px;padding:10px}.soft-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line-blue-strong);background:#fff;color:#1d4ed8;font-weight:700;cursor:pointer}
@media (max-width:900px){
  .content-grid{grid-template-columns:1fr}
  .hero-card{align-items:flex-start;flex-direction:column}
  .hero-action{width:100%}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .admin-card-head{display:grid}
}
@media (max-width:640px){
  .page-shell{width:min(100% - 22px,1180px);padding-top:12px}
  .hero-card{padding:20px;border-radius:18px}
  .hero-card h1{font-size:28px}
  .hero-card p{font-size:15px}
  .alert-card{padding:14px;gap:10px}
  .alert-icon{width:34px;height:34px;flex-basis:34px;font-size:20px}
  .card{padding:16px;border-radius:16px}
  .form-box{padding:14px}
  .reward-item{grid-template-columns:48px minmax(0,1fr) 20px;padding:10px;min-height:72px}
  .reward-thumb{width:46px;height:46px}
  .site-footer{display:grid;text-align:center;justify-content:center}
  .admin-stats{grid-template-columns:1fr}
}

/* v5: phần thưởng chỉ hiển thị, không bắt người chơi chọn */
.form-box .primary-btn{width:100%;margin-top:2px}
.random-note{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 14px;
  border:1px solid var(--line-blue-strong);
  border-radius:12px;
  background:#f8fbff;
}
.random-note>span{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
}
.random-note p{margin:0;color:#475569;line-height:1.55;font-size:14px}
.random-note b{color:#1d4ed8}
.reward-showcase{
  display:grid;
  gap:12px;
}
.reward-showcase-item{
  display:grid;
  grid-template-columns:minmax(92px,auto) minmax(0,1fr);
  align-items:center;
  gap:13px;
  min-height:78px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.reward-showcase-item:hover{
  transform:translateY(-1px);
  border-color:var(--line-blue-strong);
  background:#f8fbff;
  box-shadow:0 10px 26px rgba(37,99,235,.08);
}
.reward-image-strip{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  max-width:178px;
}
.reward-image-strip span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f8fafc;
}
.reward-image-strip img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
}
.reward-showcase-text strong{
  display:block;
  margin-bottom:4px;
  color:#0f172a;
  font-size:15px;
  font-weight:800;
}
.reward-showcase-text small{
  display:block;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}
.admin-reward-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin-bottom:18px}
.admin-reward-form{display:grid;gap:12px}
.admin-reward-form textarea{min-height:150px;border:1px solid var(--line);border-radius:12px;background:#f8fbff;padding:12px;font:700 14px Inter,"Segoe UI",Arial,sans-serif;resize:vertical}
.admin-reward-form select,.admin-reward-form input{min-height:42px;border:1px solid var(--line);border-radius:12px;background:#f8fbff;padding:0 12px;font:700 14px Inter,"Segoe UI",Arial,sans-serif}
.pool-status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:900}.pool-status.available{background:#dcfce7;color:#166534}.pool-status.assigned{background:#eff6ff;color:#1d4ed8}.pool-status.disabled{background:#fee2e2;color:#991b1b}
@media(max-width:900px){.admin-reward-grid{grid-template-columns:1fr}}
@media(max-width:640px){.reward-showcase-item{grid-template-columns:1fr}.reward-image-strip{max-width:none}.reward-image-strip span{width:42px;height:42px}}

/* v6: popup gọn hơn, nhấn mạnh Zalo theo số điện thoại */
.success-popup .zalo-highlight{
  color:#1d4ed8;
  font-weight:900;
  background:#eff6ff;
  border-radius:8px;
  padding:1px 5px;
  white-space:normal;
}
.success-summary{gap:7px}
.success-summary span{display:block}

/* v6: khung ảnh phần thưởng ổn định khi có nhiều icon */
.reward-showcase-item{
  grid-template-columns:178px minmax(0,1fr);
  min-height:86px;
}
.reward-image-strip{
  display:grid;
  grid-template-columns:repeat(4,44px);
  gap:6px;
  max-width:196px;
}
.reward-image-strip span:nth-child(n+5){display:none}
@media(max-width:640px){
  .reward-showcase-item{grid-template-columns:1fr}
  .reward-image-strip{grid-template-columns:repeat(5,42px);max-width:100%}
}

/* v7: thu gọn landing, bỏ các khung phụ trong form */
.page-shell{
  width:min(100% - 32px,1080px);
  padding:16px 0 26px;
}
.hero-card{
  min-height:112px;
  padding:18px 24px;
  border-radius:18px;
}
.event-badge{
  padding:6px 11px;
  margin-bottom:8px;
  font-size:12px;
}
.hero-card h1{
  font-size:clamp(24px,3.3vw,30px);
  letter-spacing:-.035em;
}
.hero-card p{
  margin-top:5px;
  font-size:14px;
}
.hero-action,.primary-btn{
  min-height:44px;
  padding:0 18px;
  border-radius:11px;
  font-size:14px;
}
.alert-card{
  margin-top:14px;
  padding:13px 16px;
  gap:12px;
}
.alert-icon{
  width:36px;
  height:36px;
  flex-basis:36px;
  font-size:22px;
}
.alert-copy p{font-size:13.5px;line-height:1.5}
.content-grid{
  margin-top:18px;
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.8fr);
  gap:18px;
}
.card{
  padding:16px;
  border-radius:16px;
}
.card-title-row{
  margin-bottom:12px;
}
.card h2{
  margin-bottom:6px;
  font-size:20px;
}
.card p{
  font-size:14px;
  line-height:1.45;
}
.form-box{
  gap:9px;
  padding:14px;
  border-radius:13px;
}
.field{
  gap:5px;
}
.field label{
  font-size:13.5px;
}
.field input{
  height:44px;
  border-radius:11px;
  font-size:14px;
}
.field-error{
  min-height:0;
  font-size:12.5px;
}
.field-error:empty{
  display:none;
}
.form-box .primary-btn{
  margin-top:4px;
}
.form-result{
  padding:10px 12px;
  font-size:13.5px;
}
.reward-title{
  gap:10px;
  margin-bottom:12px;
}
.reward-title-icon{
  width:32px;
  height:32px;
  flex-basis:32px;
}
.reward-showcase{
  gap:10px;
}
.reward-showcase-item{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  min-height:0;
  padding:10px 12px;
  border-radius:14px;
}
.reward-image-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  max-width:none;
  overflow:visible;
}
.reward-image-strip span,
.reward-image-strip span:nth-child(n+5){
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  overflow:visible;
  position:relative;
}
.reward-image-strip img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
  border-radius:10px;
  background:#f8fafc;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  transform-origin:center;
}
.reward-image-strip span:hover{
  z-index:20;
}
.reward-image-strip span:hover img{
  transform:scale(1.85);
  background:#fff;
  box-shadow:0 16px 36px rgba(15,23,42,.22);
}
.reward-showcase-text strong{
  font-size:15px;
  margin-bottom:2px;
}
.reward-showcase-text small{
  font-size:12.5px;
}
.site-footer{
  width:min(100% - 32px,1080px);
  justify-content:center;
  margin-bottom:18px;
}

/* v7: popup số điện thoại đã đăng ký */
.success-popup.is-duplicate .success-mark{
  background:#fee2e2;
  color:#dc2626;
}
.success-popup.is-duplicate h2{
  color:#b91c1c;
}
.duplicate-line{
  display:block;
  color:#dc2626;
  font-weight:900;
  margin-bottom:3px;
}
.success-popup.is-duplicate .success-summary{
  border-color:#fecaca;
  background:#fff7f7;
}
.success-popup.is-duplicate .primary-btn{
  background:#dc2626;
  box-shadow:0 10px 22px rgba(220,38,38,.18);
}
.success-popup.is-duplicate .primary-btn:hover{
  background:#b91c1c;
}

/* v7: popup random item khi vào website */
.item-teaser-backdrop{
  position:fixed;
  inset:0;
  z-index:900;
  background:rgba(15,23,42,.30);
  backdrop-filter:blur(4px);
}
.item-teaser{
  position:fixed;
  z-index:901;
  left:50%;
  top:50%;
  width:min(320px,calc(100vw - 32px));
  transform:translate(-50%,-50%);
  padding:22px 20px 20px;
  border:1px solid var(--line-blue);
  border-radius:20px;
  background:#fff;
  text-align:center;
  box-shadow:0 22px 60px rgba(15,23,42,.22);
}
.item-teaser-backdrop[hidden],.item-teaser[hidden]{display:none!important}
.item-teaser-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  margin-bottom:12px;
}
.item-teaser-img{
  width:96px;
  height:96px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:20px;
  border:1px solid var(--line-blue-strong);
  background:linear-gradient(180deg,#fff,#eff6ff);
  box-shadow:0 14px 28px rgba(37,99,235,.14);
}
.item-teaser-img img{
  width:76px;
  height:76px;
  object-fit:contain;
  transition:transform .18s ease;
}
.item-teaser-img:hover img{
  transform:scale(1.28);
}
.item-teaser h2{
  margin:0 0 6px;
  font-size:26px;
  color:#0f172a;
  letter-spacing:-.02em;
  font-weight:900;
}
.item-teaser p{
  margin:0 0 14px;
  color:#64748b;
  line-height:1.45;
  font-size:14px;
}
.item-teaser .primary-btn{
  width:100%;
}

@media(max-width:900px){
  .content-grid{grid-template-columns:1fr}
  .page-shell{width:min(100% - 24px,1080px)}
}
@media(max-width:640px){
  .hero-card{padding:16px;gap:14px}
  .hero-card h1{font-size:25px}
  .hero-action{width:100%}
  .alert-card{margin-top:12px;padding:12px}
  .content-grid{gap:14px;margin-top:14px}
  .card{padding:14px}
  .form-box{padding:12px}
  .reward-image-strip span,
  .reward-image-strip span:nth-child(n+5){width:36px;height:36px;flex-basis:36px}
  .reward-image-strip span:hover img{transform:scale(1.55)}
}

/* v8: banner sự kiện, tooltip tên item, bố cục phần thưởng không che chữ */
.page-shell{
  width:min(100% - 32px,1064px);
  padding-top:12px;
}
.hero-card{
  min-height:92px;
  padding:14px 20px;
}
.event-badge{
  margin-bottom:6px;
}
.hero-card h1{
  font-size:clamp(23px,3vw,28px);
}
.hero-card p{
  margin-top:4px;
  font-size:13.5px;
}
.content-grid{
  grid-template-columns:minmax(0,1.04fr) minmax(390px,.86fr);
  align-items:start;
}
.left-stack{
  display:grid;
  gap:12px;
  min-width:0;
}
.form-card{
  padding:16px;
}
.form-card .card-title-row{
  margin-bottom:10px;
}
.form-box{
  gap:8px;
  padding:12px 14px;
}
.field input{
  height:42px;
}
.primary-btn{
  min-height:42px;
}
.event-poster-card{
  margin:0;
  height:clamp(255px,29vw,340px);
  overflow:hidden;
  border:1px solid var(--line-blue);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}
.event-poster-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  border-radius:inherit;
}
.reward-card-wrap{
  overflow:visible;
}
.reward-showcase{
  gap:10px;
}
.reward-showcase-item{
  display:grid;
  grid-template-columns:minmax(144px,176px) minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:10px 12px;
  overflow:visible;
}
.reward-image-strip{
  display:grid;
  grid-template-columns:repeat(5,32px);
  gap:6px;
  align-items:center;
  justify-content:start;
  max-width:190px;
  min-width:0;
  overflow:visible;
}
.reward-image-strip .item-thumb,
.reward-image-strip span,
.reward-image-strip span:nth-child(n+5){
  position:relative;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#f8fafc;
  overflow:visible;
  z-index:1;
}
.reward-image-strip img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
  border-radius:9px;
  background:#f8fafc;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  transform-origin:center;
}
.reward-image-strip .item-thumb:hover,
.reward-image-strip span:hover{
  z-index:50;
}
.reward-image-strip .item-thumb:hover img,
.reward-image-strip span:hover img{
  transform:scale(1.45);
  background:#fff;
  box-shadow:0 12px 26px rgba(15,23,42,.20);
}
.reward-image-strip .item-thumb::after{
  content:attr(data-item-name);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  min-width:max-content;
  max-width:220px;
  padding:6px 9px;
  border-radius:9px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  box-shadow:0 10px 20px rgba(15,23,42,.20);
  transition:opacity .14s ease,transform .14s ease;
}
.reward-image-strip .item-thumb:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.reward-showcase-text{
  min-width:0;
  align-self:center;
  padding-left:0;
}
.reward-showcase-text strong,
.reward-showcase-text small{
  position:relative;
  z-index:1;
}
.reward-showcase-text strong{
  font-size:15px;
  line-height:1.2;
}
.reward-showcase-text small{
  font-size:12.5px;
  line-height:1.35;
}
.item-teaser-name{
  display:inline-flex;
  max-width:100%;
  margin:0 auto 8px;
  padding:5px 10px;
  border-radius:999px;
  background:#f8fbff;
  border:1px solid var(--line-blue);
  color:#1e3a8a;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}
.item-teaser-img img{
  border-radius:14px;
}
@media(max-width:980px){
  .content-grid{grid-template-columns:1fr;}
  .event-poster-card{height:clamp(250px,54vw,420px)}
}
@media(max-width:640px){
  .page-shell{width:min(100% - 22px,1064px)}
  .hero-card{min-height:auto;padding:14px;align-items:flex-start;flex-direction:column}
  .hero-action{width:100%;}
  .reward-showcase-item{grid-template-columns:1fr;gap:8px;}
  .reward-image-strip{grid-template-columns:repeat(5,34px);max-width:100%;}
  .reward-image-strip .item-thumb,
  .reward-image-strip span,
  .reward-image-strip span:nth-child(n+5){width:34px;height:34px;flex-basis:34px}
  .reward-image-strip .item-thumb:hover img,
  .reward-image-strip span:hover img{transform:scale(1.32)}
  .event-poster-card{height:330px;}
}

/* v8.1: hai cột cân chiều cao, ảnh lấp khung trống dưới form */
.content-grid{align-items:stretch;}
.left-stack{display:flex;flex-direction:column;height:100%;}
.form-card{flex:0 0 auto;}
.event-poster-card{flex:1 1 260px;min-height:260px;height:auto;}
.reward-card-wrap{height:100%;}
@media(max-width:980px){
  .left-stack{display:grid;height:auto;}
  .event-poster-card{height:clamp(260px,54vw,420px);min-height:0;}
  .reward-card-wrap{height:auto;}
}
@media(max-width:640px){
  .event-poster-card{height:330px;}
}

/* v9: chặn alt text tràn ra khi ảnh item lỗi, đồng thời giữ khung item gọn */
.reward-image-strip img,
.item-teaser-img img{
  display:block;
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
}
.reward-image-strip .item-thumb.is-missing-image,
.item-teaser-img.is-missing-image{
  background:#eff6ff;
  border-color:var(--line-blue-strong);
}
.reward-image-strip .item-thumb.is-missing-image::before,
.item-teaser-img.is-missing-image::before{
  content:attr(data-fallback-icon);
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#1d4ed8;
  font-size:18px;
  line-height:1;
}
.reward-image-strip .item-thumb.is-missing-image:not([data-fallback-icon])::before{
  content:'🎁';
}
.item-teaser-img.is-missing-image::before{
  font-size:38px;
}
.reward-image-strip .item-thumb.is-missing-image img,
.item-teaser-img.is-missing-image img{
  display:none!important;
}
.reward-image-strip .item-thumb::after{
  z-index:60;
}

/* v10: menu Trang Chủ / Tải Game nổi bật trong khung đầu và redirect sau nút Đã hiểu */
.hero-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  flex:0 0 auto;
}
.hero-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.hero-menu-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid #fde68a;
  background:linear-gradient(135deg,#fff7ed,#fef3c7 52%,#ffffff);
  color:#92400e;
  font-size:14px;
  font-weight:950;
  letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  animation:heroMenuFloat 2.6s ease-in-out infinite, heroMenuGlow 1.9s ease-in-out infinite;
}
.hero-menu-link:hover{
  transform:translateY(-2px) scale(1.03);
  filter:saturate(1.08);
  box-shadow:0 16px 30px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-download-link{
  border-color:#bfdbfe;
  background:linear-gradient(135deg,#2563eb,#1d4ed8 62%,#60a5fa);
  color:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.22);
  animation-delay:.18s;
}
.hero-download-link:hover{
  box-shadow:0 18px 34px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.28);
}
@keyframes heroMenuFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes heroMenuGlow{
  0%,100%{box-shadow:0 10px 22px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.85)}
  50%{box-shadow:0 14px 30px rgba(245,158,11,.30), inset 0 1px 0 rgba(255,255,255,.92)}
}
.hero-download-link{
  animation-name:heroMenuFloat, heroDownloadGlow;
}
@keyframes heroDownloadGlow{
  0%,100%{box-shadow:0 12px 26px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.22)}
  50%{box-shadow:0 16px 36px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.32)}
}
@media(max-width:900px){
  .hero-actions{width:100%;align-items:stretch}
  .hero-menu{width:100%;justify-content:stretch}
  .hero-menu-link{flex:1 1 150px}
}
@media(max-width:640px){
  .hero-actions{gap:9px}
  .hero-menu{gap:8px}
  .hero-menu-link{min-height:40px;padding:0 10px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .hero-menu-link{animation:none}
}

/* v11: tối ưu tải ảnh và giảm khối lượng render ban đầu */
.event-poster-card picture{display:block;width:100%;height:100%}
.reward-showcase-item{content-visibility:auto;contain-intrinsic-size:78px}

/* v12: menu liền mạch nằm giữa khung đầu, cùng kiểu chữ với “LƯU Ý QUAN TRỌNG” */
.hero-card{
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(360px,520px) minmax(230px,1fr);
  align-items:start;
  justify-content:initial;
  gap:18px;
}
.hero-card::after{
  content:"";
  display:block;
}
.hero-copy{
  min-width:0;
}
.hero-menu{
  grid-column:2;
  align-self:start;
  justify-self:center;
  width:min(100%,520px);
  display:inline-flex;
  align-items:stretch;
  justify-content:center;
  gap:0!important;
  flex-wrap:nowrap;
  margin-top:8px;
  border:1px solid var(--red-line);
  border-left:5px solid var(--red);
  border-radius:14px;
  overflow:hidden;
  background:var(--red-soft);
  box-shadow:0 12px 28px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.92);
  animation:v12MenuGlow 2.2s ease-in-out infinite;
}
.hero-menu-link{
  flex:1 1 0;
  min-width:0;
  min-height:42px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-left:1px solid var(--red-line);
  border-radius:0;
  background:transparent;
  color:#dc2626;
  font-size:15px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:0;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:none;
  transition:background .16s ease,color .16s ease,transform .16s ease;
  animation:none!important;
}
.hero-menu-link:first-child{border-left:0}
.hero-menu-link:hover{
  background:#fee2e2;
  color:#b91c1c;
  transform:none;
  filter:none;
  box-shadow:none;
}
.hero-claim-link{
  background:linear-gradient(180deg,rgba(254,226,226,.80),rgba(255,255,255,.15));
}
.hero-claim-link:hover{
  background:#fecaca;
}
@keyframes v12MenuGlow{
  0%,100%{box-shadow:0 12px 28px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.92)}
  50%{box-shadow:0 16px 36px rgba(239,68,68,.22), inset 0 1px 0 rgba(255,255,255,.96)}
}
@media(max-width:900px){
  .hero-card{
    display:flex;
    align-items:stretch;
    flex-direction:column;
  }
  .hero-card::after{display:none}
  .hero-menu{
    width:100%;
    margin-top:2px;
    justify-self:stretch;
  }
}
@media(max-width:640px){
  .hero-menu-link{
    min-height:40px;
    padding:0 7px;
    font-size:12.5px;
    gap:4px;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-menu{animation:none}
}


/* v13: bỏ phần tiêu đề/subtitle trong khung đầu, menu gọn và liền mạch hơn */
.hero-card-menu-only{
  min-height:auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.hero-card-menu-only::after{display:none!important}
.hero-card-menu-only .hero-menu{
  grid-column:auto;
  align-self:center;
  justify-self:center;
  width:min(100%,500px);
  margin:0;
  border-radius:13px;
}
.hero-card-menu-only .hero-menu-link{
  min-height:38px;
  padding:0 13px;
  font-size:14px;
  font-weight:900;
}
@media(max-width:640px){
  .hero-card-menu-only{padding:10px 12px}
  .hero-card-menu-only .hero-menu{width:100%}
  .hero-card-menu-only .hero-menu-link{min-height:38px;padding:0 6px;font-size:12px;gap:3px}
}

.success-countdown{
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .06);
    font-size: 14px;
    font-weight: 700;
}
.success-countdown[hidden]{display:none!important;}