/* Style nền + hiệu ứng hover chuyển từ file design VatPhamGame.dc.html.
   Phần bố cục vẫn giữ inline style như bản design để dễ đối chiếu. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: #334263;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: #1560FD; text-decoration: none; }
a:hover { color: #0F4CD1; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #1560FD; outline-offset: 2px; }

@keyframes vpgFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vpgToast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 1039px) {
  [data-vpg="desktop-nav"], [data-vpg="desktop-cta"], [data-vpg="desktop-search"] { display: none !important; }
}
@media (min-width: 1040px) {
  [data-vpg="menu-btn"], [data-vpg="mobile-search"] { display: none !important; }
}

/* Hover — thay cho thuộc tính style-hover của file design */
/* Menu chính viết hoa. Chữ hoa rộng hơn chữ thường nên phải thu lại cỡ chữ và
   khoảng đệm, không thì mục cuối bị cắt do thanh điều hướng có overflow ẩn. */
.vpg-nav-link, .vpg-menu-link { text-transform: uppercase; letter-spacing: .02em; }
.vpg-nav-link { font-size: 13px !important; padding-left: 9px !important; padding-right: 9px !important; }
.vpg-nav-link:hover     { background: #F2F5FA; color: #1560FD; }
.vpg-menu-link:hover    { background: #F2F5FA; }
.vpg-search-btn:hover   { border-color: #C9D8F8; background: #fff; color: #5A6A85; }
.vpg-icon-btn:hover     { border-color: #C9D8F8; background: #fff; }
.vpg-cta:hover          { background: #FFEBD7; border-color: #F97108; }
.vpg-close:hover        { background: #E6EAF2; }
.vpg-result:hover       { background: #F4F7FD; }
.vpg-card:hover         { background: #F5F8FF; }
.vpg-row:hover          { background: #F5F8FF; }
.vpg-related:hover      { background: #F4F7FD; }
.vpg-loadmore:hover     { background: #F0F5FF; }
.vpg-btn-primary:hover  { background: #0F4CD1; }
.vpg-btn-ghost:hover    { border-color: #C9D8F8; background: #F5F8FF; color: #1560FD; }
.vpg-link-btn:hover     { background: #E8F0FF; }
.vpg-copy:hover         { background: #E8F0FF; border-color: #C9D8F8; }
.vpg-faq-q:hover        { background: #F1F5FD; }
.vpg-foot-link:hover    { color: #1560FD; }
.vpg-page:hover         { border-color: #C9D8F8; background: #F0F5FF; color: #1560FD; }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Nút nhận vật phẩm đặc biệt

   Đây là nút chính của trang game nên tách hẳn khỏi mọi nút khác: nền vàng
   cam chuyển sắc, viền sáng, quầng đổ bóng và một vệt sáng quét ngang chậm.
   Vệt sáng và nhịp quầng đều tắt khi người dùng bật giảm chuyển động.
--------------------------------------------------------------------------- */
.vpg-cta-reward,
.vpg-cta-special {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  white-space: nowrap;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 16px;
  /* Đậm hơn bản đầu: chữ và icon màu trắng đặt trên vàng nhạt thì không đọc được. */
  background: linear-gradient(135deg, #FF9A1F 0%, #F4700B 45%, #DC5406 100%);
  color: #fff;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(120, 55, 0, .45);
  box-shadow:
    0 12px 28px rgba(214, 96, 6, .38),
    0 2px 0 rgba(160, 74, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .42);
  animation: vpgCtaGlow 2.8s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.vpg-cta-reward:hover,
.vpg-cta-special:hover {
  color: #fff;
  filter: saturate(1.06) brightness(1.04);
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(214, 96, 6, .48),
    0 2px 0 rgba(160, 74, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.vpg-cta-reward:active,
.vpg-cta-special:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(226, 118, 12, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.vpg-cta-reward svg:last-child,
.vpg-cta-special svg:last-child { transition: transform .15s ease; }
.vpg-cta-reward:hover svg:last-child,
.vpg-cta-special:hover svg:last-child { transform: translateX(4px); }

@keyframes vpgCtaGlow {
  0%, 100% { box-shadow: 0 12px 28px rgba(214, 96, 6, .38), 0 2px 0 rgba(160, 74, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .42); }
  50%      { box-shadow: 0 12px 34px rgba(214, 96, 6, .55), 0 2px 0 rgba(160, 74, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .42); }
}

@media (prefers-reduced-motion: reduce) {
  .vpg-cta-reward, .vpg-cta-special { animation: none; }
}

/* Dòng gợi ý nhỏ đặt dưới nút */
.vpg-cta-note { margin: 10px 0 0; font-size: 13px; color: #8A6A3A; }

/* Khối giới thiệu ở đầu trang game */
.vpg-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFF1DC 0%, #FFE3BC 100%);
  border: 1px solid #FFD59B;
  color: #9A4A06;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vpg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.vpg-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #E3EAF7;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #47587A;
}

/* Hai nút xếp thành cột, mỗi nút trải hết bề ngang khối.
   Không xếp ngang: cột chữ của khối giới thiệu chỉ rộng khoảng 330-460px tuỳ
   màn hình, mà nút chính không xuống dòng được, nên xếp ngang là tràn khung ở
   bề ngang tablet. */
.vpg-hero-actions { display: grid; gap: 10px; }
.vpg-hero-actions > * { width: 100%; }

.vpg-hero-guide {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 0 24px;
  border: 1.5px solid #DCE6F8;
  border-radius: 16px;
  background: #fff;
  color: #334263;
  font-size: 15.5px;
  font-weight: 700;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vpg-hero-guide:hover { border-color: #B9CDF6; background: #F3F7FF; color: #1560FD; }

/* Nội dung bài viết: căn đều hai bên cho khối chữ vuông vắn */
.vpg-prose p,
.vpg-prose li { text-align: justify; text-justify: inter-word; }
/* Trừ những dòng ngắn có icon hoặc thẻ, căn đều làm chúng giãn xấu */
.vpg-prose .vpg-cta-note,
.vpg-prose p:has(code),
.vpg-prose p:has(svg) { text-align: left; }

/* ---------------------------------------------------------------------------
   Card game

   Một kiểu duy nhất dùng cho mọi lưới: trang chủ, archive, trang danh mục.
   Sửa ở đây là đổi đồng loạt.
--------------------------------------------------------------------------- */
.vpg-gamecard {
  display: flex;
  flex-direction: column;
  border: 1px solid #EAEFF8;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vpg-gamecard:hover {
  transform: translateY(-3px);
  border-color: #C9DAFB;
  box-shadow: 0 14px 30px rgba(12, 23, 83, .12);
}

.vpg-gamecard__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: #EEF1F7;
}

.vpg-gamecard__body { display: flex; align-items: center; gap: 12px; padding: 14px 15px 12px; }

.vpg-gamecard__logo {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 12px; object-fit: cover; background: #EEF1F7;
  box-shadow: 0 2px 8px rgba(12, 23, 83, .14);
}

/* min-width:0 để chuỗi dài cắt được bằng dấu ba chấm thay vì phá vỡ bố cục */
.vpg-gamecard__text { flex: 1; min-width: 0; }

.vpg-gamecard__name {
  display: block;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #0C1753;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vpg-gamecard__sub {
  display: block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.45; color: #6B7A94;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vpg-gamecard__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: auto;
  padding: 10px 15px 13px;
  border-top: 1px solid #F2F5FB;
}

.vpg-gamecard__badge {
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}

.vpg-gamecard__meta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: #8A97AC;
}