/*
Theme Name: Flatsome Child
Theme URI: http://flatsome.uxthemes.com/
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Author URI: http://www.uxthemes.com/
Template: flatsome
Version: 3.0
*/

html {
  scrollbar-width: smooth;
}

:root {
  --fs-font-family: 'Montserrat', sans-serif;
  --fs-heading-font-family: 'Montserrat', sans-serif;
}

.container-30 {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.max-width-100 {
  max-width: 100% !important;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
input,
textarea,
select,
button,
.nav,
.nav>li>a,
.button,
.heading-font {
  font-family: 'Montserrat', sans-serif !important;
}

.text-justify p {
  text-align: justify;
}

.text-upper h1,
h2,
h3,
h4,
h5,
h6,
a {
  text-transform: uppercase;
}

b,
strong {
  font-weight: 600 !important;
}

.ax-main-title h1 {
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  color: #1F201E !important;
  letter-spacing: 1px;
}

.ax-link {
  margin-top: auto !important;
  align-self: flex-start;
  /* margin-bottom: 10px; */
}

.ax-link p {
  margin-bottom: 0 !important;
}

a.ax-link,
.ax-link a {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid #ccc;
  padding-bottom: 2px;
}

a.ax-link::after,
.ax-link a::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 9px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.220226 7.69488C-0.0086232 7.84943 -0.0688625 8.16022 0.0856777 8.38907C0.240218 8.61792 0.551016 8.67816 0.779866 8.52362L0.500046 8.10925L0.220226 7.69488ZM10.9909 1.45146C11.0435 1.18037 10.8663 0.918002 10.5952 0.865458L6.1774 0.0091986C5.9063 -0.0433459 5.64394 0.133826 5.5914 0.404923C5.53885 0.676021 5.71602 0.938384 5.98712 0.990928L9.91404 1.75205L9.15292 5.67897C9.10038 5.95006 9.27755 6.21243 9.54865 6.26497C9.81974 6.31752 10.0821 6.14034 10.1347 5.86925L10.9909 1.45146ZM0.500046 8.10925L0.779866 8.52362L10.7799 1.77069L10.5 1.35632L10.2202 0.941955L0.220226 7.69488L0.500046 8.10925Z' fill='black'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

a.ax-link:hover,
.ax-link a:hover {
  border-bottom-color: #000000;
}

a.ax-link:hover::after,
.ax-link a:hover::after {
  transform: translate(4px, -4px);
}

.ax-link-light,
.ax-link-light a {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}

.ax-link-light::after,
.ax-link-light a::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.22018 7.69492C-0.00866897 7.84946 -0.0689083 8.16025 0.085632 8.3891C0.240172 8.61795 0.550971 8.67819 0.77982 8.52365L0.5 8.10928L0.22018 7.69492ZM10.9909 1.45149C11.0434 1.1804 10.8662 0.918033 10.5951 0.865488L6.17736 0.00922912C5.90626 -0.0433154 5.6439 0.133857 5.59135 0.404954C5.53881 0.676051 5.71598 0.938414 5.98708 0.990959L9.914 1.75208L9.15288 5.679C9.10033 5.9501 9.2775 6.21246 9.5486 6.265C9.8197 6.31755 10.0821 6.14038 10.1346 5.86928L10.9909 1.45149ZM0.5 8.10928L0.77982 8.52365L10.7798 1.77072L10.5 1.35635L10.2202 0.941986L0.22018 7.69492L0.5 8.10928Z' fill='white'/%3E%3C/svg%3E");
}

.ax-link-light:hover,
.ax-link-light a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

@media (max-width: 849px) {

  .ax-link,
  .ax-link-light {
    text-align: center;
  }
}

.ax-card-title h3,
.slider-title h3,
.project-title {
  padding-right: 45px !important;
  padding-left: 45px !important;
}

.box-text,
.ax-acc-info,
.grid-item-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}

.ax-marquee-section {
  overflow: hidden;
}

.auto-marquee-row,
.row.auto-marquee-row,
.row.align-middle.auto-marquee-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  background-color: rgb(217, 217, 217);
  min-height: 120px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.auto-marquee-row>.col,
.row.align-middle.auto-marquee-row>.col {
  flex: 0 0 250px !important;
  max-width: 250px !important;
  min-width: 250px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  /* Ghi đè Flatsome align-self: center !important */
  height: auto !important;
  min-height: 100% !important;
  background-color: inherit;
}

