:root {
          --blue-dark: #03254c;
          --blue-main: #1167b1;
          --blue-medium: #187bcd;
          --blue-accent: #2a9df4;
          --blue-light: #d0efff;
          --text-dark: #111111;
          --text-light: #ffffff;
          --glass-bg: rgba(255, 255, 255, 0.06);
          --glass-border: rgba(255, 255, 255, 0.15);
          --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
          --transition-slow: all 1s cubic-bezier(0.16, 1, 0.3, 1);
          --transition-fast: all 0.3s ease;
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html,
      body {
          font-family: 'Quicksand';
          scroll-behavior: smooth;
          overflow-x: hidden;
          background: #f8f9fa;
          color: var(--text-dark);
      }

      body {
          position: relative;
          min-height: 2000px;
          transition: var(--transition-slow);
      }

      /* ========== NAVBAR ========== */
      .glass-navbar {
          position: fixed;
          top: 0;
          width: 100%;
          height: 70px;
          z-index: 999;
          color: white;
          transition: var(--transition-smooth);
          background: linear-gradient(135deg, var(--blue-dark), var(--blue-main));
      }

      .navbar-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1400px;
          margin: auto;
          padding: 0 30px;
          height: 90%;
          position: relative;
      }

      .menu-btn {
          position: relative;
          width: 30px;
          height: 30px;
          background: none;
          border: none;
          cursor: pointer;
          z-index: 1001;
          transition: var(--transition-slow);
          padding: 20px;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .menu-btn .bar {
          position: absolute;
          width: 100%;
          height: 2px;
          background: white;
          transition: var(--transition-smooth);
          transform-origin: center;
      }

      .menu-btn.active .bar1 {
          transform: rotate(45deg) translate(5px, 5px);
      }

      .menu-btn.active .bar2 {
          transform: rotate(-45deg) translate(5px, -5px);
      }

      .menu-btn .bar1 {
          top: 8px;
      }

      .menu-btn .bar2 {
          bottom: 8px;
      }

      .logo-container {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          height: 100%;
          display: flex;
          align-items: center;
      }

      .logo {
          height: 50px;
          transition: var(--transition-fast);
      }

      /* ========== MENU OVERLAY ========== */
      .menu-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 35%;
          height: 100%;
          background: white;
          z-index: 999;
          display: flex;
          flex-direction: column;
          padding: 40px;
          box-shadow: 5px 0 30px rgba(0, 0, 0, 0.1);
          transform: translateX(-100%);
          transition: var(--transition-smooth);
          border-radius: 0 20px 20px 0;
      }

      .menu-overlay.active {
          transform: translateX(0);
      }

      .menu-overlay ul {
          list-style: none;
          margin-top: 60px;
      }

      .menu-overlay li {
          margin: 25px 0;
      }

      .menu-link {
          position: relative;
          color: var(--text-dark);
          font-size: 1.5rem;
          text-decoration: none;
          font-weight: 500;
          transition: var(--transition-fast);
          padding-bottom: 5px;
      }

      .menu-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--blue-dark);
          transition: var(--transition-smooth);
      }

      .menu-link:hover::after {
          width: 100%;
      }

      .close-btn {
          position: absolute;
          top: 30px;
          right: 30px;
          background: none;
          border: none;
          color: var(--text-dark);
          font-size: 1.5rem;
          cursor: pointer;
          transition: var(--transition-fast);
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
      }

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

      .suggestion-category {
          margin-bottom: 30px;
      }

      .suggestion-category h3 {
          font-size: 1.2rem;
          margin-bottom: 15px;
          color: var(--blue-dark);
          position: relative;
          padding-bottom: 10px;
      }

      .suggestion-category h3::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 2px;
          background: var(--blue-accent);
      }

      .suggestion-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
      }

      .suggestion-tag {
          padding: 8px 20px;
          background: rgba(3, 37, 76, 0.1);
          border-radius: 20px;
          color: var(--blue-dark);
          text-decoration: none;
          font-size: 0.9rem;
          transition: var(--transition-fast);
      }

      .suggestion-tag:hover {
          background: var(--blue-dark);
          color: white;
      }

      /* ========== BLUR EFFECT ========== */
      .blur-effect {
          filter: blur(5px);
          pointer-events: none;
          transition: var(--transition-slow);
      }

      /* ========== HERO ========== */
      .hero {
          position: relative;
          height: 100vh;
          overflow: hidden;
      }

      .hero video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 0;
      }

      .hero-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(3, 37, 76, 0.4);
          z-index: 1;
      }

      .brand-highlight {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
          text-align: center;
          z-index: 2;
          width: 100%;
          padding: 0 20px;
          font-family: 'Quicksand';
      }

      .brand-highlight img {
          width: 30%;
          padding: 40px;
      }

      .brand-highlight p {
          font-size: 1.5rem;
          margin-bottom: 30px;
          opacity: 0.9;
          letter-spacing: 1px;
          font-weight: 300;
      }

      .cta-button {
          padding: 16px 40px;
          font-size: 16px;
          font-weight: 600;
          color: white;
          background: linear-gradient(135deg, var(--blue-main), var(--blue-accent));
          border: none;
          border-radius: 30px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: var(--transition-smooth);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          z-index: 1;
      }

      .cta-button:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(42, 157, 244, 0.3);
      }

      .cta-button::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, var(--blue-accent), var(--blue-main));
          opacity: 0;
          z-index: -1;
          transition: opacity 0.5s ease;
      }

      .cta-button:hover::after {
          opacity: 1;
      }

      /* ========== SECTION TITLES ========== */
      .section-subtitle {
          display: block;
          text-align: center;
          font-size: 1.2rem;
          letter-spacing: 3px;
          margin-bottom: 1rem;
          text-transform: uppercase;
          font-weight: 500;
      }

      .section-title {
          font-size: 3.5rem;
          margin-bottom: 0.1rem;
          text-align: center;
          letter-spacing: 4px;
          font-weight: 400;
          margin-top: -20px;
      }

      .section-title-vn {
          margin-bottom: 2rem;
          font-size: 25px;
          font-weight: 150;
          padding-top: -40px;
          text-align: center;
      }

      .gradient-text {
          background: linear-gradient(90deg, var(--blue-dark), var(--blue-accent));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 200% auto;
          animation: gradientFlow 6s linear infinite;
      }

      @keyframes gradientFlow {
          0% {
              background-position: 0% center;
          }

          100% {
              background-position: 100% center;
          }
      }

      /* ========== FIELDS OF PRODUCTION ========== */
      .production-section {
          max-width: 1400px;
          margin: auto;
          padding: 30px 40px;
          position: relative;
      }

      .production-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          position: relative;
          z-index: 1;
      }

      .production-item {
          position: relative;
          overflow: hidden;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          transition: var(--transition-smooth);
          opacity: 0;
          transform: translateY(30px);
          height: 0;
          overflow: hidden;
      }

      .production-item.active {
          opacity: 1;
          transform: translateY(0);
          height: auto;
      }

      .production-image {
          position: relative;
          height: 350px;
          overflow: hidden;
      }

      .production-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: var(--transition-smooth);
      }

      .production-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to top, rgba(3, 37, 76, 0.8), transparent);
          opacity: 0.8;
          transition: var(--transition-smooth);
      }

      .production-content {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 30px;
          text-align: left;
          color: white;
          z-index: 2;
      }

      .production-content h3 {
          font-size: 1.8rem;
          margin-bottom: 15px;
          transition: var(--transition-fast);
      }

      .production-features {
          list-style: none;
          margin-top: 15px;
          max-height: 0;
          overflow: hidden;
          transition: var(--transition-slow);
      }

      .production-item:hover .production-features {
          max-height: 200px;
      }

      .production-features li {
          margin-bottom: 8px;
          position: relative;
          padding-left: 15px;
          font-size: 14px;
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.4s ease;
      }

      .production-item:hover .production-features li {
          opacity: 1;
          transform: translateY(0);
      }

      .production-item:hover .production-features li:nth-child(1) {
          transition-delay: 0.1s;
      }

      .production-item:hover .production-features li:nth-child(2) {
          transition-delay: 0.2s;
      }

      .production-item:hover .production-features li:nth-child(3) {
          transition-delay: 0.3s;
      }

      /* Large production item */
      .production-item-large {
          grid-column: span 3;
          background: linear-gradient(135deg, rgba(3, 37, 76, 0.9), rgba(17, 103, 177, 0.9));
          border-radius: 15px;
          padding: 40px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
          transition: var(--transition-smooth);
          opacity: 0;
          height: 0;
          overflow: hidden;
          position: relative;
          display: none;
          grid-template-columns: repeat(2, 2fr);
          gap: 30px;
      }

      .production-item-large.active {
          opacity: 1;
          height: auto;
          display: block;
      }

      .production-item-large::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('https://images.unsplash.com/photo-1518770660439-4636190af475') center/cover;
          opacity: 0.1;
          z-index: -1;
          border-radius: 15px;
      }

      .production-content-large {
          color: white;
          text-align: center;
      }

      .production-content-large h3 {
          font-size: 2rem;
          margin-bottom: 30px;
          position: relative;
          display: inline-block;
      }

      .production-content-large h3::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 50px;
          height: 3px;
          background: var(--blue-accent);
      }

      .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 30px;
          margin-top: 30px;
      }

      .feature-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          transition: var(--transition-fast);
      }

      .feature-icon {
          width: 60px;
          height: 60px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
          font-size: 1.5rem;
          transition: var(--transition-fast);
      }

      .feature-text {
          font-size: 1rem;
          font-weight: 500;
      }

      .feature-item:hover .feature-icon {
          background: var(--blue-accent);
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }

      .watch-more-btn {
          display: block;
          margin: 40px auto 0 auto;
          /* Căn giữa */
          padding: 12px 30px;
          font-size: 1rem;
          border: none;
          background: white;
          color: white;
          border-radius: 50px;
          cursor: pointer;
          transition: background 0.3s ease;
          text-align: center;
          transition: .5s;
      }

      .watch-more-btn:hover {
          background: var(--blue-main);
          color: white;
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(17, 103, 177, 0.3);
      }

      .watch-more-btn i {
          transition: var(--transition-fast);
      }

      .watch-more-btn.active i {
          transform: rotate(180deg);
      }

      /* ========== ABOUT SECTION ========== */
      .about-section {
          max-width: 1400px;
          margin: 5px auto;
          padding: 60px 40px;
          text-align: center;
      }

      .about-buttons {
          display: flex;
          justify-content: center;
          align-items: stretch;
          gap: 10px;
          flex-wrap: nowrap;
      }

      .liquid-button {
          flex: 1;
          padding: 30px 0;
          font-size: 0.7rem;
          font-weight: 600;
          text-align: center;
          color: var(--blue-dark);
          background: transparent;
          border: 2px solid var(--blue-accent);
          border-radius: 30px;
          cursor: pointer;
          transition: all 0.3s ease;
          z-index: 1;
          min-width: 0;
          max-width: 300px;
          position: relative;
          overflow: hidden;
      }

      .liquid-button::before {
          content: '';
          position: absolute;
          top: var(--y, 50%);
          left: var(--x, 50%);
          width: 0;
          height: 0;
          background: radial-gradient(circle closest-side, var(--blue-medium), transparent);
          transform: translate(-50%, -50%);
          transition: width 0.4s ease, height 0.4s ease;
          z-index: -1;
      }

      .liquid-button:hover::before {
          width: 200%;
          height: 200%;
      }

      .liquid-button:hover {
          color: white;
          border-color: var(--blue-accent);
      }


      /* ========== WORKING PROCESS ========== */
      .process-section {
          position: relative;
          max-width: 1400px;
          margin: 20px auto;
          padding: 20px 40px;
          text-align: center;
          overflow: hidden;
      }

      .process-container {
          position: relative;
          margin-top: 80px;
      }

      .process-line {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 4px;
          height: 100%;
          background: linear-gradient(to bottom, var(--blue-accent), var(--blue-dark));
          z-index: 1;
      }

      .process-steps {
          position: relative;
          z-index: 2;
      }

      .process-step {
          width: 45%;
          margin-bottom: 40px;
          position: relative;
          transition: var(--transition-smooth);
      }

      .process-step.left {
          left: 0;
          text-align: right;
      }

      .process-step.right {
          left: 55%;
          text-align: left;
      }

      .step-content {
          padding: 20px;
          background: white;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          position: relative;
          transition: var(--transition-smooth);
      }

      .process-step:hover .step-content {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      }

      .step-number {
          font-size: 1.5rem;
          color: var(--blue-medium);
          margin-bottom: 15px;
          font-weight: bold;
      }

      .step-content h3 {
          font-size: 1.5rem;
          margin-bottom: 15px;
          color: var(--blue-dark);
      }

      .step-content p {
          font-size: 1rem;
          color: #666;
          line-height: 1.6;
      }

      .process-step::before {
          content: '';
          position: absolute;
          width: 20px;
          height: 20px;
          background: white;
          border: 4px solid var(--blue-accent);
          border-radius: 50%;
          top: 40px;
          z-index: 3;
      }

      .process-step.left::before {
          right: -12px;
      }

      .process-step.right::before {
          left: -12px;
      }

      /* ========== PARTNERS SECTION ========== */
      .partners-section {
          max-width: 1400px;
          margin: -120px auto;
          padding: 20px 40px;
          text-align: center;
          overflow: hidden;
      }

      .partners-container {
          margin-top: 60px;
          position: relative;
          overflow: hidden;
      }

      .partners-track {
          display: flex;
          gap: 60px;
          animation: scroll 30s linear infinite;
          width: calc(250px * 12);
      }

      .partner-logo {
          width: 200px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: white;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          padding: 20px;
          flex-shrink: 0;
          transition: var(--transition-fast);
      }

      .partner-logo:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      }

      .partner-logo img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
      }

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

          100% {
              transform: translateX(calc(-250px * 6));
          }
      }

      /* ========== FOOTER ========== */
      footer {
          position: relative;
          background: linear-gradient(135deg, var(--blue-dark), var(--blue-main));
          background-size: 200% 200%;
          animation: gradientShift 10s ease infinite;
          padding: 80px 40px 40px;
          color: white;
          overflow: hidden;
          margin-top: 200px;
      }

      @keyframes gradientShift {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
          }
      }

      footer::before {
          content: "";
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
          animation: inkRotate 20s linear infinite;
          z-index: 0;
      }

      @keyframes inkRotate {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      .footer-content {
          position: relative;
          z-index: 1;
          max-width: 1400px;
          margin: auto;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 60px;
      }

      .footer-brand {
          display: flex;
          flex-direction: column;
          gap: 20px;
      }

      .footer-logo-container {
          margin-bottom: 20px;
      }

      .footer-logo-container img {
          width: 90px;
          height: auto;
      }

      .footer-logo {
          height: 60px;
      }

      .company-info {
          font-size: 14px;
          line-height: 1.6;
          opacity: 0.8;
      }

      .company-info p {
          margin-bottom: 10px;
      }

      .company-info strong {
          font-weight: 600;
      }

      .newsletter-form {
          display: flex;
          flex-direction: column;
          gap: 15px;
      }

      .newsletter-form input {
          padding: 15px 20px;
          border: none;
          border-radius: 30px;
          background: rgba(255, 255, 255, 0.1);
          color: white;
          font-size: 1rem;
          transition: var(--transition-fast);
      }

      .newsletter-form input:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.2);
      }

      .glass-button {
          padding: 15px 30px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 30px;
          color: white;
          font-size: 1rem;
          cursor: pointer;
          transition: var(--transition-smooth);
          backdrop-filter: blur(5px);
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      .glass-button:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: translateY(-3px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .footer-links {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 40px;
      }

      .links-column h3 {
          font-size: 1.2rem;
          margin-bottom: 20px;
          font-weight: 500;
      }

      .links-column ul {
          list-style: none;
      }

      .links-column li {
          margin-bottom: 15px;
      }

      .links-column a {
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none;
          font-size: 1rem;
          font-weight: 300;
          transition: var(--transition-fast);
      }

      .links-column a:hover {
          color: white;
      }

      .footer-bottom {
          position: relative;
          z-index: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 60px;
          padding-top: 30px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          font-size: 0.9rem;
          opacity: 0.7;
      }

      .social-sidebar {
          position: fixed;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          z-index: 1000;
          gap: 20px;
      }

      .social-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-size: 22px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          text-decoration: none;
          position: relative;
      }

      /* Hiệu ứng chữ khi hover */
      .social-icon .label {
          position: absolute;
          right: 60px;
          top: 50%;
          transform: translateY(-50%);
          background-color: #333;
          color: white;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 500;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s ease;
          white-space: nowrap;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }

      .social-icon:hover .label {
          opacity: 1;
          right: 70px;
      }

      .social-icon:hover {
          transform: scale(1.1);
      }

      .social-icon.zalo {
          background-color: #34e952;
      }

      .social-icon.facebook {
          background-color: #3b5998;
      }

      .social-icon.tiktok {
          background-color: #000000;
      }

      .social-icon.instagram {
          background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      }

      .social-icon.youtube {
          background-color: #ff0000;
      }

      /* Overlay làm mờ nền */
      .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
      }

      .modal-overlay.active {
          opacity: 1;
          visibility: visible;
      }

      /* Khung modal */
      .zalo-modal {
          background: linear-gradient(135deg, #03254c, #2a9df4);
          padding: 30px;
          border-radius: 20px;
          width: 400px;
          max-width: 90%;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
          text-align: center;
          color: white;
          position: relative;
          transform: translateY(20px) scale(0.95);
          transition: all 0.3s ease;
          margin-bottom: 40px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      .modal-overlay.active .zalo-modal {
          transform: translateY(0) scale(1);
      }

      /* Nội dung trong modal */
      .phone-container {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 50px 0;
          margin-left: 10px;
      }

      .phone-number {
          font-size: 24px;
          font-weight: bold;
          margin-right: 15px;
          background-color: rgba(255, 255, 255, 0.15);
          padding: 12px 24px;
          border-radius: 10px;
          backdrop-filter: blur(5px);
          border: 1px solid rgba(255, 255, 255, 0.1);
          letter-spacing: 1px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          text-align: center;
      }

      .main-text {
          font-size: 17px;
          margin-bottom: 15px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.3px;
      }

      .sub-text {
          font-size: 14px;
          opacity: 0.8;
          margin-top: 20px;
          font-style: italic;
          letter-spacing: 0.2px;
      }

      /* Nút đóng */
      .close-btn-zalo {
          position: absolute;
          top: 15px;
          right: 15px;
          background: none;
          border: none;
          color: white;
          font-size: 22px;
          cursor: pointer;
          opacity: 0.7;
          transition: all 0.2s;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
      }

      .close-btn:hover {
          opacity: 1;
          background-color: rgba(255, 255, 255, 0.1);
      }

      /* Thông báo */
      .notification {
          position: fixed;
          top: 20px;
          left: 50%;
          transform: translateX(-50%) translateY(-20px);
          background-color: #4CAF50;
          color: white;
          padding: 12px 24px;
          border-radius: 4px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          z-index: 1100;
          opacity: 0;
          transition: all 0.3s ease;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .notification.show {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }

      .notification.error {
          background-color: #f44336;
      }

      .notification-icon {
          font-size: 18px;
      }
.page-transition-overlay {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: white;
      z-index: 9999;
      transition: height 0.8s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .page-transition-overlay.active {
      height: 100%;
    }
    .page-transition-logo {
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .page-transition-logo.visible {
      opacity: 1;
      transform: scale(1);
    }

        /* === ANIMATIONS & RESPONSIVE === */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
     


      /* ========== RESPONSIVE ========== */
      @media (max-width: 1200px) {
          .production-features {
              max-height: none;
              overflow: visible;
              grid-template-columns: repeat(2, 1fr);
          }
      }

      .brand-highlight h1 {
          font-size: 4rem;
      }

      .brand-highlight img {
          width: 70%;
          padding: 40px;
      }

      .menu-overlay {
          width: 40%;
      }

      @media (max-width: 992px) {
          .production-features {
              max-height: none;
              overflow: visible;
              grid-template-columns: repeat(2, 1fr);
          }
      }



      @media (max-width: 768px) {
          .navbar-container {
              padding: 0 20px;
          }

          .brand-highlight h1 {
              font-size: 3rem;
              letter-spacing: 8px;
          }

          .brand-highlight p {
              font-size: 1.2rem;
          }

          .brand-highlight img {
              width: 65%;
              padding: 40px;
          }

          .section-title {
              font-size: 2.5rem;
          }

          .menu-overlay {
              width: 70%;
          }

          .about-buttons {
              flex-wrap: nowrap;
          }

          .liquid-button {
              font-size: 0.9rem;
              padding: 40px;
          }

          .production-content {
              text-align: center;
          }

          .production-content h3 {
              font-size: 60%;
              text-align: center;
          }

          .production-features li {
              text-align: center;
              margin-left: -10px;
              font-weight: 200;
          }

          .production-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
          }

          .production-item {
              height: auto !important;
              opacity: 1 !important;
          }

          .production-item-large {
              grid-column: span 2;
          }

          .production-overlay {
              opacity: 1 !important;
              pointer-events: none;
              /* Không chặn click bên dưới */
              display: flex !important;
          }

          .process-step {
              width: 90%;
              margin-left: 0;
              margin-right: 0;
              left: 0 !important;
              text-align: left !important;
          }

          .process-step::before {
              left: -12px !important;
              right: auto !important;
          }

          .process-line {
              left: 20px;
          }

          .process-step {
              width: 100%;
          }

          .process-step h3 {
              font-size: 50%;
          }

          .features-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
          }

          .feature-icon {
              width: 50px;
              height: 50px;
              font-size: 1.2rem;
          }

          .feature-text {
              font-size: 0.9rem;
              text-align: center;
          }

          .links-column {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              gap: 30px;
          }
      }

      .footer-content {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 30px;
      }

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

      .legal-links {
          flex-direction: column;
          gap: 10px;
      }

      @media (max-width: 480px) {
          .brand-highlight h1 {
              font-size: 2.5rem;
              letter-spacing: 4px;
          }

          .section-title {
              font-size: 2rem;
          }

          .brand-highlight img {
              width: 100%;
              padding: 40px;
          }

          .menu-link {
              font-size: 1.5rem;
          }

          .close-btn {
              top: 20px;
              right: 20px;
          }

          .suggestion-tag {
              padding: 6px 15px;
              font-size: 0.8rem;
          }

          .about-buttons {
              flex-wrap: nowrap;
          }

          .liquid-button {
              font-size: 0.65rem;
              padding: 12px 6px;
              border-radius: 24px;
          }

          .features-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
          }

          .feature-icon {
              width: 50px;
              height: 50px;
              font-size: 1.2rem;
          }

          .feature-text {
              font-size: 0.9rem;
              text-align: center;
          }

          .production-content {
              text-align: center;
          }

          .production-content h3 {
              font-size: 60%;
              text-align: center;
          }

          .production-features li {
              text-align: center;
              margin-left: -10px;
              font-weight: 200;
          }

          .production-grid .production-item-large {
              grid-template-columns: 1fr;
              max-width: 1000px;
          }

          .production-item-large {
              grid-column: span 2;
          }
      }

      @media (max-width: 768px) {
          :root {
              --icon-size: 45px;
              --icon-font-size: 20px;
              --label-font-size: 13px;
              --sidebar-gap: 15px;
              --sidebar-right: 20px;
          }

          .social-sidebar {
              flex-direction: row;
              bottom: 20px;
              top: auto;
              left: 50%;
              right: auto;
              transform: translateX(-50%);
              background: rgba(255, 255, 255, 0.9);
              padding: 10px 15px;
              border-radius: 50px;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
              backdrop-filter: blur(5px);
          }

          .social-icon .label {
              top: -40px;
              right: 50%;
              transform: translateX(50%);
              background-color: rgba(51, 51, 51, 0.95);
          }

          .social-icon:hover .label {
              top: -50px;
              right: 50%;
              transform: translateX(50%);
          }
      }

      @media (max-width: 480px) {
          :root {
              --icon-size: 40px;
              --icon-font-size: 18px;
              --sidebar-gap: 10px;
          }

          .social-sidebar {
              padding: 8px 12px;
              border-radius: 40px;
          }

          .social-icon .label {
              font-size: 12px;
              padding: 4px 8px;
              top: -35px;
          }

          .social-icon:hover .label {
              top: -40px;
          }
      }

      @media (max-width: 410px) {
          .liquid-button {
              font-size: 0.55rem;
              padding: 10px 6px;
          }

          .about-buttons {
              gap: 6px;
          }
      }

      @media (hover: none) {
          .production-features {
              max-height: none;
              overflow: visible;
          }

          .production-features li {
              opacity: 1;
              transform: translateY(0);
              transition-delay: 0s !important;
          }
      }