/* ============================================
   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(/assets/images/Piano-Wallpapers-Wallpaper-Cave.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_754405666 .section-bg,
#section_754405666 .section-bg.bg-loaded {
  background-image: url(/assets/images/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: linear-gradient(180deg, #ffffff 0%, #f7f3fb 100%) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_1710658327 .section-bg,
#section_1710658327 .section-bg.bg-loaded {
  background-image: url(/assets/images/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(/assets/images/background-mo-1-optimized.jpg) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section_894896730 .section-bg,
#section_894896730 .section-bg.bg-loaded {
  background-image: url(/assets/images/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(/assets/images/bg_sankhau-optimized.jpg) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Footer layout */
#footer #section_293998076 .section-content {
  padding: 0;
}

#footer #row-209973618 {
  width: calc(100% - 96px) !important;
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 300px minmax(170px, 220px) minmax(360px, 1fr);
  gap: 72px;
  align-items: start;
  padding: 0 0 12px;
}

#footer #row-209973618 > .col {
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

#footer #col-719460203 {
  grid-column: 1;
}

#footer #col-2017386372,
#footer #col-2017386372 > .col-inner,
#footer #row-576041523 {
  display: contents !important;
}

#footer #col-740616166 {
  grid-column: 2;
  padding-top: 40px !important;
}

#footer #col-615443259 {
  grid-column: 3;
  padding-top: 40px !important;
}

#footer #col-740616166,
#footer #col-615443259 {
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
}

#footer #image_185896244 {
  width: 100% !important;
  max-width: 300px;
}

#footer h4 {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
}

#footer .ux-menu.stack.stack-col {
  width: 100%;
}

#footer .ux-menu-link__link {
  min-height: 0;
  padding: 0 0 13px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.35;
}

#footer #col-615443259 ul,
#footer #col-615443259 p {
  margin-top: 0;
}

#footer #col-615443259 li,
#footer #col-615443259 p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.55;
}

#footer #col-615443259 a {
  color: rgba(255, 255, 255, 0.9);
}

#footer #row-678132108 {
  width: auto !important;
  max-width: none !important;
  margin: 10px 0 0 !important;
  display: flex !important;
  gap: 14px;
  align-items: center;
  justify-content: flex-start !important;
}

#footer #row-678132108 > .col {
  width: 40px !important;
  max-width: 40px !important;
  flex-basis: 40px !important;
  padding: 0 !important;
}

#footer #image_62269198,
#footer #image_665085404,
#footer #image_1524415190 {
  width: 40px !important;
}

#footer #col-1277661488 {
  grid-column: 1 / -1;
  display: none;
}

#footer .absolute-footer {
  display: none;
}

@media (max-width: 849px) {
  #footer #row-209973618 {
    width: calc(100% - 32px) !important;
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px 0 32px;
  }

  #footer #col-719460203,
  #footer #col-740616166,
  #footer #col-615443259 {
    grid-column: 1;
    padding-top: 0 !important;
  }

  #footer #image_185896244 {
    max-width: 240px;
    margin: 0 auto;
  }

  #footer #col-740616166,
  #footer #col-615443259 {
    text-align: left;
  }
}

/* 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: rgb(255 79 216);
}

/* 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: rgb(255 79 216);
}
/* 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: rgb(255 79 216);
}

/* 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;
	}
}