/* ==========================================================================
   Nam Phuong Viet (NPV) Site 2026 - Responsive Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop Small / Tablet Landscape (max-width: 1199.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .section-title {
    font-size: 36px;
  }



  /* Footer layout */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
@media (max-width:1024px) and (min-width: 992px){
  .header-search{
    max-width:250px;
  }
}
/* --------------------------------------------------------------------------
   Tablet Portrait (max-width: 991.98px)
   -------------------------------------------------------------------------- */
   @media (max-width: 991.98px) {
     /* ========================================================
        Mobile Header
        ======================================================== */

     .main-header {
       height: auto;
       min-height: 72px;
       align-items: stretch;
       overflow-anchor: none;
     }

     .main-header .site-container {
       height: auto;
     }

     .main-header .navbar {
       width: 100%;
       height: auto;
       min-height: 72px;

       flex-wrap: wrap;
       align-content: flex-start;
     }

     /* Logo */
     .navbar-brand {
       display: flex;
       align-items: center;

       height: 72px;
       margin: 0;
     }

     .navbar-brand img {
       width: auto;
       height: 42px;
     }

     /* ========================================================
        Hamburger → dấu X
        ======================================================== */

     .navbar-menu-mobile {
       display: flex;
       align-items: center;
       justify-content: center;

       width: 40px;
       height: 72px;
       padding: 0;

       border: none;
       background: transparent;
     }

     .navbar-menu-mobile:hover,
     .navbar-menu-mobile:focus,
     .navbar-menu-mobile:active {
       outline: none;
       border: none;
       box-shadow: none;
       background: transparent;
     }

     .navbar-menu-mobile.is-animating {
       pointer-events: none;
     }

     .navbar-menu-icon {
       position: relative;

       display: block;

       width: 22px;
       height: 18px;
     }

     .navbar-menu-icon span {
       position: absolute;
       left: 0;

       display: block;

       width: 22px;
       height: 2px;

       background-color: var(--second-color);
       border-radius: 10px;

       transform-origin: center;

       transition:
         top 280ms cubic-bezier(0.22, 1, 0.36, 1),
         transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
         opacity 160ms ease;
     }

     .navbar-menu-icon span:nth-child(1) {
       top: 1px;
     }

     .navbar-menu-icon span:nth-child(2) {
       top: 8px;
     }

     .navbar-menu-icon span:nth-child(3) {
       top: 15px;
     }

     /* Khi menu mở: ba gạch chuyển thành dấu X */
     .navbar-menu-mobile[aria-expanded="true"]
       .navbar-menu-icon span:nth-child(1) {
       top: 8px;
       transform: rotate(45deg);
     }

     .navbar-menu-mobile[aria-expanded="true"]
       .navbar-menu-icon span:nth-child(2) {
       opacity: 0;
       transform: scaleX(0);
     }

     .navbar-menu-mobile[aria-expanded="true"]
       .navbar-menu-icon span:nth-child(3) {
       top: 8px;
       transform: rotate(-45deg);
     }

     /* ========================================================
        Collapse animation
        ======================================================== */

     .navbar-collapse,
     .navbar-collapse.collapsing,
     .navbar-collapse.show {
       position: static !important;

       flex-basis: 100%;
       width: 100%;
       max-width: 100%;
     }

     /*
       Không đặt padding trực tiếp trên phần tử đang animate height.
       Việc này giúp hết giật ở đầu và cuối animation.
     */
     .navbar-collapse {
       padding: 0;

       background-color: var(--color-white);

       box-shadow:
         inset 0 1px 0 var(--color-border-light);
     }

     .navbar-collapse.collapsing {
       display: block;
       overflow: hidden;

       height: 0;

       will-change: height;

       transition:
         height 360ms cubic-bezier(0.22, 1, 0.36, 1) !important;
     }

     .navbar-collapse.collapse:not(.show) {
       display: none;
     }

     .navbar-collapse.show {
       overflow: visible;
     }

     /* Search */
     .header-search {
       width: 100%;
       max-width: none;

       margin: 12px 0 8px;
     }

     /* Menu links */
     .navbar-nav {
       width: 100%;
       align-items: stretch !important;
     }

     .navbar-nav .nav-item {
       width: 100%;
     }

     .navbar-nav .nav-link {
       display: block;

       width: 100%;
       padding: 10px 0 !important;

       border-bottom: 1px solid var(--color-border-light);
       border-radius: 0;
     }

     .navbar-nav .nav-link:hover,
     .navbar-nav .nav-item.active .nav-link {
       background-color: transparent;
     }

     /* Nút báo giá */
     .btn-quote {
       width: 100%;

       margin: 10px 0 16px;

       justify-content: center;
     }

     /* ========================================================
        Những responsive khác của bạn giữ nguyên bên dưới
        ======================================================== */

     .product-section,
     .solution-section,
     .showcase-section {
       padding: 20px 0;
     }

     .section-header-row {
       flex-direction: column;
       align-items: flex-start;
       gap: 12px;
       margin-bottom: 32px;
     }

     .topbar-wrapper {
       flex-direction: row;
       gap: 8px;
       text-align: center;
     }


   }

