.header-container {
      /* background: linear-gradient(90deg, rgba(59, 62, 148, 1) 0%, rgba(22, 10, 102, 1) 50%, rgba(13, 2, 77, 1) 100%); */
      background: white;
  }

  .top-header {
      /* background: white; */
      padding: 10px 0 15px;
      border-bottom: 1px solid #D9D9D9;
  }

  .top-header-content {
      display: flex;
      align-items: center;
      gap: 50px;
      justify-content: space-around;
  }

  .logo-section a {
      display: flex;
      align-items: end;
      gap: 15px;
      min-width: 105px;
  }

  .logo {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
      font-size: 18px;
      width: 70px;
  }

  .logo-text {
      display: flex;
      flex-direction: column;
  }

  .logo-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--color-2);
      letter-spacing: 0.5px;
      display: none;
  }

  .logo-subtitle {
      font-size: 11px;
      color: #666;
      font-style: italic;
  }

  .search-section {
      flex: 1;
      max-width: 700px;
      position: relative;
  }

  .search-wrapper {
      position: relative;
  }

  .search-input {
      width: 100%;
      padding: 14px 60px 14px 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 15px;
      outline: none;
      transition: border-color 0.3s;
  }

  .search-input:focus {
      border-color: #0d065c;
  }

  .search-button {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 60px;
      background: #dadada;
      border: none;
      color: #000;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0 4px 4px 0;
  }

  .search-button:hover {
      background: #f4f4f8;
  }

  .search-suggestions {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 13px;
      color: #666;
      position: absolute;
      top: 100%;
  }

  .search-suggestions span:first-child {
      font-weight: 500;
      color: #000;
  }

  .search-suggestions a {
      color: #b6b6b6;
      text-decoration: none;
      transition: color 0.2s;
      font-style: italic;
      font-size: 13px;
  }

  .search-suggestions a:hover {
      color: #120b17;
  }

  .header-actions {
      display: flex;
      gap: 11px;
      align-items: center;
  }

  .action-icon {
      position: relative;
      width: 40px;
      height: 40px;
      background: #ddecff;
      border-radius: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
      padding: 10px;
  }

  .action-icon:hover {
      background: #e8f4fd;
  }

  .action-icon.primary {
      color: white;
  }

  .action-icon.primary:hover {
      background: #1976d2;
  }

  .badge {
      position: absolute;
      top: -2px;
      right: -2px;
      background: #ff932e;
      color: white;
      font-size: 10px;
      font-weight: bold;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
  }

  .nav-menu {
      position: relative;
  }

  .nav-content {
      display: flex;
      gap: 25px;
      justify-content: space-between;
  }

  .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 0;
      color: black;
      text-decoration: none;
      font-size: 13px;
      white-space: nowrap;
      transition: color 0.2s;
      position: relative;
      font-weight: bold;
      text-transform: uppercase;
  }

  .nav-item:hover {
      color: #2e3192;
  }

  .nav-item svg {
      width: 20px;
      height: 20px;
      stroke: #4b9fd6;
  }

  .nav-item.flash {
      color: #ff5722;
  }

  .mobile-menu-toggle {
      display: none;
      width: 45px;
      height: 45px;
      background: #f5f5f5;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      align-items: center;
      justify-content: center;
  }

  .action-icon svg path {
      stroke: #3590CE;
      fill: #3590CE;
  }

  .action-icon svg {
      fill: #3590CE;
      stroke: #3590CE;
  }

  .nav-item img {
      height: 25px;
  }

  .search-suggestions ul {
      display: flex;
      gap: 0px 10px;
  }

  .search-suggestions ul li {
      list-style: none;
  }

  .search-suggestions>p {
      color: #000;
      font-size: 14px;
      font-weight: 500;
  }

  .action-icon a {
      display: block;
      padding: 12px;
  }



  .box-banner-home-pages .container {
      display: flex;
      min-height: 100vh;
  }

  .box-banner-home-pages .sidebar {
      background: white;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      border-radius: 5px;
      /* overflow: hidden; */
  }

  .box-banner-home-pages .sidebar-header {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--color-2);
      font-weight: bold;
      font-size: 17px;
      text-transform: uppercase;
      /* background: #313087; */
      padding: 10px 0;
  }

  .box-banner-home-pages .sidebar-header svg {
      width: 24px;
      height: 24px;
  }

  .box-banner-home-pages .menu-item {
      padding: 7px 0 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      color: #666;
      font-size: 14px;
      transition: background 0.3s;
      border-bottom: 1px solid #cccccc2b;
  }

  .box-banner-home-pages .menu-item:hover {
      background: #f5f5f5;
  }

  .box-banner-home-pages .menu-item.active {
      color: #2196f3;
      background: #e3f2fd;
      border-radius: 5px;
  }

  .box-banner-home-pages .main-content {
      flex: 1;
  }

  .box-banner-home-pages .hero-slider img {
      height: 455px;
      object-fit: cover;
      border-radius: 7px;
  }



  .box-banner-home-pages .slider-content {
      position: relative;
      z-index: 1;
  }

  .box-banner-home-pages .logos {
      display: flex;
      gap: 20px;
      align-items: center;
      margin-bottom: 30px;
  }

  .box-banner-home-pages .logo-badge {
      background: white;
      padding: 10px 15px;
      border-radius: 50px;
      font-weight: bold;
      font-size: 12px;
  }

  .box-banner-home-pages .slider-title {
      color: white;
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 15px;
  }

  .box-banner-home-pages .slider-subtitle {
      color: white;
      font-size: 18px;
      line-height: 1.6;
  }

  .box-banner-home-pages .certificates {
      position: absolute;
      bottom: 60px;
      right: 60px;
      display: flex;
      gap: 20px;
  }

  .box-banner-home-pages .certificate {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      width: 150px;
      height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .box-banner-home-pages .certificate-logo {
      font-weight: bold;
      color: #d32f2f;
      margin-bottom: 10px;
  }

  .box-banner-home-pages .slider-dots {
      position: absolute;
      bottom: 30px;
      left: 60px;
      display: flex;
      gap: 8px;
  }

  .box-banner-home-pages .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
  }

  .box-banner-home-pages .dot.active {
      background: white;
      width: 24px;
      border-radius: 4px;
  }

  .box-banner-home-pages .slider-side {
      flex: 1;
      background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
      border-radius: 8px;
      padding: 60px 40px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
  }

  .box-banner-home-pages .anniversary {
      font-size: 120px;
      font-weight: bold;
      margin-bottom: 20px;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  .box-banner-home-pages .anniversary-text {
      font-size: 28px;
      font-weight: bold;
      line-height: 1.4;
  }

  .box-banner-home-pages .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 30px;
  }

  .box-banner-home-pages .product-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      position: relative;
  }

  .box-banner-home-pages .product-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #4caf50;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 10px;
  }

  .box-banner-home-pages .product-logo {
      width: 40px;
      height: 40px;
      margin-bottom: 15px;
  }

  .box-banner-home-pages .product-image {
      width: 100%;
      height: 150px;
      object-fit: contain;
      margin-bottom: 15px;
  }

  .box-banner-home-pages .banner-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
  }

  .box-banner-home-pages .banner {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      position: relative;
  }

  .box-banner-home-pages .banner img {
      width: 100%;
      height: 200px;
      object-fit: cover;
  }

  .item-member-menu-c1 a {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
  }

  .item-member-menu-c1 {
      width: 100%;
  }






  .menu-member-c2 {
      position: absolute;
      z-index: 9;
      /* width: calc(100% - 309px); */
      background: #fff;
      right: 0;
      bottom: 0;
      top: 0;
      display: none;
  }

  .box-category-header {
      position: relative;
  }

  .menu-member-c2 ul li {
      list-style: none;
      padding: 10px;
      border-bottom: 1px solid #cdcdcd70;
  }


  .box-banner-home-pages {
      display: none;
  }

  .box-banner-home-pages .menu-item:hover .menu-member-c2 {
      display: block;
      left: 100%;
      width: 200px;
      top: 0;
      border-radius: 5px;
  }


  .nav-content .sidebar-header {
      display: flex;
      align-items: center;
      gap: 0px 10px;
  }

  .nav-content .item-menu-pages {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 0;
      color: #333;
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      white-space: nowrap;
      transition: color 0.2s;
      position: relative;
  }



  .nav-content .item-menu-pages {
      display: block;
      padding: 10px 30px;
      background: #fff;
  }

  .menu-header-desktop ul li {
      list-style: none;
  }

  .menu-header-desktop {
      position: absolute;
      z-index: 9;
      background: #fff;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      top: 100%;
      border-radius: 5px;
      display: none;
  }

  .menu-c2-header-desktop-item {
      display: none;
  }

  .menu-header-desktop ul li {
      padding: 10px 20px;
      border-bottom: 1px solid #cdcdcd6e;
  }

  .menu-header-desktop ul li:hover .menu-c2-header-desktop-item {
      display: block;
  }

  .menu-c2-header-desktop-item {
      position: absolute;
      left: 100%;
      z-index: 9;
      background: #fff;
      top: 0;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .menu-c2-header-desktop-item ul li {
      padding: 10px 10px;
  }

  .menu-c2-header-desktop-item ul {
      /* padding: 10px; */
  }

  .item-menu-pages:hover .menu-header-desktop {
      display: block;
      width: 100%;
      left: 0;
  }

  .logo-title p {
      font-weight: 300;
      font-size: 13px;
      /* color: #fff; */
  }

  .nav-item a {
      /* color: var(--color-2); */
  }








  .hotline-cart {
      display: flex;
      justify-content: right;
      gap: 25px;
      padding-right: 20px;
  }

  .hotline-img img {
      width: 45px;
      /* margin-top: 7px; */
      /* filter: brightness(0) invert(1); */
  }

  .hotline-text {
      color: #333;
      padding-left: 8px;
      font-size: 20px;
      font-weight: 800;
  }

  .hotline-text span {
      /* font-size: 17px; */
      line-height: 17px;
      font-weight: 300;
      color: #fff;
  }








  .lengLife-us ul li {
      display: flex;
      align-items: center;
      gap: 0px 10px;
  }

  .lengLife-us ul li img {
      height: 25px;
      width: 40px;
      border-radius: 4px;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .lengLife-us ul li a img {
      position: relative;
      width: 38px;
      height: 27px;
      background: #fff;
      /* border-radius: 40px; */
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
      object-fit: cover;
      border: 1px solid #d0cece1c;
  }

  .lengLife-us ul li a img {
      padding: 0px;
  }

  .box-banner-home-pages .menu-item {
      position: relative;
  }

  .box-menu-c2-member {
      background: #fff;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }

  .menu-member-c2 ul li:hover {
      background: #f5f5f5;
      transition: 0.5s ease;
  }

  .nav-content .sidebar-header {
      color: #0d024e;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 16px;
  }


  .menu-header-desktop .nav-item a {
      color: #000 !important;
  }

  .item-member-menu-c1 span img {
      height: 20px;
      margin-right: 10px;
      margin-bottom: -1px;
  }

  .menu-header-desktop ul li:hover {
      background: #cdcdcd73;
  }

  .main-video {
      height: 100%;
  }

  .main-video #icon-video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;

  }

  .main-video img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 7px;
  }

  .header-marquee {
      padding: 7px 0;
      background-color: #f0f7ff;
      color: #333;
      font-weight: 600;
  }

  @media (max-width: 1200px) {
      .box-banner-home-pages .products-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 992px) {

      .hotline-cart {
          display: none;
      }

      button.mobile-menu-toggle {
          order: 1;
      }
        .mobile-menu-toggle {
          display: flex;
      }
      .action-icon.primary {
          display: none;
      }

      .search-input {
          padding: 9px 60px 9px 20px;
          font-size: 13px;
      }

      .nav-menu {
          display: none;
      }
      .logo-section a{
        justify-content: center;
      }

      .top-header-content {
          flex-wrap: wrap;
          gap: 5px 0px;
          justify-content: space-between;
      }

      .logo-section {
          width: 29%;
          order: 2;
      }
      .lengLife-us{
            position: absolute;
            top: -41px;
            background: #f0f7ff;
            z-index: 2;
            right: 0;
            padding: 0 5px;
      }
      .lengLife-us ul li a img{
        width: 30px;
        height: 20px;
      }
      .header-actions {
         
          justify-content: right;
          order: 3;
      }

      .search-suggestions>p {
          display: none;
      }

      .box-banner-home-pages .sidebar {
          width: 60px;
      }

      .box-banner-home-pages .sidebar-header span,
      .box-banner-home-pages .menu-item span {
          display: none;
      }

      .box-banner-home-pages .main-content {
          margin-left: 60px;
      }

      .box-banner-home-pages .hero-slider {
          flex-direction: column;
          height: auto;
      }

      .box-banner-home-pages .slider-main,
      .box-banner-home-pages .slider-side {
          height: 350px;
      }

      .box-banner-home-pages .products-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .box-banner-home-pages .banner-grid {
          grid-template-columns: 1fr;
      }

      .search-suggestions {
          flex-wrap: wrap;
          font-size: 12px;
          position: relative;
          margin-top: 5px;
      }
      .top-header{
        padding-top: 15px;
      }
  }

  @media (max-width: 768px) {
      .box-banner-home-pages .sidebar {
          transform: translateX(-100%);
          transition: transform 0.3s;
      }

      .box-banner-home-pages .sidebar.active {
          transform: translateX(0);
      }

      .box-banner-home-pages .main-content {
          margin-left: 0;
      }

      .box-banner-home-pages .slider-title {
          font-size: 32px;
      }

      .box-banner-home-pages .anniversary {
          font-size: 80px;
      }

      .box-banner-home-pages .certificates {
          display: none;
      }

      .box-banner-home-pages .products-grid {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 480px) {

      .box-banner-home-pages .slider-main,
      .box-banner-home-pages .slider-side {}

      .box-banner-home-pages .slider-title {
          font-size: 24px;
      }

      .box-banner-home-pages .anniversary {
          font-size: 60px;
      }

      .box-banner-home-pages .anniversary-text {
          font-size: 20px;
      }
  }


  .box-banner-home-pages .ctnr {}

  .box-category-header {
      background: #Fff;
      margin-top: 20px;
      border-radius: 7px;
      padding: 20px;
  }

  .box-category-header .sidebar {
      box-shadow: none;
  }

  @media (max-width: 1024px) {
      .top-header-content {
          flex-wrap: wrap;
      }

      .search-section {
          order: 4;
          width: 100%;
          max-width: 100%;
          margin-top: 15px;
          flex: auto;
      }

      .nav-content {
          gap: 25px;
      }
  }

  @media (max-width: 768px) {
      .logo-section {
          min-width: auto;
      }

      .logo {
          width: 45px;
          height: 45px;
          font-size: 16px;
      }

      .logo-title {
          font-size: 16px;
      }

      .logo-subtitle {
          font-size: 10px;
      }

      .header-actions {
          gap: 10px;
      }

      .action-icon {
          width: 40px;
          height: 40px;
      }

      .nav-content {
          gap: 20px;
          padding: 0 15px;
      }

      .nav-item {
          font-size: 14px;
          padding: 15px 0;
      }

      .nav-item svg {
          width: 20px;
          height: 20px;
      }

    

      .box-banner-home-pages .hero-slider img {
          height: auto;
          aspect-ratio: 3/2;
      }
  }

  @media (max-width: 480px) {
      .top-header-content {
          padding: 0 15px;
      }

      .logo-text {
          display: none;
      }



      .header-actions {
          gap: 8px;
      }

      .action-icon {
          width: 38px;
          height: 38px;
      }

      .nav-content {
          gap: 15px;
      }

      .nav-item span {
          display: none;
      }

      .nav-item {
          padding: 15px 5px;
      }
  }


  @media (max-width: 990px) {
      .mobile-menu.active {
          left: 0;
      }
  }

  @media (max-width: 990px) {
      .mobile-menu {
          position: fixed;
          top: 0;
          left: -300px;
          width: 280px;
          height: 100%;
          background: white;
          box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
          transition: left 0.3s ease;
          z-index: 1000;
          overflow-y: auto;
      }

      /* Menu Header */
      .menu-header {
          padding: 10px 10px;
          background: #120b17;
          color: white;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .menu-title {
          font-size: 20px;
          font-weight: bold;
      }

      .close-btn {
          background: rgba(255, 255, 255, 0.2);
          border: none;
          color: white;
          width: 35px;
          height: 35px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.3s;
          padding: unset;
      }

      .close-btn:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: rotate(90deg);
      }

      /* Menu Items */
      .menu-items {
          padding: 10px 0;
      }

      .menu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 20px;
          color: #333;
          text-decoration: none;
          transition: 0.3s;
          border-left: 3px solid transparent;
          cursor: pointer;
      }

      .menu-item:hover {
          background: #f5f5f5;
          border-left-color: #667eea;
      }

      .menu-item-content {
          display: flex;
          align-items: center;
          flex: 1;
      }

      .menu-item i {
          margin-right: 15px;
          font-size: 20px;
          color: #667eea;
      }

      .arrow {
          font-size: 12px;
          transition: transform 0.3s;
          color: #999;
      }

      .menu-item.active .arrow {
          transform: rotate(180deg);
      }

      /* Submenu Level 2 */
      .submenu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
          background: #f9f9f9;
      }

      .submenu.active {
          max-height: 500px;
      }

      .submenu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 20px 12px 28px;
          color: #555;
          text-decoration: none;
          transition: 0.3s;
          border-left: 3px solid transparent;
          cursor: pointer;
          font-size: 14px;
      }

      .submenu-item:hover {
          background: #efefef;
          border-left-color: #667eea;
          padding-left: 28px;
      }

      .submenu-item-content {
          display: flex;
          align-items: center;
          flex: 1;
      }

      .submenu-item::before {
          content: "\2022";
          margin-right: 10px;
          color: #999;
          font-size: 20px;
      }

      /* Submenu Level 3 */
      .sub-submenu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
          background: #f0f0f0;
      }

      .sub-submenu.active {
          max-height: 300px;
      }

      .sub-submenu-item {
          display: block;
          padding: 10px 20px 10px 42px;
          color: #666;
          text-decoration: none;
          transition: 0.3s;
          border-left: 3px solid transparent;
          font-size: 13px;
      }

      .sub-submenu-item:hover {
          background: #e5e5e5;
          border-left-color: #667eea;
          padding-left: 42px;
      }

      .sub-submenu-item::before {
          content: "\2022";
          margin-right: 10px;
          color: #999;
          font-size: 20px;
      }

      a.action-btn.tab-menu-mobile-chi-nhanh {
          display: none;
      }

      .action-btn.tab-menu-mobile svg path {
          stroke: #fff;
      }

      section.header-container .logo-img {
          width: 145px;
          height: 54px;
      }

      section.header-container .header-top {
          padding: 10px 0px;
      }

      .box-search-deskto-container {
          display: none;
      }

      section.header-container .features-bar {
          display: none;
      }

      section.header-container .hotline {
          display: none;
      }

      .li-item__toggle {
          position: absolute;
          right: 10px;
          top: 5px;
          height: 40px;
          width: 40px;
          background: none;
          border: none;
          font-size: 14px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      li.li-item.parent {
          position: relative;
      }
  }

  .li-item>a {
      display: block;
      padding: 12px 15px;
      /* border-bottom: 1px solid #eee; */
      color: #333;
      text-decoration: none;
      font-size: 15px;
  }

  @media (max-width: 992px) {
      .li-item.is-open {
          background: #f5f5f5;
      }
  }

  @media (max-width: 992px) {
      .li-item>ul {
          background: #f9f9f9;
      }
  }

  @media(min-width:990px) {
      .mobile-menu {
          display: none;
      }
  }

  @media (max-width: 992px) {
      .search-button {
          width: 45px;
      }

      .li-item>ul a:before {
          content: "\2022";
          margin-right: 5px;
          color: #999;
          font-size: 20px;
          transform: translateY(1px);
          display: inline-block;
      }
  }