.auto-marquee-row.is-animated>.col {
  will-change: transform;
  animation: marquee-scroll var(--marquee-duration, 25s) linear infinite;
}

.auto-marquee-row:hover>.col {
  animation-play-state: paused;
}

.auto-marquee-row>.col>.col-inner {
  flex: 1 1 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-color: inherit;
  padding: 35px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 767px) {

  .auto-marquee-row>.col,
  .row.align-middle.auto-marquee-row>.col {
    flex: 0 0 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    padding: 0 !important;
  }

  .auto-marquee-row>.col>.col-inner {
    padding: 25px 10px !important;
  }
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(var(--marquee-scroll-distance, -100%));
  }
}

.auto-marquee-row .img,
.auto-marquee-row .img-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auto-marquee-row .img-inner img {
  object-fit: contain !important;
}

.ax-partner-brands-title h1 {
  font-weight: 500;
  font-size: 40px;
  line-height: 54px;
  color: #000000;
}

.ax-partner-brands-desc p {
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: #000000;
}

/* ==========================================================================
   Section: Thương hiệu độc quyền (Exclusive Brands) - .ax-exclusive-brands
   Scoped riêng cho trang Nội thất liền tường (không ảnh hưởng Về chúng tôi)
   ========================================================================== */

/* 1. Tiêu đề "THƯƠNG HIỆU ĐỘC QUYỀN": Thụt lề thẳng hàng với ax-nav-item và triệt tiêu margin thừa */
.ax-exclusive-brands .ax-partner-brands-title {
  padding-left: 20px !important;
}

.ax-exclusive-brands .ax-partner-brands-title h1 {
  margin-bottom: 0 !important;
}

.ax-exclusive-brands>.section-content>.row:first-child {
  margin-bottom: 25px !important;
}

.ax-exclusive-brands>.section-content>.row:first-child>.col>.col-inner {
  padding-bottom: 0 !important;
}

/* 2. Căn lề hàng nội dung bắt đầu từ phía trên (thay vì align-items: center đẩy xuống) */
.ax-exclusive-brands .ax-history-row {
  align-items: flex-start !important;
  margin-top: 0 !important;
}

/* 3. Căn danh sách thương hiệu bên trái gọn gàng từ trên xuống */
.ax-exclusive-brands .ax-history-nav .col-inner {
  justify-content: flex-start !important;
  padding-top: 10px !important;
  gap: 28px !important;
}

/* 4. Giảm padding-top thừa của slider và tinh chỉnh vị trí tên thương hiệu watermark */
.ax-exclusive-brands .ax-history-slider>.col-inner .col-inner {
  padding-top: 55px !important;
}

.ax-exclusive-brands .ax-history-yrs {
  top: 0 !important;
  left: 20px !important;
}

.ax-exclusive-brands .ax-history-yrs h1 {
  line-height: 1 !important;
}

/* 5. Tối ưu khoảng cách trên thiết bị di động */
@media (max-width: 849px) {
  .ax-exclusive-brands .ax-partner-brands-title {
    padding-left: 15px !important;
  }

  .ax-exclusive-brands>.section-content>.row:first-child {
    margin-bottom: 15px !important;
  }

  .ax-exclusive-brands .ax-history-slider>.col-inner .col-inner {
    padding-top: 70px !important;
  }

  .ax-exclusive-brands .ax-history-yrs {
    top: 20px !important;
    left: 20px !important;
  }



  .ax-exclusive-brands .ax-history-nav .col-inner {
    gap: 16px !important;
    padding-top: 0 !important;
    margin-bottom: 25px !important;
  }

  .ax-exclusive-brands .ax-nav-item.is-active {
    transform: translateX(6px) !important;
  }
}

/* 6. Animations & Micro-interactions cao cấp (Quiet Luxury) */

