/* ============================================
   3. FIX SECTION BACKGROUNDS
   Flatsome dùng class .bg-loaded được thêm bởi JS.
   Khi JS không chạy, dùng .section-bg trực tiếp.
   ============================================ */

/* Áp dụng background cho cả .section-bg lẫn .section-bg.bg-loaded */
#section_1149846661 .section-bg,
#section_1149846661 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2025/07/Piano-Wallpapers-Wallpaper-Cave.jpg) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_754405666 .section-bg,
#section_754405666 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2025/07/background-mo-2.png) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_1569456024 .section-bg,
#section_1569456024 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2023/04/white-abstract-background_23-2148810113.jpg) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_1710658327 .section-bg,
#section_1710658327 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2025/07/background-mo-1.png) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_119318699 .section-bg,
#section_119318699 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2025/07/background-mo-1.png) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_894896730 .section-bg,
#section_894896730 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2025/07/background-mo-2.png) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_293998076 .section-bg,
#section_293998076 .section-bg.bg-loaded {
  background-image: url(https://festivalpianotalent.vn/wp-content/uploads/2025/07/background-footer.webp) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Section-bg fill cần position absolute để background hiển thị */
.bg.section-bg.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ============================================
   4. FIX PHONERING / ECHBAY WIDGET
   ============================================ */

/* Đảm bảo mỗi div button có kích thước cụ thể */
.echbay-sms-messenger div.phonering-alo-alo,
.echbay-sms-messenger div.phonering-alo-sms,
.echbay-sms-messenger div.phonering-alo-zalo,
.echbay-sms-messenger div.phonering-alo-messenger {
  width: 45px !important;
  height: 45px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-size: 65% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.echbay-sms-messenger div:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45);
}

/* Animation chuông điện thoại */
@keyframes phonering-ring {
  0% {
    transform: rotate(0deg) scale(1);
  }

  10% {
    transform: rotate(-15deg) scale(1.1);
  }

  20% {
    transform: rotate(15deg) scale(1.1);
  }

  30% {
    transform: rotate(-10deg) scale(1.05);
  }

  40% {
    transform: rotate(10deg) scale(1.05);
  }

  50% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

.echbay-sms-messenger div.phonering-alo-alo {
  animation: phonering-ring 2s ease infinite;
  background-color: #25D366 !important;
}

/* ============================================
   5. SLIDER / FLICKITY BUTTON STYLING
   ============================================ */

.flickity-prev-next-button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.85) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flickity-prev-next-button:hover {
  background: rgba(123, 31, 191, 0.85) !important;
  color: white !important;
}

.flickity-prev-next-button svg path {
  fill: #333;
}

.flickity-prev-next-button:hover svg path {
  fill: white;
}

/* Hiện nút trên mobile */
@media (max-width: 849px) {
  .slider-wrapper .flickity-prev-next-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Slider wrapper cần position relative */
.slider-wrapper {
  position: relative;
}

/* ============================================
   6. FIX BG-LOADED CLASS - Thêm class tự động bằng JS fallback
   ============================================ */

/* Khi JS chưa chạy, hiện background ngay */
.bg.section-bg.fill:not(.bg-loaded) {
  opacity: 1 !important;
}

/* ============================================
   7. MOBILE SIDEBAR MENU
   ============================================ */

/* Ẩn sidebar mặc định */
.mobile-sidebar.mfp-hide {
  display: none !important;
}

/* Sidebar panel */
#main-menu.mobile-sidebar {
  width: 280px;
  max-width: 85vw;
  background: #fff;
  box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sidebar inner */
#main-menu .sidebar-menu {
  padding: 16px 0 32px;
}

/* Nav list */
#main-menu .nav-sidebar {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Search box trong sidebar */
#main-menu .header-search-form-wrapper {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
#main-menu .search-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/* Menu items - dùng flex row: link chiếm hết chiều rộng, nút toggle cạnh phải */
#main-menu .mobile-menu-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
}
#main-menu .mobile-menu-row > a {
  flex: 1;
  padding: 11px 20px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
#main-menu .mobile-menu-row > a:hover {
  background: #f7f7f7;
  color: #7b1fbf;
}

/* Nút toggle mũi tên */
#main-menu .mobile-sub-toggle {
  flex-shrink: 0;
  width: 44px;
  background: none;
  border: none;
  border-left: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s, color 0.2s, transform 0.25s;
  padding: 0;
  margin: 0;
  border: none;
}
#main-menu .mobile-sub-toggle:hover {
  background: #f0f0f0;
  color: #7b1fbf;
}
/* Mũi tên xoay khi mở */
#main-menu .menu-item-has-children.active-mobile-menu > .mobile-menu-row > .mobile-sub-toggle {
  transform: rotate(180deg);
  color: #7b1fbf;
}

/* Sub-menu items cũng dùng flex row */
#main-menu .sub-menu .mobile-menu-row > a {
  padding-left: 36px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: #555;
}
#main-menu .sub-menu .sub-menu .mobile-menu-row > a {
  padding-left: 52px;
}

/* GTranslate item */
#main-menu .menu-item-gtranslate {
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

@media (max-width: 849px) {
	.nav-vertical li li.menu-item-has-children:not(:first-child) {
		margin-top: 0;
	}
	.nav-vertical li li.menu-item-has-children {
		margin: 0;
		padding-top: 0;
	}
}