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

.menu-mobile {
  margin-right: auto;
  font-size: 22px;
  display: none;
	color: inherit;
}

#with-bg-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-height: 100vh;
}
#with-bg-wrapper #wrapper {
  max-width: 1300px;
  width: 65vw;
}
#with-bg-wrapper .left-main {
  flex: 1;
  background: url(/wp-content/uploads/2025/04/left-main.png) no-repeat top right;
}
#with-bg-wrapper .right-main {
  flex: 1;
  background: url(/wp-content/uploads/2025/04/right-main.png) no-repeat top left;
}

#wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
#wrapper #header {
  width: 273px;
  border-right: 1px solid #d1d1d1;
}
#wrapper #main-wrapper {
  flex: 1;
}

#content {
  padding-top: 20px;
}

.main-header {
  padding: 50px 25px;
}
.main-header .logo {
  margin: 0 auto;
}
.main-header .logo img {
  border-radius: 100%;
}
.main-header .main-title {
  margin-top: 16px;
  margin-bottom: 70px;
}
.main-header .search-field {
  border-radius: 0 !important;
}
.main-header .sidebar-wrapper {
  margin-top: 30px;
}

#menu-main-menu > li + li {
  border-top: none;
}

.site-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #d1d1d1;
}
.site-header .user-icon {
  margin-right: 15px;
	color: inherit;
	margin-top: 5px;
}
.site-header .user-icon i {
  font-size: 20px;
}
.site-header .login-btn {
  padding: 5px 15px;
  border: 1px solid #000;
  border-radius: 100px;
  text-decoration: none;
  color: #000;
	margin-left: 15px;
}

.list-blog .box {
  border-bottom: 1px solid #f4f4f4;
}
.list-blog .box .box-text {
  padding: 10px 0;
}
.list-blog + .ux-relay__control {
  padding-top: 15px;
}
.list-blog .is-divider {
  display: none;
}
.wn-click-button img {
  animation: jump-shaking 0.83s infinite;
}
@keyframes jump-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateY(-9px);
  }
  35% {
    transform: translateY(-9px) rotate(17deg);
  }
  55% {
    transform: translateY(-9px) rotate(-17deg);
  }
  65% {
    transform: translateY(-9px) rotate(17deg);
  }
  75% {
    transform: translateY(-9px) rotate(-17deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@media only screen and (max-width: 850px) {
	#with-bg-wrapper #wrapper {
		width: 100%;
	}
	
  .menu-mobile {
    display: block;
  }

  #header {
    display: none;
  }
}

@media screen and (max-width: 549px) {
  .wn-latest-post .box-blog-post {
    display: flex;
    align-items: start;
    gap: 8px;
  }

  .wn-latest-post .box-blog-post .box-image {
    width: 80% !important;
  }

  .wn-latest-post .box-text {
    padding: 0;
  }

  .wn-latest-post .box-text .is-divider {
    display: none;
  }
}

.wn-highlight-post .slider-nav-light .flickity-page-dots {
  margin-bottom: 15px;
}

.slider-nav-light .flickity-page-dots {
  margin-bottom: -15px;
}

.slider-nav-light .flickity-page-dots .dot, .slider-nav-circle .flickity-page-dots .dot {
  border: 3px solid #4494b8;
  background-color: white;
}

footer .footer-payment {
  border: 2px solid rgb(136, 143, 181);
  padding: 15px;
  border-radius: 15px;
}

.blog-archive h1.page-title {
	font-size: 0;
}
.blog-archive h1.page-title span {
	font-size: 1.4rem;
}
.content-area.page-wrapper {
	padding: 20px;
}

.header-cart-custom {
    position: relative; /* Cần thiết để định vị số lượng sản phẩm */
    display: inline-flex; /* Giúp icon và số lượng căn chỉnh tốt hơn */
    align-items: center;
    color: inherit; /* Kế thừa màu từ .site-header hoặc đặt màu cụ thể */
	font-size: 1.2rem;
}

.header-cart-custom .cart-custom-count.notification-bubble {
    display: inline-flex; /* Để căn giữa số bên trong */
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;      /* Điều chỉnh vị trí theo chiều dọc */
    right: -10px;   /* Điều chỉnh vị trí theo chiều ngang */
    min-width: 18px; /* Chiều rộng tối thiểu */
    height: 18px;    /* Chiều cao */
    padding: 0 5px; /* Đệm bên trong */
    border-radius: 50%; /* Bo tròn */
    background-color: #D26E4B; /* Màu nền (màu đỏ mặc định của Flatsome cho notification) */
    color: white;    /* Màu chữ */
    font-size: 10px; /* Kích thước chữ */
    line-height: 1;  /* Chiều cao dòng */
    font-weight: bold;
    box-sizing: border-box;
}

@media screen and (min-width: 550px) {
  .wn-latest-post.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}