/* style.css - Durate AHU Landing Page (B2B Pro Max Edition) */

:root {
  /* Brand Colors (Strictly Maintained) */
  --durate-blue: #00AEEF;
  --durate-blue-darker: #0099D1; /* Hover state for blue */
  --durate-gray: #58595B;
  --durate-dark-blue: #0A3A4C;
  --durate-light-blue: #E8F4FB;
  --durate-white: #FFFFFF;
  --durate-bg-gray: #F8FAFC; /* Softer, cooler gray for modern B2B look */
  --durate-btn-text: #00344A;
  
  /* System Colors */
  --border-light: #E2E8F0;
  --text-muted: #64748B;
  --text-dark: #0F172A;
  --error: #EF4444;
  
  /* Elevation (Shadows) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-blue: 0 10px 25px -5px rgba(0, 174, 239, 0.3);
  
  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  color: var(--durate-gray);
  line-height: 1.6;
  background-color: var(--durate-bg-gray);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .stat-number, .step-number {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  line-height: 1.3;
  text-wrap: balance; /* Prevents typographic widows on headings */
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  transition: color var(--transition-fast);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px; /* Larger gutter for mobile safety */
}

/* Scroll Reveal Animations */
/* Dùng thuộc tính `translate` riêng thay vì `transform`: hai thứ này tổ hợp
   với nhau, nên hiệu ứng hiện dần không còn ghi đè transform của từng thành
   phần (nhấc thẻ khi hover, nghiêng 3D của thẻ sản phẩm). */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 30px;
  transition: opacity 0.8s ease-out, translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-reveal .reveal.active {
  opacity: 1;
  translate: 0 0;
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Utility Classes */
/* Chỉ trình đọc màn hình thấy, mắt thường không thấy. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-durate-blue { color: var(--durate-blue); }
.bg-durate-gray { background-color: var(--durate-bg-gray); }

/* Buttons - Pro Max B2B Styling */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--durate-blue);
  color: var(--durate-btn-text);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px; /* Touch target >= 44px */
  font-size: 1rem;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  background-color: var(--durate-blue-darker);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--durate-bg-gray), 0 0 0 6px var(--durate-blue);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--durate-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-secondary:hover {
  background-color: var(--durate-white);
  color: var(--durate-dark-blue);
  border-color: var(--durate-white);
  box-shadow: var(--shadow-md);
}

/* Base Section Spacing */
section {
  padding: 80px 0;
}
.section-title {
  text-align: center;
  font-size: 2.25rem;
  color: var(--durate-blue);
  margin-bottom: 56px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* KHỐI 1: Đầu trang (Hero) */
.hero-section {
  position: relative;
  background-color: var(--durate-dark-blue);
  color: var(--durate-white);
  padding: 120px 0 100px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center 60%;
  background-attachment: scroll;
}
/* Overlay bán trong suốt đều — sản phẩm thấp thoáng qua nền,
   text-shadow đảm bảo chữ vẫn đọc rõ. */
.hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 39, 54, 0.55);
}
/* Text căn giữa — sản phẩm hiện đều hai bên làm nền. */
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: var(--durate-white);
  letter-spacing: -1px;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 16px rgba(5, 39, 54, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Giữ cụm từ chính trên 1 dòng ở desktop, mobile tự xuống dòng. */
@media (min-width: 769px) {
  .hero-phrase { white-space: nowrap; }
}
.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 48px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 10px rgba(5, 39, 54, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Language Switcher */
.lang-switcher {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 100;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--durate-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  backdrop-filter: blur(4px);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.lang-btn:hover {
  background-color: var(--durate-white);
  color: var(--durate-dark-blue);
  border-color: var(--durate-white);
  box-shadow: var(--shadow-md);
}
.lang-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--durate-bg-gray), 0 0 0 4px var(--durate-white);
}

/* KHỐI 2: Thanh số liệu (Stats) */
.stats-section {
  background-color: var(--durate-white);
  padding: 48px 0;
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 10;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}
.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--durate-blue);
  margin-bottom: 8px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* KHỐI 3: Sản phẩm Durate */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.product-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--durate-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.product-card:hover {
  --lift: -8px;
  box-shadow: var(--shadow-lg);
}
/* Trong lúc rê chuột, bỏ transition để thẻ bám con trỏ tức thì;
   khi rời chuột class bị gỡ nên thẻ trượt mượt về vị trí phẳng. */
.product-card.is-tilting {
  transition: box-shadow var(--transition-normal);
}
/* Vệt sáng chạy theo con trỏ, tăng cảm giác khối 3D. */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%),
              rgba(255, 255, 255, 0.28), transparent 55%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 2;
}
.product-card.is-tilting::after { opacity: 1; }

/* Trượt ảnh sản phẩm: track cuộn được ngay cả khi tắt JS,
   nút điều hướng và chấm chỉ mục do main.js chèn thêm. */
