/*
Theme Name: Seofy
Theme URI: http://seofy.webgeniuslab.net/
Author: WebGeniusLab
Author URI: http://webgeniuslab.net/
Description: WebGeniusLab team presents absolutely fresh and powerful WordPress theme. It combines new technologies and functional design that helps to showcase your content in better way. This WordPress theme is developed with attention to details, so you can create effective presentation of a website easily. Enjoy building web pages with our product!
Version: 1.6.1
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: seofy
*/

body {
    background-color: #efefef !important;
}

/* ====== Base ====== */
.casino-card{
  --bg:#08345D; --text:#fff; --gold:#ffd700; --accent:#ff5733;
  --red:#e53935; --indigo:#3f51b5;

  position:relative;
  display:grid;
  gap:3%;
  background:var(--bg);
  color:var(--text);
  border-radius:10px;
  padding:20px;
  box-shadow:0 0 10px rgba(0,0,0,.2);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-sizing:border-box;

  /* Desktop layout: Logo | Body | Actions  */
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"logo body actions";
  align-items:center;
}

.rank-badge{
  position:absolute; top:-10px; left:-10px;
  width:28px; height:28px; border-radius:50%;
  background:#e53935; color:#fff; font-weight:700;
  border:2px solid #ffd54f;
  display:flex; align-items:center; justify-content:center;
}

.logo-area{ grid-area:logo; }
.logo-area img{
  width:140px; height:140px; object-fit:contain;
  border-radius:8px; background:#fff; padding:8px;
}

.body-area{ grid-area:body; }
.casino-title{ color:var(--gold); font-size:22px; margin:6px 0; }
.casino-stars{ color:var(--accent); }
.casino-features{ list-style:none; margin:0; padding:0; }
.casino-features li{ margin:6px 0; line-height:1.5; }

.actions-area{
  grid-area:actions;
  display:flex; flex-direction:column; gap:15px;
}
.btn{
  display:inline-block; padding:8px; border-radius:8px;
  font-weight:500; text-decoration:none; color:#fff; text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.15); transition:transform .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn-register{ background:var(--red); }
.btn-review{ background:var(--indigo); }
.btn:hover{ opacity:.92; transform:translateY(-5px); }

.casino-card:hover {
    box-shadow: -1px -1px 26px -1px rgba(241, 113, 113, 0.31);
    transform:translateY(-5px);
    box-shadow: 0px 2px 39px -9px rgba(231,46,46,1);
    -webkit-box-shadow: 0px 2px 39px -9px rgba(231,46,46,1);
    -moz-box-shadow: 0px 2px 39px -9px rgba(231,46,46,1);
}

.footer-title {
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
}

.casino-card {
    margin-bottom: 2%;
}

.header-content {
    max-width: 1050px;
    margin: 0 auto !important;
    border-radius: 10px 10px 0 0;
    background-color: #000000;
    color: #fff;
    display: block;
    font-weight: 700;
    padding: 10px 0 0 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.div-content {
    max-height: 650px;
    border-radius: 0 0 10px 10px;
    border: solid 2px #FF8700;
    background-color: #fff;
    padding: 10px;
    max-width: 1050px;
    margin: 0 auto !important;
    transition: all .3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.fullwidth-wrapper {
    padding: 20px 30px !important;
}

.max-scroll {
        overflow-y: scroll;
    margin: 10px 2px 10px 10px;
}

.wpb_wrapper {
    margin-bottom: 1%;
}

.vc_custom_1760176466819 {
    margin-top: 0 !important;
}

.divider-area{ display:none; border:none; border-bottom:1px solid rgba(255,255,255,.35); }

.headline-top {
    text-transform: uppercase;
    margin-bottom: 1% !important;
}

.banner-top {
    border-radius: 0px !important;
    max-width: 80%;
    margin: auto;
}

.blog-post_media_part{display:block !important}
@media screen and (min-width: 600px) {
    .list-bookie {
        max-width: 1100px;
        margin: 0 auto !important;
    }
    
    .logo-footer {
    max-width: 20%;
    margin: 0 auto;
}
}

/* ====== Responsive (<= 600px) ====== */
@media screen and (max-width:600px){
  .casino-card{
    grid-template-columns:auto 1fr !important;
    grid-template-areas:
      "logo body"
      "logo actions" !important;       /* logo span 2 hàng bên trái */
    gap:12px 16px;
    align-items:start;
    text-align:left;
  }

  .logo-area{ grid-area:logo; align-self:center !important; }
  .logo-area img{ width:120px; height:120px; }

  .body-area{ grid-area:body; margin-top:0; }
  .actions-area{
    grid-area:actions;
    display:flex; flex-direction:row; gap:10px; align-self:start;
  }

  .divider-area{ display:none;}
  .casino-stars {margin: 0px}
  .casino-title {margin: 0px;}
  
  .banner-top {
      max-width: 100% !important;
  }
}