@media only screen and (min-width: 1500px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

@media (max-width: 991.98px) {
  section {
    overflow: hidden;
  }
  section .container,
  footer .container {
    padding-left: 0;
    padding-right: 0;
  }
  .lenis-scrollbar {
    display: none;
  }

  /* Mường Đình */

  .hero-subtitle {
    font-size: 20px;
  }

  .hero-buttons .btn {
    min-width: 160px;
    font-size: 15px;
    padding: 12px 24px !important;
  }
  /* brand story */
  .brand-story-section {
    padding: 60px 0;
  }

  .brand-story-section .section-title {
    font-size: 32px;
  }

  .brand-story-section .section-description {
    font-size: 16px;
  }

  .timeline-title {
    font-size: 22px;
  }

  /* featured products */
  .featured-products-section {
    padding: 60px 0;
  }

  .featured-products-section .section-title {
    font-size: 32px;
  }

  .featured-products-section .section-description {
    font-size: 16px;
  }

  /* production process */
  .production-process-section {
    min-height: 500px;
    padding: 60px 0;
  }

  .production-process-section .section-title {
    font-size: 32px;
  }

  .production-process-section .section-description {
    font-size: 16px;
  }

  .process-icon {
    width: 70px;
    height: 70px;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .step-title {
    font-size: 18px;
  }

  .step-description {
    font-size: 15px;
  }
  /* benefits values */
  .benefits-values-section {
    padding: 60px 0;
  }

  .benefits-values-section .section-title {
    font-size: 32px;
  }

  .benefits-values-section .section-description {
    font-size: 16px;
  }

  .benefit-icon .icon-circle-lg {
    width: 56px;
    height: 56px;
  }

  .benefit-title {
    font-size: 18px;
  }

  .benefit-description {
    font-size: 15px;
  }

  .quality-title {
    font-size: 22px;
  }

  .quality-description {
    font-size: 16px;
  }
  /* contact cta */
  .contact-cta-section {
    padding: 60px 0;
  }

  .contact-cta-section .section-title {
    font-size: 32px;
  }

  .contact-cta-section .section-description {
    font-size: 16px;
  }

  .contact-section-title {
    font-size: 22px;
  }

  .form-title {
    font-size: 22px;
  }
  /* footer */
  .footer {
    padding: 2.5rem 0;
  }

  .footer-title {
    font-size: 15px;
  }

  .footer-slogan {
    font-size: 15px;
  }
  .logo-brand-img {
    max-width: 72px;
  }
  /* slider start */
  .hero-section {
    max-height: 60svh;
  }
  /* slider end */

  /* brand story */
  .factory-image {
    max-width: 600px;
    margin: 0 auto;
  }
  /* brand story end */

  /* production process */
  .process-background {
    background-attachment: initial;
  }
 /* production process end */
}

@media (max-width: 768px) {
  .vh-btn-dang-hang-form .vh-btn-dat-hang {
    width: 100%;
  }

  .vh-quay-lai {
    width: 100%;
  }

  .vh-quay-lai a {
    width: 100%;
    justify-content: center;
  }
  .lenis-scrollbar {
    width: 3px;
  }
  .lenis-scrollbar.visible {
    width: 5px;
  }
  /*  */

  .hero-subtitle {
    font-size: 18px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 250px;
    min-width: auto;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 16px;
  }
  /* brand story */
  .brand-story-section {
    padding: 50px 0;
  }

  .brand-story-section .section-title {
    font-size: 28px;
  }

  .brand-story-section .section-description {
    font-size: 15px;
  }

  .timeline-title {
    font-size: 20px;
  }

  .timeline-item {
    padding-bottom: 1rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .feature-icon .icon-circle-lg {
    width: 56px;
    height: 56px;
  }

  .feature-description {
    font-size: 15px;
  }
  /* featured products */
  .featured-products-section {
    padding: 50px 0;
  }

  .featured-products-section .section-title {
    font-size: 28px;
  }

  .featured-products-section .section-description {
    font-size: 15px;
  }

  .product-card {
    max-width: 400px;
    margin: 0 auto;
  }

  /* production process */
  .production-process-section {
    min-height: 400px;
    padding: 50px 0;
  }

  .production-process-section .section-title {
    font-size: 28px;
  }

  .production-process-section .section-description {
    font-size: 15px;
  }

  .process-icon {
    width: 64px;
    height: 64px;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
    top: -8px;
    right: -8px;
  }

  .step-title {
    font-size: 17px;
  }

  .step-description {
    font-size: 14px;
  }
  /* benefits values */
  .benefits-values-section {
    padding: 50px 0;
  }

  .benefits-values-section .section-title {
    font-size: 28px;
  }

  .benefits-values-section .section-description {
    font-size: 15px;
  }

  .benefit-card {
    padding: 1.5rem;
  }

  .benefit-icon .icon-circle-lg {
    width: 52px;
    height: 52px;
  }

  .benefit-title {
    font-size: 17px;
  }

  .benefit-description {
    font-size: 14px;
  }

  .quality-banner {
    min-height: auto;
    padding: 2rem 1rem !important;
  }

  .quality-title {
    font-size: 20px;
  }

  .quality-description {
    font-size: 15px;
  }

  .quality-badge {
    font-size: 14px;
    padding: 8px 16px;
  }
  /* contact cta */
  .contact-cta-section {
    padding: 50px 0;
  }

  .contact-cta-section .section-title {
    font-size: 28px;
  }

  .contact-cta-section .section-description {
    font-size: 15px;
  }

  .contact-section-title {
    font-size: 20px;
  }

  .contact-form-wrapper {
    padding: 2rem 1.5rem !important;
    margin-top: 2rem;
  }

  .form-title {
    font-size: 20px;
  }

  .icon-circle-contact {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .contact-label {
    font-size: 15px;
  }

  .contact-text {
    font-size: 14px;
  }
  /* footer */
  .footer {
    padding: 2rem 0;
  }

  .footer-logo img {
    height: 40px;
  }

  .footer-title {
    font-size: 14px;
    margin-bottom: 1rem;
  }

  .footer-slogan {
    font-size: 14px;
  }

  .footer-copyright {
    font-size: 13px;
  }

  .footer-link {
    font-size: 14px;
  }

  .footer-contact-list p {
    font-size: 13px;
  }
  .swiper-button-luxury {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  /* slider start */
  .hero-section .swiper-button-luxury {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: none !important;
  }

  .hero-section {
    max-height: initial;
  }
  @keyframes zoomEffect {
    0% {
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
    }
    100% {
      transform: scale(1.3);
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      -ms-transform: scale(1.3);
      -o-transform: scale(1.3);
    }
  }
  /* slider end */
  .logo-brand-img {
    max-width: 60px;
  }
  .md-header-nav.scrolled .logo-brand-img {
    max-width: 45px;
  }
  /* header end */

  /* production process */
  .process-step {
    padding: 0;
  }
  /* production process end */

  /* footer start */
  .footer-logo img {
    height: 70px;
  }
  /* footer end */

  /* story modal */
  .modal-story .modal-header {
    padding: 20px 18px;
  }
  .modal-story .modal-title { 

  }
  .modal-story .modal-content::before {
    top: 5px;
  }
  .modal-story .modal-body {
    padding: 45px 20px;
    font-size: 1rem;
  }
  .modal-story .vintage-divider {
  margin: 15px 0;
  }
  /* story modal end */
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .mobile-nav-premium {
    max-height: 500px;
    overflow-y: auto;
  }
}
@media (max-width: 330px) {
  .mobile-nav-premium {
    max-height: 400px;
    overflow-y: auto;
  }
}