/* RESET / BASE */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  font-family: 'Poppins', 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* nền mặc định tối nhẹ để header không bị lạc quẻ */
   background-color: #000;
  color: #fff;                    /* text trắng nhạt mặc định */
}

img {
  max-width: 100%;
  display: block;
}

/* CONTAINER */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* HEADER BAR (đẹp hơn) */
.site-header {
  background: rgba(0,0,0,0.4);            /* nền trong suốt kiểu kính */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.brand-logo {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ff1a1a; /* đỏ tươi */
  text-shadow: 
    0 0 6px rgba(255,0,0,0.8),
    0 0 15px rgba(255,50,50,0.6),
    0 0 30px rgba(255,0,0,0.4);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menu ngang */
.header-menu {
  display: flex;
  align-items: center;
  gap: 24px;                   /* khoảng cách từng mục */
  flex-wrap: wrap;
}

/* Link trong menu */
.header-link {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #f8fafc;              /* text gần trắng */
  text-decoration: none;       /* bỏ gạch chân */
  line-height: 1.2;
  transition: all .18s ease;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  display: inline-block;
  position: relative;
}

/* Hiệu ứng gạch phát sáng khi hover */
.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg,#38bdf8 0%,#6366f1 50%,#facc15 100%);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.4);
  transition: all .18s ease;
}

.header-link:hover {
  color: #38bdf8;              /* chữ xanh cyan khi hover */
  text-shadow: 0 0 8px rgba(56,189,248,.6);
}

.header-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Nút "Hướng Dẫn Cược" bên phải */
.header-cta-desktop {
  display: flex;
  align-items: center;
}

.guide-outline-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(0,0,0,0.4);
  border: 2px solid #38bdf8;
  border-radius: 10px;
  padding: 8px 14px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56,189,248,.6),
              0 0 24px rgba(56,189,248,.3);
  transition: all .2s ease;
  white-space: nowrap;
}

.guide-outline-btn:hover {
  background: rgba(56,189,248,.15);
  box-shadow: 0 0 16px rgba(56,189,248,.8),
              0 0 30px rgba(56,189,248,.4);
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.6);
  transform: translateY(-1px) scale(1.03);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .header-cta-desktop {
    display: none;              /* Ẩn nút bên phải trên mobile */
  }

  .header-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: center;
  }

  .brand-logo {
    font-size: 20px;
    width: 100%;
    text-align: center;
    justify-content: center;
    order: 1;
  }

  .header-menu {
    order: 2;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 20px;
  }
}


/* HERO SECTION */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-image: var(--hero-bg);
  color: #fff;
}
.hero-overlay {
   position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(255,0,0,0.3) 0%,
    rgba(0,0,0,0.9) 70%
  );
}
.hero-inner {
  position: relative;
  z-index: 10;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 4rem;
  max-width: 800px;
}

/* HERO CARD (gradient frame with banner) */
.hero-card {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  background: linear-gradient(
    135deg,
    #2563eb 0%,
    #7e22ce 40%,
    #dc2626 100%
  );
  padding: .5rem;
  border-radius: 1rem;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.6),
    0 0 30px rgba(255,255,255,0.2);
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero-card-inner {
  position: relative;
  background: rgba(0,0,0,.2);
  border-radius: .75rem;
  padding-top: .75rem;
  padding-bottom: .5rem;
}

