:root {
  --blue: #0870e3;
  --yellow: #C09520;
}

/* Force requested button palette across theme and Bootstrap buttons. */
.btn,
.blue_btn,
.fbtn,
.theme-btn,
.border_btn,
.owl-dots button,
input[type="button"],
input[type="submit"] {
  background-color: #C09520 !important;
  border-color: #C09520 !important;
  color: #fff !important;
}

.btn:hover,
.btn:focus,
.blue_btn:hover,
.blue_btn:focus,
.fbtn:hover,
.fbtn:focus,
.theme-btn:hover,
.theme-btn:focus,
.border_btn:hover,
.border_btn:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: #a87f1a !important;
  border-color: #a87f1a !important;
  color: #fff !important;
}

/* Keep bordered buttons visually consistent with the new button color. */
.border_btn {
  background-color: transparent !important;
  color: #C09520 !important;
}

.border_btn:hover,
.border_btn:focus {
  background-color: #C09520 !important;
  color: #fff !important;
}

/* Customer request: make header logo bigger and readable on web + mobile. */
.site-logo .logo-frame {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.site-logo .main-site-logo {
  width: 80px !important;
  max-width: none;
  height: auto;
}

.offcanvas-logo-img {
  width: 120px;
  max-width: 100%;
  height: auto;
}

/* Tablet */
@media (max-width: 1199px) {
  .site-logo .main-site-logo {
    width: 60px !important;
  }

  .site-logo .logo-frame {
    padding: 4px;
    border-radius: 10px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .site-logo .main-site-logo {
    width: 50px !important;
    max-height: 40px;
    object-fit: contain;
  }

  .site-logo .logo-frame {
    padding: 3px;
    border-radius: 8px;
  }

  /* Giới hạn chiều cao header tránh bị đẩy */
  .site-header .header-main,
  .header-two .header-main {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* FAQ section: match requested layout while keeping current page colors. */
.faq-section-custom .header-section .title-section {
  font-weight: 700;
  margin-bottom: 22px;
}

.faq-side-image {
  width: 100%;
  border-radius: 28px;
  object-fit: cover;
  min-height: 560px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.faq-section-custom #accordionFaq .card-faq-custom {
  border: 0;
  border-bottom: 1px solid rgba(32, 42, 68, 0.18);
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
}

.faq-section-custom .card-header-faq {
  background: transparent;
  border: 0;
  padding: 0;
}

.faq-section-custom .faq-trigger {
  cursor: pointer;
  padding: 13px 6px;
  color: #000;
  line-height: 1.35;
  font-weight: 600;
}

.faq-section-custom .faq-trigger span:first-child {
  font-size: 16px;
  line-height: 1.4;
}

.faq-section-custom .faq-trigger .icon-plus,
.faq-section-custom .faq-trigger .icon-minus {
  font-size: 16px;
  color: var(--blue);
  transition: transform 0.25s ease;
}

.faq-section-custom .faq-trigger .icon-minus {
  display: none;
}

.faq-section-custom .faq-trigger[aria-expanded="true"] .icon-plus {
  display: none;
}

.faq-section-custom .faq-trigger[aria-expanded="true"] .icon-minus {
  display: inline-block;
  transform: rotate(180deg);
}

.faq-section-custom #accordionFaq .card-body {
  padding: 6px 10px 20px 10px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

.faq-section-custom #accordionFaq .collapse .card-body {
  opacity: 0;
  transform: translateY(-10px);
}

.faq-section-custom #accordionFaq .collapse.show .card-body {
  animation: faqReveal 0.35s ease forwards;
}

@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .faq-side-image {
    min-height: 360px;
  }

  .faq-section-custom .faq-trigger {
    padding: 12px 4px;
  }

  .faq-section-custom .faq-trigger span:first-child {
    font-size: 16px;
    line-height: 1.4;
  }

  .faq-section-custom #accordionFaq .card-body {
    padding: 0 4px 18px 4px;
    font-size: 16px;
    line-height: 1.6;
  }
}

/* Keep client logos aligned even when source images have different dimensions. */
.client_slider2 .owl-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

.client_slider2 .owl-item img {
  max-height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ========== Mobile Layout Fixes ========== */

/* 1. Prevent horizontal overflow globally on mobile */
@media (max-width: 767px) {
  /* overflow-x: clip không phá sticky (khác với hidden) */
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  /* 3. Stats cards: chữ không bị cắt */
  .counter_wrap,
  .counter_item,
  .stat_item,
  .single_stat {
    overflow: visible !important;
    white-space: normal !important;
  }

  /* 4. Banner section: không tràn */
  .home-banner,
  section.home-banner {
    overflow-x: hidden;
  }

  /* 5. Stats section show đầy đủ */
  .banner_counter,
  .banner_counter .row,
  .counter_col {
    overflow: visible !important;
  }

  /* 6. Container không tràn */
  .container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
  }
}

/* ========== Stats Cards Mobile Fix ========== */
@media (max-width: 767px) {

  /* bbadge cards: ensure text visible, no clip */
  .bbadge,
  .bbadge.two {
    overflow: visible !important;
    padding: 12px 8px !important;
    min-height: unset !important;
  }

  .bbadge h3 {
    font-size: 20px !important;
    white-space: nowrap;
  }

  .bbadge p {
    font-size: 11px !important;
    white-space: normal;
    line-height: 1.3;
    margin-bottom: 0;
  }

  /* badge_wrap: full width, side-by-side */
  .badge_wrap .row {
    flex-direction: row !important;
  }

  /* banner right col: hide on very small screens if causing push */
  .banner_courses {
    display: none;
  }

  /* Heading cot trai: full width */
  .col-xl-6.col-lg-7.col-12.align-self-center {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Clip owl-carousel stage - JS sets transform translate that extends viewport */
.owl-carousel .owl-stage-outer {
  overflow: hidden;
}

/* Clip the entire page at html level - works even when body doesn't */
html {
  overflow-x: clip;
}

/* Clip any JS-positioned absolute decorative elements extending beyond right edge */
@media (max-width: 767px) {

  .bshape1, .bshape2, .bshape3, .bshape4,
  .blshape, .brshape {
    display: none !important;
  }

  /* WOW.js sometimes adds margin/translate that overflows */
  .wow {
    visibility: visible !important;
  }
}

/* ===== FIX: Horizontal scroll (JS/owl-carousel) WITHOUT breaking sticky ===== */

/* Step 1: Clip owl-carousel - JS translate causes overflow */
.owl-carousel .owl-stage-outer {
  overflow: hidden;
}

/* Step 2: Wrapper clip - KHÔNG dùng trên html/body (phá sticky) */
/* Dùng wrapper div nếu cần - hiện giải quyết qua owl fix trên */

/* Step 3: header-top clip email text on small screens */
@media (max-width: 575px) {
  .header-top .col-12>div:last-child a {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
}

/* Step 4: Ẩn decorative shapes trên mobile (dùng position absolute, sticking ra ngoài) */
@media (max-width: 767px) {

  .bshape1, .bshape2, .bshape3, .bshape4,
  .blshape, .brshape {
    display: none !important;
  }
}