.product-carousel {
  position: relative;
  background-color: var(--durate-light-blue);
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 3 / 2; /* khớp tỉ lệ ảnh gốc 600x400 nên không bị cắt */
  height: auto;
  object-fit: cover;
  scroll-snap-align: center;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--durate-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.carousel-btn:hover {
  background-color: var(--durate-blue);
  color: var(--durate-btn-text);
}
.carousel-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--durate-white), 0 0 0 6px var(--durate-blue);
}
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
/* Thanh dưới ảnh: số thứ tự + nút tạm dừng + tiến trình tự chạy.
   Dùng bộ đếm thay vì các chấm vì AHU có tới 14 ảnh. */
.carousel-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 10px 9px;
  background: linear-gradient(to top, rgba(10, 58, 76, 0.6), transparent);
  pointer-events: none;
}
.carousel-bar > * { pointer-events: auto; }
.carousel-counter {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--durate-white);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.carousel-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background-color: rgba(10, 58, 76, 0.45);
  color: var(--durate-white);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.carousel-toggle:hover {
  background-color: var(--durate-blue);
  color: var(--durate-btn-text);
}
.carousel-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--durate-white), 0 0 0 4px var(--durate-blue);
}
.carousel-toggle svg { width: 16px; height: 16px; }
.carousel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.carousel-progress-bar {
  height: 100%;
  background-color: var(--durate-blue);
  transform: scaleX(0);
  transform-origin: left center;
}
.carousel-progress-bar.is-running {
  animation: carousel-fill linear forwards;
}
@keyframes carousel-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  flex-grow: 1;
}
.product-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--durate-dark-blue);
  letter-spacing: 0.5px;
}
.product-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  flex-grow: 1;
}
.product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--durate-blue);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
.product-link:hover {
  color: var(--durate-blue-darker);
  gap: 12px;
}
.product-link:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--durate-white), 0 0 0 4px var(--durate-blue);
}

/* KHỐI 4: Vấn đề - giải pháp */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.compare-col {
  padding: 40px;
  border-radius: var(--radius-md);
  height: 100%;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}
.compare-col:hover {
  transform: translateY(-4px);
}
.compare-col ul {
  list-style: none;
}
.compare-col li {
  margin-bottom: 20px;
  font-size: 1.05rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.compare-col li svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px;
}
.col-imported {
  background-color: var(--durate-white);
  border: 1px solid var(--border-light);
}
.col-imported li svg { color: var(--text-muted); }
.col-durate {
  background-color: var(--durate-light-blue);
  border: 2px solid var(--durate-blue);
  color: var(--durate-dark-blue);
  position: relative;
  overflow: hidden;
}
.col-durate::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 4px;
  background-color: var(--durate-blue);
}
.col-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* KHỐI 5: Quy trình 4 bước */
.process-section {
  background-color: var(--durate-white);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--border-light);
  z-index: 1;
}
.process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 2;
}
.step-icon-wrapper {
  width: 96px;
  height: 96px;
  background-color: var(--durate-white);
  border: 2px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  position: relative;
  transition: border-color var(--transition-normal), background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
  color: var(--durate-blue);
}
.process-step:hover .step-icon-wrapper {
  border-color: var(--durate-blue);
  background-color: var(--durate-light-blue);
  transform: scale(1.05);
  box-shadow: var(--shadow-blue);
}
.step-number {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  background-color: var(--durate-blue);
  color: var(--durate-btn-text);
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 3px solid var(--durate-white);
}
.step-icon-wrapper svg {
  width: 40px;
  height: 40px;
}
.step-text {
  font-size: 1.05rem;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.4;
}
.step-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.step-desc {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
}

/* KHỐI 6: Dự án tiêu biểu */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.project-card {
  background: var(--durate-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid var(--border-light);
}
.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.project-img-wrapper {
  position: relative;
  overflow: hidden;
}
.project-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .project-img {
  transform: scale(1.05);
}
.project-info {
  padding: 24px;
}
.project-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--durate-dark-blue);
  margin-bottom: 8px;
}
.project-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
}
.view-all-projects {
  text-align: center;
}
.view-all-projects a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--durate-blue);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
.view-all-projects a:hover {
  color: var(--durate-blue-darker);
  gap: 12px;
}
.view-all-projects a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--durate-white), 0 0 0 4px var(--durate-blue);
}