/* TITLE "ĐÁ GÀ THOMO" */
.hero-headline-wrap {
  position: relative;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.hero-headline {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
  font-size: 1.75rem;
  line-height: 1.15;
  background: linear-gradient(45deg,
    #FFD700,
    #FF6B35,
    #F7931E,
    #FFD700,
    #FF1493,
    #00FFFF
  );
  background-size: 600% 600%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 40px #FFD700,
    0 0 80px #FF6B35,
    0 0 120px #F7931E,
    0 0 160px #FF1493;
  animation:
    gradientShift 2s ease-in-out infinite,
    glow 1.5s ease-in-out infinite alternate,
    bounceTitle 3s ease-in-out infinite;
  margin: 0 0 .5rem;
}
@media(min-width:768px){
  .hero-headline {
    font-size: 2.5rem;
  }
}
@media(min-width:1024px){
  .hero-headline {
    font-size: 3rem;
  }
}

/* glowing bars under/over title */
.headline-bar {
  position: absolute;
  left: 50%;
  width: 12rem;
  height: .4rem;
  border-radius: .25rem;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(251,191,36,1) 50%,
    rgba(0,0,0,0) 100%
  );
  filter: drop-shadow(0 0 6px rgba(251,191,36,.8));
  animation: pulseBar 2s infinite;
}
.headline-bar.top {
  top: 0;
}
.headline-bar.bottom {
  bottom: 0;
  width: 14rem;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(249,115,22,1) 50%,
    rgba(0,0,0,0) 100%
  );
  filter: drop-shadow(0 0 6px rgba(249,115,22,.8));
}

/* sparkles around title */
.spark {
  position: absolute;
  border-radius: 9999px;
  box-shadow: 0 0 10px currentColor,0 0 20px currentColor;
  animation: sparkPulse 2s infinite;
}
.s1 {
  top: .5rem;
  left: 25%;
  width: .75rem;
  height: .75rem;
  background-color: #facc15; /* yellow-400 */
}
.s2 {
  top: .7rem;
  right: 25%;
  width: .5rem;
  height: .5rem;
  background-color: #22d3ee; /* cyan-400 */
}
.s3 {
  bottom: .5rem;
  left: 33%;
  width: .5rem;
  height: .5rem;
  background-color: #f472b6; /* pink-400 */
}
.s4 {
  bottom: 1rem;
  right: 33%;
  width: .75rem;
  height: .75rem;
  background-color: #4ade80; /* green-400 */
}

/* HERO PEOPLE IMAGE */
.hero-image-wrap {
  position: relative;
}
.hero-people-img {
  border-radius: .75rem;
  box-shadow:
    0 15px 30px rgba(0,0,0,0.7),
    0 0 25px rgba(255,255,255,0.2);
  height: auto;
  max-height: 400px;
  width: 100%;
  object-fit: cover;
}