/* --------------------------------------------------------------------------
   Mobile Large (max-width: 767.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Section title adjustment */
  .section-title {
    font-size: 28px;
    line-height: 34px;
  }



  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

}

/* --------------------------------------------------------------------------
   Mobile Small (max-width: 575.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .topbar-link{
    font-size:11px;
  }
}

/* ==========================================================================
   MULTI-LEVEL PRODUCT MENU — MOBILE / TABLET
   ========================================================================== */

@media (max-width: 991.98px) {

  /*
    Cho menu chính cuộn được nếu nội dung dài.
    Không làm trang bị tràn ngang.
  */
  .main-header #navbarContent {
    max-height: calc(100vh - 72px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .main-header .navbar-nav {
    width: 100%;
    align-items: stretch !important;
  }

  .main-header .product-nav-item {
    width: 100%;
  }

  /* Nút Sản phẩm */
  .main-header .nav-menu-toggle {
    box-sizing: border-box;
    width: 100%;

    justify-content: space-between;

    text-align: left;
  }

  /* Menu cấp 2 và cấp 3 mặc định đóng */
  .main-header .product-dropdown,
  .main-header .submenu-level-3 {
    position: static;

    display: none;

    width: 100%;
    min-width: 0;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: none;

    box-shadow: none;
  }

  /* Menu cấp 2 */
  .main-header .product-dropdown {
    margin: 4px 0 8px;
    padding: 6px;

    border: 1px solid rgba(13, 34, 64, 0.1);
    border-left: 3px solid var(--main-color);

    background-color: #f4f6f9;
  }

  /* Menu cấp 3 */
  .main-header .submenu-level-3 {
    margin: 4px 0 6px 14px;
    width: calc(100% - 14px);

    padding: 5px;

    border: 0;
    border-left: 2px solid rgba(200, 16, 46, 0.55);

    background-color: #ffffff;
  }

  /* Link mobile */
  .main-header .submenu-list a,
  .main-header .submenu-link {
    min-height: 44px;
    padding: 10px 12px;

    font-size: 14px;
    white-space: normal;
  }

  /* Mũi tên cấp 2 và cấp 3 đều hướng xuống */
  .main-header .submenu-toggle > .menu-arrow,
  .main-header .nav-menu-toggle > .menu-arrow {
    transform: rotate(45deg);
  }

  /* Xoay mũi tên khi mở */
  .main-header .menu-item-has-children.is-open > .menu-toggle .menu-arrow {
    transform: rotate(225deg);
  }

  /* Trạng thái đang mở */
  .main-header .menu-item-has-children.is-open > .menu-toggle {
    color: var(--main-color) !important;
    background-color: rgba(200, 16, 46, 0.05);
  }
}
/* Đẩy mũi tên menu Sản phẩm sang cuối hàng trên mobile */
@media (max-width: 991.98px) {
  .main-header .product-nav-item {
    width: 100%;
  }

  .main-header .product-nav-item > .nav-menu-toggle {
    box-sizing: border-box;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    position:relative;
  }

  .main-header .product-nav-item > .nav-menu-toggle .menu-arrow {
    flex: 0 0 7px;
    margin-left: auto;
    position: absolute;
    top: 30%;
    right: 5%;
  }
  .main-header .product-nav-item > .nav-menu-toggle {
    padding: 0px 12px 0px 0px !important;
  }
  .main-header .product-nav-item > .nav-menu-toggle a.nav-link{
    border-bottom:none !important;
  }
  .site-footer{
    padding-top:20px;
  }

  .single_cms {
      margin: 15px 0px !important;
  }

  .page-project-category .showcase-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
  }
}