/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
.page-title-inner{position:relative;min-height:0; padding:0;}
.menu-item.label-new>a::after{content:"Mới"}
.menu-item.label-hot>a::after{content:"Nổi bật"}
.menu-item.label-sale>a::after{content:"Giảm giá"}
.menu-item.label-popular>a::after{content:"Phổ biến"}


.list-game .col-inner{
  border-radius:9px;overflow:hidden;position:relative;
  background:url(/wp-content/uploads/2025/08/bg-1.webp) center center/cover no-repeat!important;
}

.ft-b .text p{margin:0 0 5px;}

.hnh-content .col-inner{
  padding:20px;border:2px solid rgb(248,182,56);
  background:#111;border-radius:10px;color:#fff;
  font-size:16px;line-height:1.6;max-height:600px;overflow-y:auto;
  box-shadow:0 0 12px rgba(248,182,56,.85),
             0 0 32px rgba(248,182,56,.95),
             0 0 60px rgba(248,182,56,1);
  transition:all .3s ease;
}

.hnh-content:hover .col-inner{
  box-shadow:0 0 25px rgba(248,182,56,1),
             0 0 65px rgba(248,182,56,.9),
             0 0 110px rgba(248,182,56,.85);
}

.hnh-content .col-inner::-webkit-scrollbar{width:8px}
.hnh-content .col-inner::-webkit-scrollbar-thumb{
  background:rgb(248,182,56);border-radius:4px;
}
.hnh-content .col-inner::-webkit-scrollbar-track{background:#222}

marquee{color:#fff}

img.wp-smiley,img.emoji{
  display:inline!important;width:1em!important;height:1em!important;
  background:none!important;border:0!important;margin:0 .07em!important;
  vertical-align:-.1em!important;box-shadow:none!important;padding:0!important;
}

.header-button>a{
  position:relative;
  margin:0;
  cursor:pointer;
  border-radius:10px;
  border:1px solid #0fcffe;
  color:#000;

  /* Gradient đổi sang tone #0fcffe */
  background-image:repeating-linear-gradient(to right,
    #0fcffe 0%, #fff 25%, #0fcffe 50%, #fff 75%, #0fcffe 100%);
  background-size:240% auto;
  animation:btnShift 1.45s linear infinite;
}

@keyframes btnShift{
  from{background-position:0 0}
  to{background-position:-240% 0}
}

.header-button::before,
.header-button::after{
  content:"";
  position:absolute;
  width:50%;
  height:50%;
  border-radius:10px;
  z-index:-1;
}

/* Glow màu trắng vẫn giữ vì là ánh sáng highlight */
.header-button::before{
  top:0;
  left:0;
  box-shadow:0 0 15px 4px #fff;
  animation:whitePulse 2s ease-in-out infinite;
}

@keyframes whitePulse{
  0%{top:0;left:0}
  30%{top:45%;left:0}
  60%{top:45%;left:45%}
  90%{top:0;left:45%}
  100%{top:0;left:0}
}

/* Glow chính đổi sang #0fcffe */
.header-button::after{
  bottom:0;
  right:0;
  box-shadow:0 0 15px 4px #0fcffe;
  animation:cyanMove 2s ease-in-out infinite;
}

@keyframes cyanMove{
  0%{bottom:0;right:0}
  25%{bottom:45%;right:0}
  50%{bottom:45%;right:45%}
  75%{bottom:0;right:45%}
  100%{bottom:0;right:0}
}


#footer .is-divider.divider.clearfix{margin-bottom:15px!important}
#top-link{background:var(--fs-color-primary);border-color:var(--fs-color-primary);color:#fff}

.obelix-blog-list--three .title-wrap .subtitle{
  margin-bottom:.3em;color:var(--fs-color-primary)
}

.obelix-blog-list--three .box-blog-post{
  border:1px solid #d8dade;border-radius:9px;transition:.4s;
}

.obelix-blog-list--three .box-blog-post:hover{
  background:#fff;border-color:#fff;
  transform:translateY(-12px);
  box-shadow:0 4px 48px rgba(0,0,0,.1);
}

.obelix-blog-list--three .box-blog-post .image-cover::after{
  content:"";position:absolute;left:50%;top:50%;
  width:210%;height:0%;transform:translate(-50%,-50%) rotate(-40deg);
  background:rgba(255,255,255,.35);transition:height .6s linear;z-index:1;
}
.obelix-blog-list--three .box-blog-post:hover .image-cover::after{height:260%;background:transparent}

.obelix-blog-list--three .post-meta.is-small.op-8{color:#eee}
body:not(.home) .obelix-blog-list--three .post-meta.is-small.op-8{color:#777;text-align:right}

.obelix-blog-list--three .box-blog-post:hover .post-meta.is-small.op-8,
.obelix-blog-list--three .box-blog-post:hover p.from_the_blog_excerpt{
  color:#777!important;
}

@media(max-width:549px){
  .obelix-blog-list--three .box-blog-post .image-cover{padding-top:52%!important}
  .obelix-blog-list--three .box-blog-post .post-title{font-size:1.6em}
  .obelix-blog-list--three.slider-nav-circle .flickity-prev-next-button{
    width:2.8rem!important;height:2.8rem!important;
    background:rgba(255,255,255,.32)!important;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    top:22%;margin:0;
  }
}