/* KHỐI 7: Video */
.video-section {
  background-color: var(--durate-white);
}
.video-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: #000;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Ảnh đại diện thay cho iframe YouTube: chỉ tải player khi người dùng bấm phát. */
.video-facade {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background-color: var(--durate-dark-blue);
  cursor: pointer;
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.video-facade:hover img {
  opacity: 1;
  transform: scale(1.03);
}
.video-facade:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 4px var(--durate-blue);
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: rgba(0, 174, 239, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.video-facade:hover .video-play {
  background-color: var(--durate-blue);
  transform: translate(-50%, -50%) scale(1.08);
}
.video-play svg {
  width: 34px;
  height: 34px;
  fill: var(--durate-white);
  margin-left: 4px;
}

/* KHỐI 8: Ý kiến khách hàng */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.testimonial-card {
  background: var(--durate-white);
  padding: 40px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  position: relative;
}
.testimonial-card::after {
  content: '"';
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 100px;
  color: var(--durate-bg-gray);
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}
/* Logo khách hàng đã có sẵn nền trắng nên không bọc thêm khối màu,
   để logo hoà vào nền trắng của thẻ. */
.testimonial-logo {
  height: 48px;
  width: auto;
  max-width: 200px;
  margin-bottom: 24px;
  object-fit: contain;
  object-position: left center;
  position: relative;
  z-index: 1;
}
.testimonial-text {
  font-size: 1.1rem;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 32px;
  color: var(--text-dark);
  position: relative;
  z-index: 1;
}
.testimonial-author {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--durate-dark-blue);
  font-size: 1.1rem;
}
.testimonial-title {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* KHỐI 9: Form nhận báo giá */
.form-section {
  background-color: var(--durate-dark-blue);
  color: var(--durate-white);
  position: relative;
  padding: 100px 0;
}
.form-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.5;
}
.form-container {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  background: var(--durate-white);
  padding: 48px;
  border-radius: var(--radius-lg);
  color: var(--text-dark);
  box-shadow: var(--shadow-lg);
}
.form-title {
  color: var(--durate-blue);
  text-align: center;
  margin-bottom: 32px;
  font-size: 1.75rem;
}
.form-group {
  margin-bottom: 24px;
  position: relative;
}
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--durate-gray);
  font-size: 0.9rem;
  cursor: pointer;
}
.form-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
  background-color: var(--durate-bg-gray);
}
.form-control::placeholder {
  color: #94A3B8;
}
.form-control:focus {
  outline: none;
}
.form-control:focus-visible {
  outline: none;
  border-color: var(--durate-blue);
  background-color: var(--durate-white);
  box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15);
}
.form-control.error {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}
.form-submit-error {
  color: var(--error);
  font-size: 0.9rem;
  margin-top: -8px;
  margin-bottom: 16px;
  font-weight: 500;
  text-align: center;
}
.error-message {
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 6px;
  display: block;
}
.error-message:empty {
  display: none;
}
.btn-submit {
  width: 100%;
  font-size: 1.15rem;
  padding: 16px;
  margin-top: 8px;
}
.form-footer-text {
  text-align: center;
  margin-top: 24px;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.hidden-field { display: none !important; }

/* KHỐI 10: Chân trang */
.footer-section {
  background-color: #052331;
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  margin-bottom: 64px;
}
.footer-logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--durate-white);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.footer-tagline {
  line-height: 1.8;
  max-width: 400px;
}
.footer-heading {
  font-family: 'Poppins', sans-serif;
  color: var(--durate-white);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 1px;
}
.footer-contact-list {
  list-style: none;
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.footer-contact-list li svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--durate-blue);
  margin-top: 2px;
}
.footer-contact-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--durate-blue);
  margin-bottom: 2px;
}
.footer-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-link:hover {
  color: var(--durate-blue);
}
.footer-link:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--durate-blue);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 32px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* Floating Buttons */
.floating-buttons {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 999;
}
.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.float-btn:hover {
  transform: scale(1.1) translateY(-4px);
}
.float-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--durate-white), 0 0 0 8px var(--durate-blue);
}
.float-call { background-color: #10B981; } /* Emerald */
.float-msg { background-color: #0068FF; }
.float-btn svg { width: 28px; height: 28px; fill: white; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .hero-title { font-size: 2.75rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
  .process-grid::before { display: none; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  section { padding: 56px 0; }
  .section-title { font-size: 1.75rem; margin-bottom: 40px; }
  /* Mobile hero: text ở trên, sản phẩm lộ ra ở nửa dưới.
     Gradient tối trên → trong suốt dưới, ảnh neo vào vùng sản phẩm. */
  .hero-section {
    padding: 90px 0 40px;
    min-height: 85vh;
    align-items: flex-start;
    background-position: center bottom;
  }
  .hero-overlay {
    background: linear-gradient(180deg,
                rgba(5, 39, 54, 0.92) 0%,
                rgba(5, 39, 54, 0.88) 35%,
                rgba(5, 39, 54, 0.50) 60%,
                rgba(5, 39, 54, 0.15) 80%,
                rgba(5, 39, 54, 0.05) 100%);
  }
  .hero-content { text-align: center; padding-top: 16px; }
  .hero-title { font-size: 2.25rem; max-width: none; }
  .hero-subtitle {
    font-size: 1.05rem;
    margin-bottom: 28px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .comparison-grid { grid-template-columns: 1fr; gap: 24px; }
  .process-grid { grid-template-columns: 1fr; gap: 32px; }
  .projects-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 26px; height: 26px; }
  
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  
  .form-container { padding: 32px 24px; }
  .form-section { padding: 64px 0; }
  
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-section { padding: 64px 0 32px; }
}

/* Màn hình cảm ứng: bỏ nghiêng 3D và vệt sáng vì không có con trỏ để bám. */
@media (hover: none) {
  .product-card { transform: none; }
  .product-card::after { display: none; }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Tắt hẳn nghiêng 3D, vệt sáng và thanh tiến trình tự chạy. */
  .product-card { transform: none; }
  .product-card::after { display: none; }
  .carousel-progress { display: none; }
}