/* 6.1. Danh mục thương hiệu (Nav items) tương tác mượt mà */
.ax-exclusive-brands .ax-nav-item {
  opacity: 0.25;
  cursor: pointer;
  position: relative;
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.ax-exclusive-brands .ax-nav-item h2 {
  transition:
    color 0.35s ease,
    letter-spacing 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: Trượt nhẹ 6px sang phải, chỉ kích hoạt khi rê chuột thật (chống dính css khi kéo/chạm) */
@media (hover: hover) {
  .ax-exclusive-brands .ax-nav-item:not(.is-active):hover {
    opacity: 0.65;
    transform: translateX(6px);
  }
}

/* Active: Sáng rõ 100%, trượt 10px, kèm vạch chỉ báo tối giản phong cách Ý */
.ax-exclusive-brands .ax-nav-item.is-active {
  opacity: 1;
  transform: translateX(10px);
}

.ax-exclusive-brands .ax-nav-item.is-active h2 {
  letter-spacing: -0.3px;
}


/* 6.2. Watermark tên thương hiệu chuyển động êm khi đổi slide */
.ax-exclusive-brands .slider .row .ax-history-yrs h1 {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.ax-exclusive-brands .slider .row.is-selected .ax-history-yrs h1 {
  opacity: 1;
  transform: translateY(0);
}

/* 6.3. Ảnh nội thất bộc lộ tinh tế (Subtle scale settle) */
.ax-exclusive-brands .slider .row .ax-history-slider-image img {
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.ax-exclusive-brands .slider .row.is-selected .ax-history-slider-image img {
  transform: scale(1);
}

/* 6.4. Đoạn mô tả fade-in nhẹ có độ trễ */
.ax-exclusive-brands .slider .row .ax-history-slider-image .box-text-inner p {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease 0.12s,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
  will-change: opacity, transform;
}

.ax-exclusive-brands .slider .row.is-selected .ax-history-slider-image .box-text-inner p {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility: Hỗ trợ người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {

  .ax-exclusive-brands .ax-nav-item,
  .ax-exclusive-brands .slider .row .ax-history-yrs h1,
  .ax-exclusive-brands .slider .row .ax-history-slider-image img,
  .ax-exclusive-brands .slider .row .ax-history-slider-image .box-text-inner p {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ========================================================
   SOLUTIONS & SLIDER CARDS RESPONSIVE
   ======================================================== */

.slider .box.has-hover.box-text-bottom {
  display: block !important;
  height: auto !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.slider .box.has-hover.box-text-bottom .box-image {
  width: 100% !important;
  display: block !important;
  height: auto !important;
}

.slider .box.has-hover.box-text-bottom .box-image .image-cover {
  width: 100% !important;
  display: block !important;
  padding-top: 50% !important;
}

.slider .box.has-hover.box-text-bottom .box-text {
  display: block !important;
  padding: 24px 0;
}

.slider .box.has-hover.box-text-bottom .box-text h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f201e;
  margin-bottom: 10px;
  line-height: 1.3;
}

.slider .box.has-hover.box-text-bottom .box-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 0;
}

@media (max-width: 1059px) {}

/* --- Tablet Breakpoint (max-width: 849px) --- */
@media (max-width: 849px) {
  .section-content h1 {
    font-size: 2rem !important;
    line-height: 1.35 !important;
  }

  .slider .box.has-hover.box-text-bottom .box-text {
    padding: 16px 0;
  }

  .slider .box.has-hover.box-text-bottom .box-text h4 {
    font-size: 1.1rem !important;
    margin-bottom: 6px;
  }

  .slider .box.has-hover.box-text-bottom .box-text p {
    font-size: 14px !important;
    line-height: 1.5;
  }
}

/* --- Mobile / Smartphone Breakpoint (max-width: 549px) --- */
@media (max-width: 549px) {
  .section-content h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  .slider .row.row-collapse>.col:not(:last-child) {
    margin-bottom: 16px;
  }

  .slider .box.has-hover.box-text-bottom {
    border-radius: 4px;
    overflow: hidden;
  }

  .slider .box.has-hover.box-text-bottom .box-image .image-cover {
    padding-top: 52% !important;
  }

  .slider .box.has-hover.box-text-bottom .box-text {
    padding: 14px 0;
  }

  .slider .box.has-hover.box-text-bottom .box-text h4 {
    font-size: 1.05rem !important;
    margin-bottom: 6px;
  }

  .slider .flickity-prev-next-button {
    width: 36px !important;
    height: 36px !important;
  }

  .ax-glass-form {
    padding: 30px 16px !important;
  }

  .ax-glass-form__title {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  .ax-card-title h3,
  .slider-title h3,
  .project-title {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .sm-pb-0 {
    padding-bottom: 0 !important;
  }
}

/* ========================================================
   AX-HOME-SLIDER OVERLAY ANIMATION
   ======================================================== */
.ax-home-slider .banner-bg {
  z-index: 1 !important;
}

.ax-home-slider .banner-layers {
  z-index: 10 !important;
}

.ax-home-slider .banner-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 2;
  pointer-events: none;
}

.ax-home-slider .banner:hover .banner-bg::after,
.ax-home-slider:hover .banner.is-selected .banner-bg::after {
  opacity: 1;
}