/* MARQUEE */
.marquee-bar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to right,
    #2563eb 0%,
    #0d9488 50%,
    #ef4444 100%
  );
  border-radius: .75rem;
  padding: .5rem .75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.8);
}
.marquee-track {
  white-space: nowrap;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .03em;
  display: inline-block;
  animation: marquee 15s linear infinite;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
@media(min-width:768px){
  .marquee-track {
    font-size: 1.2rem;
  }
}

/* PROMO BADGES */
.promo-badges {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: .5rem;
}
@media(min-width:768px){
  .promo-badges {
    grid-template-columns: repeat(2,1fr);
    column-gap: .5rem;
    row-gap: 0;
  }
}
.promo-badge {
  background-color: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: .5rem .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 15px 30px rgba(0,0,0,.8);
  transition: transform .15s;
}
.promo-badge:hover {
  transform: scale(1.05);
}
.promo-badge-heading {
  font-size: .75rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: .25rem;
}
.gold { color: #fde047; }        /* yellow-400 */
.cyan { color: #67e8f9; }        /* cyan-300 */
.promo-badge-sub {
  font-size: .8rem;
  font-weight: 900;
  line-height: 1.2;
}
.gold-sub { color: #fde68a; }    /* light yellow */
.cyan-sub { color: #a5f3fc; }    /* cyan-200 */

/* CTA BUTTONS BLOCK */
.cta-wrap {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  display: grid;
  row-gap: .75rem;
}
@media(min-width:768px){
  .cta-wrap {
    margin-bottom: 1.5rem;
  }
}
.cta-btn {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1rem;
  border: 2px solid #fff;
  padding: .9rem 1rem;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
  box-shadow:
    0 20px 30px rgba(0,0,0,.7),
    0 0 30px rgba(255,255,255,.4);
  transform-origin: center;
  animation:
    buttonBounce 2s ease-in-out infinite,
    buttonGlow 1.5s ease-in-out infinite alternate;
  transition: transform .2s;
}
.cta-btn:hover {
  transform: scale(1.1) translateY(-2px);
}

/* specific colors/bg glow */
.cta-btn.red {
  background: linear-gradient(to right,#dc2626,#ef4444);
  box-shadow: 0 0 30px #FF2C2C, 0 0 60px #FF2C2C;
}
.cta-btn.blue {
  background: linear-gradient(to right,#1e3a8a,#1d4ed8);
  animation-delay: .5s;
  box-shadow: 0 0 30px #007BFF,0 0 60px #007BFF;
}
.cta-btn.green {
  background: linear-gradient(to right,#059669,#10b981);
  animation-delay: 1s;
  box-shadow: 0 0 30px #10B981,0 0 60px #10B981;
}

.cta-label {
  position: relative;
  font-weight: 900;
  z-index: 2;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: 1;
}
.red-rooster {
  background-image: url('https://readdy.ai/api/search-image?query=Powerful%20fighting%20rooster%20with%20red%20feathers%20dynamic%20pose%20strong%20stance%20vibrant%20red%20background%20professional%20cockfighting%20bird%20detailed%20feathers%20aggressive%20posture%20championship%20rooster%20red%20lighting%20effects%20dramatic%20shadows&width=400&height=200&seq=red-rooster-001&orientation=landscape');
}
.blue-rooster {
  background-image: url('https://readdy.ai/api/search-image?query=Majestic%20fighting%20rooster%20with%20blue%20and%20dark%20feathers%20powerful%20stance%20confident%20pose%20blue%20background%20lighting%20professional%20cockfighting%20bird%20detailed%20plumage%20strong%20build%20championship%20rooster%20blue%20lighting%20effects%20dramatic%20atmosphere&width=400&height=200&seq=blue-roster-001&orientation=landscape');
}
.green-roosters {
  background-image: url('https://readdy.ai/api/search-image?query=Two%20fighting%20roosters%20facing%20each%20other%20in%20arena%20green%20emerald%20lighting%20professional%20cockfighting%20scene%20dramatic%20confrontation%20championship%20birds%20detailed%20feathers%20combat%20stance%20green%20background%20lighting%20effects%20intense%20atmosphere&width=400&height=200&seq=green-roosters-001&orientation=landscape');
}
.cta-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.3) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-12deg);
  animation: shimmer 2s ease-in-out infinite;
  z-index: 3;
}

/* HOT PROMOTIONS */
.hot-promotions {
  background-color:#fff;
  padding-top:4rem;
  padding-bottom:4rem;
}
.section-title-red {
  font-size:1.75rem;
  font-weight:700;
  text-align:center;
  color:#ef4444;
  margin-top:0;
  margin-bottom:3rem;
}
@media(min-width:768px){
  .section-title-red{
    font-size:2rem;
  }
}
.promo-grid {
  max-width: 1024px;
  margin: 0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media(min-width:768px){
  .promo-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.promo-card {
  background-color:#fff;
  border-radius:1rem;
  box-shadow:0 25px 30px rgba(0,0,0,.07);
  border:2px solid;
  padding:1.5rem;
  position:relative;
  overflow:hidden;
  transition:all .2s;
}
.promo-card:hover {
  transform:scale(1.05);
}
.promo-card-blue { border-color:#bfdbfe; }     /* blue-200 */
.promo-card-blue:hover { border-color:#3b82f6; } /* blue-500 */
.promo-card-green { border-color:#bbf7d0; }    /* green-200 */
.promo-card-green:hover { border-color:#10b981; } /* green-500 */
.promo-card-purple { border-color:#e9d5ff; }   /* purple-200 */
.promo-card-purple:hover { border-color:#a855f7; } /* purple-500 */

.promo-card-inner {
  text-align:center;
  margin-bottom:1rem;
  position:relative;
  z-index:2;
}
.promo-emoji {
  font-size:2rem;
  margin-bottom:.5rem;
}
.promo-card-title {
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:.5rem;
}
.blue600 { color:#2563eb; }
.green600 { color:#059669; }
.purple600{ color:#7e22ce; }

.promo-card-number {
  font-size:1.5rem;
  font-weight:900;
  color:#ef4444;
  margin-bottom:.5rem;
}
.promo-card-desc{
  font-size:.9rem;
  line-height:1.4;
  color:#374151; /* gray-700 */
}
.promo-card-btn {
  width:100%;
  border:none;
  border-radius:.75rem;
  font-weight:700;
  font-size:.95rem;
  color:#fff;
  padding:.75rem 1rem;
  cursor:pointer;
}
.red-solid{
  background-color:#ef4444;
}
.red-solid:hover{
  background-color:#dc2626;
}
.green-solid{
  background-color:#10b981;
}
.green-solid:hover{
  background-color:#059669;
}
.purple-solid{
  background-color:#8b5cf6;
  color:#fff;
}
.purple-solid:hover{
  background-color:#7c3aed;
}

/* WHY US */
.why-us {
  background-color:#f9fafb;
  padding-top:4rem;
  padding-bottom:4rem;
}
.section-title-blue {
  font-size:1.75rem;
  font-weight:700;
  text-align:center;
  color:#2563eb;
  margin-top:0;
  margin-bottom:3rem;
}
@media(min-width:768px){
  .section-title-blue{
    font-size:2rem;
  }
}
.why-grid{
  max-width:1024px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media(min-width:768px){
  .why-grid{
    grid-template-columns:repeat(4,1fr);
  }
}
.why-card{
  background-color:#fff;
  text-align:center;
  border-radius:1rem;
  padding:1.5rem;
  box-shadow:0 15px 30px rgba(0,0,0,.07);
}
.why-emoji{
  font-size:2.5rem;
  margin-bottom:1rem;
}
.why-title{
  font-size:1.125rem;
  font-weight:700;
  color:#2563eb;
  margin-bottom:.5rem;
}
.why-desc{
  font-size:.9rem;
  color:#374151;
  line-height:1.4;
}

/* FOOTER */
.site-footer{
  background-color:#1e3a8a; /* blue-900 */
  color:#fff;
  padding-top:3rem;
  padding-bottom:3rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
@media(min-width:768px){
  .footer-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.footer-brand{
  font-size:1.5rem;
  font-weight:700;
  font-family:'Pacifico',serif;
  margin:0 0 1rem;
  color:#fff;
}
.footer-desc{
  color:#bfdbfe; /* blue-200 */
  font-size:.95rem;
  line-height:1.4;
  margin:0;
}
.footer-heading{
  font-size:1rem;
  font-weight:700;
  margin:0 0 1rem;
}
.footer-contact{
  color:#bfdbfe;
  font-size:.95rem;
  line-height:1.5;
}
.footer-socials{
  display:flex;
  justify-content:center;
  gap:1rem;
}
@media(min-width:768px){
  .footer-socials{
    justify-content:flex-end;
  }
}
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:9999px;
  color:#fff;
  transition:background-color .15s;
  font-size:1.25rem;
}
.social-btn.fb{
  background-color:#2563eb;
}
.social-btn.fb:hover{
  background-color:#1e40af;
}
.social-btn.tg{
  background-color:#3b82f6;
}
.social-btn.tg:hover{
  background-color:#1d4ed8;
}
.social-btn.call{
  background-color:#60a5fa;
}
.social-btn.call:hover{
  background-color:#3b82f6;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:2rem;
  padding-top:2rem;
  text-align:center;
  color:#bfdbfe;
  font-size:.9rem;
  line-height:1.4;
}

/* MOBILE NAV */
.mobile-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,#2563eb,#ef4444);
  height:4rem;
  display:block;
  z-index:999;
}
@media(min-width:768px){
  .mobile-nav{
    display:none;
  }
}
.mobile-nav-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:100%;
}
.mobile-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  padding:0;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:background-color .15s;
}
.mobile-nav-item:hover{
  background-color:rgba(255,255,255,.2);
}
.mobile-icon{
  font-size:1rem;
  margin-bottom:.25rem;
}
.mobile-text{
  font-size:.7rem;
  font-weight:700;
}
.mobile-nav-spacer{
  height:4rem;
}
@media(min-width:768px){
  .mobile-nav-spacer{
    display:none;
  }
}

/* POPUPS (OVERLAY) */
.overlay{
  position:fixed;
  inset:0;
  background-color:rgba(0,0,0,.5);
  display:none; /* hidden by default */
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:9999;
}
.popup-card{
  background-color:#fff;
  border-radius:1rem;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  max-height:90vh;
  overflow-y:auto;
}
.popup-large{
  width:100%;
  max-width:64rem; /* ~1024px */
  padding:1.5rem;
}
.popup-small{
  width:100%;
  max-width:24rem;
  padding:1.5rem;
}

/* popup heading */
.popup-head {
  text-align:center;
  margin-bottom:1.5rem;
}
.popup-title-red{
  font-size:1.5rem;
  font-weight:700;
  color:#ef4444;
  margin:0 0 .5rem;
}
@media(min-width:768px){
  .popup-title-red{
    font-size:1.875rem;
  }
}
.popup-head-bar{
  width:5rem;
  height:.25rem;
  border-radius:.25rem;
  margin-left:auto;
  margin-right:auto;
  background:linear-gradient(to right,#ef4444,#2563eb);
}

/* popup grid */
.grid-2col{
  display:grid;
  gap:1.5rem;
}
@media(min-width:768px){
  .grid-2col{
    grid-template-columns:repeat(2,1fr);
  }
}

/* left col */
.popup-section{
  border-radius:.75rem;
  border:1px solid;
  padding:1rem;
}
.popup-blue{
  background:linear-gradient(to bottom right,#eff6ff,#dbeafe);
  border-color:#bfdbfe;
}
.popup-green{
  background:linear-gradient(to bottom right,#ecfdf5,#d1fae5);
  border-color:#bbf7d0;
}
.popup-section-title{
  font-size:1.125rem;
  font-weight:700;
  margin:0 0 1rem;
  display:flex;
  align-items:center;
  color:#2563eb;
}
.popup-section-title.green{
  color:#059669;
}
.popup-section-icon{
  width:2rem;
  height:2rem;
  font-size:.9rem;
  font-weight:700;
  border-radius:9999px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:.75rem;
}
.blue-bg{
  background-color:#2563eb;
}
.green-bg{
  background-color:#10b981;
}

/* steps */
.popup-steps{
  display:grid;
  row-gap:.75rem;
}
.popup-step{
  background-color:#fff;
  border-radius:.5rem;
  box-shadow:0 5px 10px rgba(0,0,0,.05);
  padding:.75rem;
  display:flex;
  align-items:flex-start;
  column-gap:.75rem;
}
.popup-step-num{
  background-color:#ef4444;
  color:#fff;
  width:1.5rem;
  height:1.5rem;
  border-radius:9999px;
  font-size:.8rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.popup-step-text{
  font-size:.9rem;
  font-weight:500;
  color:#1f2937;
  line-height:1.4;
}

/* right col rate examples */
.rate-box-list{
  display:grid;
  row-gap:.75rem;
}
.rate-box{
  background-color:#fff;
  border-radius:.5rem;
  box-shadow:0 5px 10px rgba(0,0,0,.05);
  padding:1rem;
  border-left-width:4px;
  border-left-style:solid;
}
.border-red{ border-left-color:#ef4444; }
.border-blue{ border-left-color:#2563eb; }
.border-yellow{ border-left-color:#facc15; }

.rate-box-title{
  font-weight:700;
  margin-bottom:.25rem;
  font-size:1rem;
}
.red-text{ color:#dc2626; }
.blue-text{ color:#2563eb; }
.yellow-text{ color:#ca8a04; }

.rate-box-desc{
  font-size:.9rem;
  color:#4b5563;
  line-height:1.4;
}

/* popup close btn */
.popup-foot{
  text-align:center;
  margin-top:1.5rem;
}
.center{
  text-align:center;
}
.btn-close-popup{
  border:0;
  border-radius:.75rem;
  font-weight:700;
  font-size:1rem;
  background:linear-gradient(to right,#4b5563,#374151);
  color:#fff;
  padding:.75rem 1.5rem;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
  transition:all .2s;
}
.btn-close-popup:hover{
  transform:scale(1.05);
}

/* POPUP RATE */
.popup-rate-head{
  text-align:center;
  margin-bottom:1rem;
}
.rate-title{
  font-size:1.5rem;
  font-weight:700;
  color:#2563eb;
  margin:0 0 1rem;
}
.rate-content{
  text-align:center;
}
.rate-convert-box{
  background:linear-gradient(to right,#eff6ff,#ecfdf5);
  border-radius:.75rem;
  padding:1rem;
  margin-bottom:1rem;
}
.rate-label{
  font-size:1rem;
  font-weight:700;
  color:#2563eb;
  margin-bottom:.5rem;
}
.rate-big{
  font-size:1.5rem;
  font-weight:900;
  color:#ef4444;
  margin-bottom:.5rem;
}
.rate-warning-box{
  background-color:#fefce8;
  border:2px solid #fde68a;
  border-radius:.75rem;
  padding:1rem;
  margin-bottom:1.5rem;
}
.rate-warning-title{
  font-size:1rem;
  font-weight:700;
  color:#ea580c;
  margin-bottom:.5rem;
}
.rate-warning-text{
  font-size:1rem;
  font-weight:500;
  color:#1f2937;
  margin-bottom:.5rem;
}
.rate-warning-text .hl-red{
  color:#ef4444;
  font-weight:700;
}
.rate-warning-note{
  font-size:.85rem;
  color:#4b5563;
}
.rate-examples{
  display:grid;
  row-gap:.75rem;
  margin-bottom:1.5rem;
}
.rate-example{
  background-color:#f9fafb;
  border-radius:.5rem;
  padding:.75rem;
}
.rate-example-label{
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:.25rem;
}
.rate-example-value{
  font-size:.95rem;
  font-weight:700;
  color:#2563eb;
}
.blue-text-strong{
  color:#2563eb;
}
.green-text-strong{
  color:#059669;
}
.rate-close-btn{
  width:100%;
  border:0;
  background-color:#2563eb;
  color:#fff;
  font-weight:700;
  font-size:1rem;
  padding:.75rem 1rem;
  border-radius:.75rem;
  cursor:pointer;
}
.rate-close-btn:hover{
  background-color:#1e40af;
}

/* ANIMATIONS */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes glow {
  0% { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.3) saturate(1.2); }
}
@keyframes bounceTitle {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}
@keyframes pulseBar {
  0%,100% { opacity: .8; }
  50% { opacity: 1; }
}
@keyframes sparkPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes buttonBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}
@keyframes buttonGlow {
  0% { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.3) saturate(1.2); }
}
@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}
/* PARTNER BANNER */
.partner-banner-section {
  background-color: #000;
  padding: 0;
  border-bottom: 1px solid rgba(0,255,0,0.15);
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

.partner-banner-inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.partner-banner-img {
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .partner-banner-img {
    max-height: 140px;
  }
}
/* HERO BANNER (THAY CHO TITLE) */
.hero-banner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.hero-banner-img {
  width: 100%;
  max-width: 1000px; /* tăng từ 800px lên cho bự hơn */
  height: auto;
  max-height: 350px; /* tăng chiều cao tối đa */
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  object-fit: contain;
}

@media (max-width: 768px) {
  .hero-banner-img {
    max-width: 100%;
    max-height: 300px; /* vẫn responsive cho mobile */
  }
}
/* Khi hero-card chỉ còn banner */
.hero-card-banner-only {
  padding: 0; /* bỏ padding thừa bên trong để banner ăn sát */
  background: #000; /* hoặc để trong suốt cũng được, xem thích cái nào */
  border-radius: .75rem;
  overflow: hidden; /* ép banner ôm luôn bo góc của card */
}

/* Banner bên trong card hero */
.hero-full-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;         /* chỉnh chiều cao ở đây */
  object-fit: cover;         /* fill full chiều ngang của card */
}

/* trên mobile có thể cho banner thấp lại nếu m muốn */
@media (max-width: 480px) {
  .hero-full-banner-img {
    max-height: 200px;
  }
}
/* --- HERO ARENA (hình đấu trường mới) --- */
.hero-image-wrap.hero-arena .hero-people-img {
  border-radius: .75rem;
  border: 2px solid rgba(255,0,0,0.4);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.9),
    0 0 40px rgba(255,0,0,0.4),
    0 0 80px rgba(255,0,0,0.2);
  max-height: 360px;
  object-fit: cover;
}
@media(max-width:480px){
  .hero-image-wrap.hero-arena .hero-people-img {
    max-height: 260px;
  }
}
/* ===============================
   FIGHT SECTION (2 gà nhỏ)
================================*/
.fight-section {
  background-color: #000; /* tone đen */
  padding: 2rem 1rem;
  border-top: 2px solid #dc2626; /* viền đỏ */
  text-align: center;
}

/* Grid chứa 2 thẻ */
.fight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 700px;
  margin: 1rem auto;
}

/* Thẻ gà */
.fight-card {
  background: linear-gradient(180deg, #111 0%, #1a0000 100%);
  border: 2px solid #dc2626;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255,0,0,0.3);
  transition: transform .2s, box-shadow .2s;
}
.fight-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(255,50,50,0.6);
}

/* Hình gà */
.fight-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Phần tên + nút */
.fight-info {
  padding: .75rem;
}
.fight-name {
  color: #fff;
  font-size: 1.1rem;
  margin: .5rem 0;
  letter-spacing: 1px;
}

/* Nút chơi ngay */
.play-now-btn {
  background: linear-gradient(90deg, #dc2626, #7f1d1d);
  color: #fff;
  border: none;
  padding: .6rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255,0,0,0.5);
  transition: transform .2s;
}
.play-now-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.4);
  transform: skewX(-20deg);
  animation: shimmer 2s infinite;
}
.play-now-btn:hover {
  transform: scale(1.08);
}

/* Hiệu ứng lấp lánh nút */
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
/* OVERRIDE LOGO TRÊN HEADER */
.brand-logo {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #ff1a1a !important; /* đỏ tươi */
  text-shadow:
    0 0 6px rgba(255,0,0,0.8),
    0 0 15px rgba(255,50,50,0.6),
    0 0 30px rgba(255,0,0,0.4),
    0 0 60px rgba(255,0,0,0.2);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* HEADER STYLE chỉnh lại nền header cho đúng tông đen/đỏ */
.site-header {
  background: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.9) 0%, #000 60%);
  border-bottom: 1px solid rgba(255,0,0,0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.9), 0 0 20px rgba(255,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 0;
}

/* .header-inner canh giữa logo */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: center; /* cho logo ra giữa */
  min-height: 44px;
}

/* Ẩn luôn phần menu + CTA nếu còn sót */
.header-menu,
.header-cta-desktop {
  display: none !important;
}