/* 
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.   ***************/
/* System */
.header, #footer, .footer-1, .footer-2 {
    display: block;
}

.absolute-footer {
  display: none;

}


@media (min-width: 768px) {
    .header {
        display: block;

    }
}

@media (max-width: 1024px) {
    #footer {
        display: block;
    }
}

div.large-12.col {
    padding: 0 !important;
    width: 100% !important;

}
.row.row-main {
    width: 100vw; /* Full width of the viewport */
    margin-left: 0; /* Remove default margin */
    margin-right: 0; /* Remove default margin */
    max-width: 100%; /* Prevent overflow */
}
.section, .section-content {
    padding: 0 5px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.content-area.page-wrapper {
    padding: 0 !important;
    width: 100vw !important; /* 100% of the viewport width */
    max-width: 100%; /* Ensure it doesn't exceed 100% */
    overflow-x: hidden; /* Optional: Hide any overflow */
}


html {
    /* background-image: url('/wp-content/uploads/2025/01/bg_11zon.jpg') !important; */
    background-color: #000000 !important;
    background-size: cover !important;
    background-position: center !important;
}

main {
    background-color: transparent !important;
}

main, #wrapper {
    background-color: transparent !important;
}

.header .logo img {
    padding-top: 20px !important; 
}

body {
    font-family: 'Lato', sans-serif !important;
}

.header-top.hide-for-sticky.nav-dark {
    background: linear-gradient(to right, #DE133D, #FB9C1E) !important; /* Gradient background */
    height: 30px !important; /* Set the height */
    overflow: hidden; /* Handle any overflow if needed */
}

.col-inner ul li {
    margin-left: 0 !important;
}

/* System */


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

.page-title.is-large.uppercase {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
}

input[type=text] {
    background-color: #000 !important;
    border-radius: 10px !important;
    height: 50px !important;
}
  
.mfp-content {
    background-color: #000 !important;
    color: #ffff !important;
}


/* css dropdown trên thanh main menu */
/* Tổng thể của dropdown menu */
.menu-item.active a {
    color: #ffffff !important;
    border: 2px solid #fff; 
    border-radius: 20px;
    padding: 0px 5px !important;    
}   

ul.nav-dropdown {
    background-color: #000000 !important; 
    border-radius: 20px !important; 
    padding: 5px !important; 
    border: 2px solid #ffff !important; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Items trong dropdown */
ul.nav-dropdown li a {
    color: #7d7d7d; 
    padding: 10px 15px !important; 
    display: block; 
    border-radius: 8px; 
    border-width: 0px !important;
    font-size: 14px; 
    text-transform: uppercase;
    width: 250px !important;
}

/* Hiệu ứng hover cho items */
ul.nav-dropdown li a:hover {
    background-color: #3c5678; 
    color: #FFFFFF !important;
}

/* Màu nền chính của menu khi focus */
ul.nav-dropdown li a:focus {
    background-color: #3c5678; /* Màu xanh khi focus */
    color: #ffffff !important;
}

/* Menu cha (khi hover hiển thị dropdown) */
nav > ul > li.menu-item-has-children:hover > ul.nav-dropdown {
    display: block; /* Hiển thị dropdown khi hover */
    opacity: 1; /* Hiện dropdown */
    visibility: visible; /* Không ẩn dropdown */
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}


.nav-next a, .nav-previous a {
    color: #ffff; /* Màu đỏ */
    text-decoration: none; /* Bỏ gạch chân */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu mượt */
  }
  
  .nav-next a:hover, .nav-previous a:hover {
    color: #FFA500; /* Màu cam khi hover */
  }

  .hidden-button-3 {
    display: none !important;
  }
  
  @media (min-width: 768px) {
    .hidden-button-3 {
      display: flex !important;
    }
  }

  .btn-taigame {
    transition: transform 0.3s ease-in-out;
  }
  
  .btn-taigame:hover {
    transform: translateY(-10px);
  }

/* CSS cho scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* Độ rộng của scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1E0F09; /* Màu nền của track */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #FAFFD9, #FEC864); /* Hiệu ứng gradient */
  border-radius: 4px; /* Bo tròn góc */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #FAFFD9, #FEC864); /* Gradient sáng hơn khi hover */
}

.custom-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #FF8C00 #1E0F09; /* Định nghĩa màu cho các trình duyệt không hỗ trợ gradient */
}

.responsive-img {
  height: auto; /* Chiều cao tự động theo tỷ lệ */
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
}

/* Nếu muốn hiển thị tốt trên các màn hình nhỏ */
@media (max-width: 768px) {
  .responsive-img {
    width: calc(100% / 3); /* Mỗi ảnh chiếm 1/3 container trên màn hình nhỏ */
  }
}

.banner-sticky {
  position: fixed !important; 
  top: 200px; 
  left: 50px;
  width: 250px !important; 
  border-radius: 10px; 
  display: block; 
  z-index: 9999;
}

.banner-strick-item {
  overflow: hidden;
  border: 1px solid #ffffff; /* Viền màu trắng */
  border-radius: 10px; /* Bo góc 10px */

}

.slider-strick {
  position: fixed !important;
  top: 200px;
  right: 50px;
  z-index: 1000; 
  width: 300px !important;
  overflow: hidden; 
  display: block; 
  text-align: center; 
}
.slider-strick-mobile {
  position: fixed !important;
  top: 5%;
  right: 10%;
  z-index: 1000; 
  width: 400px !important;
  overflow: hidden; /* Đảm bảo nội dung không vượt ra ngoài container */
  display: block; /* Đảm bảo container là một block-level element */
  text-align: center; /* Căn giữa nội dung bên trong container */
}

.slider-strick-item {
  overflow: hidden;
}

.moblie-shape {
  background-image: url('/wp-content/uploads/2025/01/bg-content-games.webp') !important;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: 100% 100%;
  width: 100%; /* Chiều rộng đầy đủ */
  align-items: center;
}

.dangky-shape {
  background-image: url('/wp-content/uploads/2025/01/b52-lua-chon-tot-nhat-cho-nguoi-moi.webp') !important;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: 100% 100%;
  width: 100%; /* Chiều rộng đầy đủ */
  align-items: center;
}

.instyle {
  background: linear-gradient(to bottom,#DED9A6 0,#553418 30%,#fee9b9 50%,#553418 70%,#fffcc3 100%);
  border-radius: 15px;
  overflow: hidden;
  padding: 1.5px;
  width: 100%;
}

.custom-black-input {
  background-color: #000; /* Nền đen */
}

.custom-black-input::placeholder {
  color: #a3a3a3; /* Màu placeholder */
}

.btn-ban-web {
  display: inline-block;
  position: relative; /* Để hoạt hình chỉ áp dụng trong button */
  transition: transform 0.3s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
}

.btn-ban-web:hover, .support-button:hover {
  transform: translateY(-10px); /* Di chuyển lên 20px khi hover */
}

.footer-b52 {
  background-image: url('/wp-content/uploads/2025/01/bg-footer-b52.webp') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@keyframes zoomInOutSlogan {

  0%,
  100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }

  50% {
      transform: scale(1.1);
      filter: drop-shadow(0 0 15px rgba(255, 255, 0, 0.7));
  }
}

.img-animate-zoom-in-out {
  animation: zoomInOutSlogan 1s infinite ease-in-out;
}

.img-social {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.img-social:hover {
  filter: drop-shadow(0 0 15px rgba(255, 255, 0, 0.7));
}