:root {
  --sec-y: clamp(56px, 7vw, 96px);
  --sec-full: 90vh;
  --sec-full-d: 90svh;
  --grad-dark: linear-gradient(160deg, #0B3A66 0%, #072340 100%);
  --blue: #146EB4;
  --blue-deep: #0F5A94;
  --orange: #FF9900;
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --ink: #1A1A1A;
  --muted: #4A5560;
  --line: #D5DCE3;
  --heading: #146EB4;
  --on-blue: #FFFFFF;
  --on-orange: #1A1A1A;
  --pending: #8A4B00;
  --pending-bg: #FFF4E0;
  --ok: #1E6B3A;
  --error: #A4262C;
  --radius-m: 8px;
  --maxw: 1300px;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: only light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: inherit
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(96px + env(safe-area-inset-top, 0px))
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  display: block
}

a {
  color: var(--heading)
}

a:hover {
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin: 0 0 .5em;
  font-weight: 700
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.2;
  color: var(--heading);
  letter-spacing: -.01em
}

h3 {
  font-size: 1.15rem
}

p {
  margin: 0 0 1em;
  max-width: 68ch
}

.lead {
  font-size: 1.125rem;
  color: var(--muted)
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* Ảnh minh họa (Pexels). Khi chưa có src: hiện khung kẻ sọc kèm từ khóa ở chế độ duyệt */
.media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--bg) 0 10px, var(--surface) 10px 20px);
  border: 1px solid var(--line)
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.media img:not([src]) {
  display: none
}

.media .q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  color: var(--muted);
  font-size: .8125rem
}

.media img[src]~.q {
  display: none
}

/* Thanh duyệt nội bộ */

/* Header: mặc định nền transparent khi ở đầu trang, cuộn xuống nền trắng; phản hồi tức thì khi cuộn lên kịch trang */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(213, 220, 227, 0);
  box-shadow: 0 4px 20px rgba(7, 35, 64, 0);
  transition: background 1s linear, border-color 1s linear, box-shadow 1s linear, transform .3s linear
}

.site-header.is-scrolled {
  background: var(--surface);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(7, 35, 64, .08);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .3s ease
}

body::before {
  display: none
}

/* Cuộn xuống ẩn header, cuộn lên hiện header; tab vào header thì luôn hiện */
.site-header.is-hidden:not(:focus-within) {
  transform: translateY(-100%)
}

@media (prefers-reduced-motion:reduce) {

  .site-header,
  .site-header .brand,
  .site-header .brand img,
  .site-header .nav a {
    transition: none
  }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 96px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  transition: color 1s ease
}

.site-header.is-scrolled .brand {
  transition: color .25s ease
}

.brand img {
  min-height: 84px;
  width: auto;
  transition: filter 1s ease
}

.site-header.is-scrolled .brand img {
  transition: filter .25s ease
}

.site-header:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1)
}

.site-header:not(.is-scrolled) .brand {
  color: #fff
}

.brand .fallback {
  display: none
}

.nav {
  display: flex;
  gap: 4px;
  align-items: center
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-m);
  white-space: nowrap;
  transition: color 1s ease
}

.site-header.is-scrolled .nav a {
  transition: color .25s ease
}

.site-header:not(.is-scrolled) .nav a:not(.btn) {
  color: rgba(255, 255, 255, .9)
}

.site-header:not(.is-scrolled) .nav a:not(.btn):hover {
  color: var(--orange)
}

.nav a:hover {
  color: var(--heading)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-m);
  padding: 12px 20px;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.2
}

.btn-primary {
  background: var(--orange);
  color: var(--on-orange)
}

.btn-primary:hover {
  background: #FFAD33
}

.btn-ghost {
  border-color: currentColor;
  color: inherit;
  background: transparent
}

.nav .btn {
  padding: 10px 16px;
  margin-left: 8px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .03em
}

@media (max-width:1024px) {
  .nav a:not(.btn) {
    display: none
  }
}

/* 1. Hero */
/* Nền xanh đậm thay ảnh: chữ cam trên nền này đạt tương phản > 4.5:1 */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, #0B3A66 0%, #072340 100%);
  color: var(--on-blue);
  padding: 110px 0 32px;
  overflow: hidden
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none
}

/* lớp phủ tối nhẹ phía trái giữ chữ đọc được trên video */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 35, 64, .65) 0%, rgba(7, 35, 64, .25) 60%, rgba(7, 35, 64, 0) 100%);
  pointer-events: none
}

.hero>.wrap {
  width: 100%;
  position: relative;
  z-index: 1
}

.eyebrow {
  font-size: 1.125rem;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0 0 16px;
  opacity: .85
}

.hero h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  letter-spacing: -.02em;
  margin-bottom: 20px
}

.hero h1 .ln {
  display: block
}

.hero h1 .ln:first-child {
  font-size: 1.3em
}

.hero h1 .hl {
  color: var(--orange)
}

.hero p {
  opacity: .9;
  font-size: 1.125rem;
  max-width: 62ch
}

.form-status {
  margin: 12px 0 0;
  font-size: .9375rem;
  min-height: 1.2em
}

.form-status.fail {
  color: var(--error);
  font-weight: 600
}

.form-status.demo {
  background: var(--pending-bg);
  color: var(--pending);
  border-left: 3px solid var(--pending);
  padding: 10px 12px;
  border-radius: 0 var(--radius-m) var(--radius-m) 0
}

.btn:disabled {
  opacity: .6;
  cursor: wait
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
  margin: 28px 0 36px;
  padding: 0;
  list-style: none
}

.hero-meta li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 0 14px;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, .25)
}

.hero-meta li:first-child {
  padding-left: 0;
  border-left: 0
}

.hero-meta .icon {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  object-fit: contain
}

.hero-meta strong {
  font-size: .875rem;
  font-weight: 700
}

.hero-meta span {
  font-size: .75rem;
  opacity: .75
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 72px
}

.hero-actions .btn {
  border-radius: 999px;
  padding: 16px 28px
}

.hero-actions .btn-primary {
  box-shadow: 0 8px 24px rgba(255, 153, 0, .35)
}

.hero-actions .btn-ghost {
  border-width: 1.5px
}

.hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, .08)
}

.hero-actions .icon {
  transition: transform .2s
}

.hero-actions .btn:hover .icon {
  transform: translateX(3px)
}

@media (prefers-reduced-motion:reduce) {
  .hero-actions .icon {
    transition: none
  }
}

@media (max-width:640px) {
  .hero-meta {
    flex-direction: column
  }

  .hero-meta li {
    padding: 0;
    border-left: 0
  }

  .hero-actions {
    margin-bottom: 48px
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center
  }
}

section {
  padding: 88px 0
}

section.alt {
  background: var(--surface)
}

.section-head {
  margin-bottom: 40px
}

/* 2. Giới thiệu */







.fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none
}

.fields li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 12px;
  text-align: center;
  white-space: nowrap;
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: 0 6px 20px rgba(20, 110, 180, .08);
  color: var(--heading);
  font-size: .875rem;
  font-weight: 600
}

.fields li::after {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: var(--radius-m);
  background: var(--orange)
}

.fields .icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
  color: var(--blue)
}

@media (max-width:1280px) {
  .fields {
    grid-template-columns: repeat(2, 1fr)
  }
}



@media (max-width:600px) {
  .fields li {
    white-space: normal
  }
}

/* ===== #danh-muc: Grid Masonry thiết bị đo lường, định vị và liên lạc ===== */
#danh-muc.dm-sec {
  background: #fff;
  color: var(--ink);
  padding: var(--sec-y) 0;
  position: relative;
  overflow: hidden
}

.dm-head {
  margin-bottom: clamp(24px, 2.5vw, 36px);
  width: 100%;
  text-align: center
}

.dm-head h2 {
  color: var(--blue-deep, #072340);
}

.dm-head .lead {
  color: #4A5B6D;
}

.dm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(320px, 22vw, 390px);
  gap: 8px;
  width: 100%
}

.dm-card {
  position: relative;
  background: var(--surface, #FFFFFF);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11, 58, 102, .04);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s ease
}

.dm-card-2 {
  grid-row: span 2
}

.dm-card:hover {
  z-index: 5;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  border-color: rgba(71, 85, 105, .35)
}

.dm-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative
}

.dm-card-link:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
  border-radius: var(--radius-m)
}

.dm-card-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 65px;
  background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F8FAFC 70%, #EDF2F7 100%);
  position: relative;
  overflow: hidden
}

.dm-card-img-wrap img {
  max-width: 85%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(7, 35, 64, .1));
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.dm-card:hover .dm-card-img-wrap img {
  transform: scale(1.08)
}

/* Card mặc định hiển thị danh mục + tên sản phẩm; hover phủ nền xám mờ và đẩy thông tin mô tả + CTA từ dưới lên */
.dm-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transition: background .35s ease;
  pointer-events: none;
  z-index: 2
}

.dm-card:hover .dm-card-overlay,
.dm-card:focus-within .dm-card-overlay {
  background: rgba(30, 41, 59, .42);
  pointer-events: auto
}

.dm-card-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(18px);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1)
}

.dm-card:hover .dm-card-content,
.dm-card:focus-within .dm-card-content {
  transform: translateY(0)
}

.dm-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px
}

.dm-card-grp {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #D96500;
  transition: color .25s ease
}

.dm-card:hover .dm-card-grp,
.dm-card:focus-within .dm-card-grp {
  color: var(--orange, #FF9900)
}

.dm-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #0F5A94;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #E2E8F0;
  padding: 3px 8px;
  border-radius: var(--radius-m);
  box-shadow: 0 1px 3px rgba(11, 58, 102, .05);
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  z-index: 3
}

.dm-card:hover .dm-card-badge,
.dm-card:focus-within .dm-card-badge {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: none
}

.dm-card-title {
  color: #0B3A66;
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  transition: color .25s ease
}

.dm-card:hover .dm-card-title,
.dm-card:focus-within .dm-card-title {
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45)
}

.dm-card-desc {
  color: rgba(255, 255, 255, .95);
  font-size: .9375rem;
  line-height: 1.45;
  margin: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(14px);
  overflow: hidden;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1), max-height .35s cubic-bezier(0.16, 1, 0.3, 1), margin .35s ease
}

.dm-card:hover .dm-card-desc,
.dm-card:focus-within .dm-card-desc {
  opacity: 1;
  max-height: 200px;
  margin: 0 0 4px;
  transform: translateY(0);
  pointer-events: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
}

@media (max-width:992px) {
  .dm-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(290px, 32vw, 360px);
    gap: 8px
  }

  .dm-card-2 {
    grid-row: span 2
  }
}

@media (max-width:640px) {
  .dm-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 8px
  }

  .dm-card {
    min-height: 310px
  }

  .dm-card-2 {
    grid-row: auto
  }
}

@media (hover:none) {
  .dm-card-overlay {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0) 0%, rgba(30, 41, 59, .65) 30%, rgba(30, 41, 59, .9) 100%);
    pointer-events: auto
  }

  .dm-card-content {
    transform: none
  }

  .dm-card-grp {
    color: var(--orange, #FF9900)
  }

  .dm-card-badge {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .3)
  }

  .dm-card-title {
    color: #FFFFFF
  }

  .dm-card-desc {
    opacity: 1;
    max-height: none;
    transform: none;
    pointer-events: auto
  }

  .dm-card-desc {
    margin: 0 0 6px
  }
}

@media (prefers-reduced-motion:reduce) {

  .dm-card,
  .dm-card-img-wrap img,
  .dm-card-overlay {
    transition: none !important
  }
}

#nguy-trang .wrap,
#tong-quan .wrap,
#uav .wrap,
#danh-muc .wrap {
  max-width: none;
  padding: 0 clamp(24px, 4vw, 64px)
}

.qs {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 28px;
  align-items: start;
  max-width: 62%
}

/* Showcase grid: danh sách strip bên trái, thông tin bên phải; ảnh minh họa là nền section bên phải */
.qs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0
}

.qs-grid button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s
}

.qs-grid button:hover {
  background: #E3EEF8;
  border-color: var(--blue)
}

.qs-prev {
  margin: 4px 0 0;
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 12px
}

.qs-prev:not([hidden]) {
  animation: qs-prev-in .45s cubic-bezier(.16, 1, .3, 1)
}

@keyframes qs-prev-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  .qs-prev:not([hidden]) {
    animation: none
  }
}

.qs-prev img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply
}

.qs-grid button[aria-pressed="true"] {
  border-color: var(--blue);
  background: rgba(14, 76, 140, .06)
}

.qs-grid button img {
  width: 54px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: multiply
}

.qs-grid button .qs-name {
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase
}

/* Nút trước/sau: đã bỏ (thay bằng danh sách strip) */
@media (prefers-reduced-motion:reduce) {
  .qs-grid button {
    transition: none
  }
}

.qs-info .brand {
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px
}

.qs-info h3 {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  color: var(--heading);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--orange);
  margin: 0 0 6px
}

.qs-info {
  max-width: 72ch;
  font-size: 15px
}

.qs-info p {
  margin: 0 0 6px;
  line-height: 1.45
}

/* Thông số: list gạch đầu dòng, nhãn đậm + giá trị cùng dòng (theo trang Safran) */
.qs-info dl,
.ng-pane dl,
.dm-pane dl {
  margin: 10px 0
}

.qs-info dl div,
.ng-pane dl div,
.dm-pane dl div {
  position: relative;
  padding: 3px 0 3px 26px
}

.qs-info dl div::before,
.ng-pane dl div::before,
.dm-pane dl div::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(3px + .8em);
  width: 12px;
  height: 2px;
  background: var(--blue)
}

.qs-info dt,
.qs-info dd,
.ng-pane dt,
.ng-pane dd,
.dm-pane dt,
.dm-pane dd {
  display: inline;
  margin: 0
}

.qs-info dt,
.ng-pane dt,
.dm-pane dt {
  font-weight: 700
}

.qs-info dt::after,
.ng-pane dt::after,
.dm-pane dt::after {
  content: ": "
}

.qs-info .teaser {
  font-weight: 600;
  margin-top: 8px
}

/* Section quan sát khóa cứng trong 95vh, không tràn */
.qs-sec {
  position: relative;
  overflow: hidden;
  height: 95vh;
  height: 95dvh;
  max-height: 95vh;
  max-height: 95dvh;
  box-sizing: border-box;
  padding: clamp(24px, 4vh, 48px) 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start
}

.qs-sec[hidden] {
  display: none
}

/* Đổi sản phẩm: ảnh giữa vòng + ảnh nền mờ chéo (ảnh mới tải xong mới hiện), nội dung mô tả hiện dần */
.qs-info {
  display: grid
}

.qs-pane {
  grid-area: 1/1;
  visibility: hidden
}

.qs-pane.on {
  visibility: visible
}

.qs-pane.on>* {
  animation: qs-in .4s ease-out both
}

@keyframes qs-in {
  from {
    opacity: 0;
    transform: translateY(6px)
  }
}

@media (prefers-reduced-motion:reduce) {
  .qs-pane.on>* {
    animation: none
  }
}

.qs-sec .wrap {
  position: relative;
  z-index: 1;
  width: 100%
}

.dm-tab .ph {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--bg) 0 8px, var(--surface) 8px 16px)
}

/* Ngụy trang: dùng trực tiếp ảnh 1920x1080 làm toàn bộ nền, không dùng nền màu CSS hay lớp phủ gradient */
#nguy-trang {
  background: none
}

#nguy-trang .ng-bg figure,
#nguy-trang .ng-bg figure:nth-child(even) {
  background: none
}

#nguy-trang .ng-bg img {
  width: 100%;
  -webkit-mask-image: none;
  mask-image: none
}

#nguy-trang .ng-bg::after {
  display: none
}

.ng-sec {
  position: relative;
  overflow: hidden;
  background: #072340;
  color: rgba(255, 255, 255, .85);
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.ng-sec .wrap {
  position: relative;
  z-index: 1;
  width: 100%
}

.ng-sec h2,
.ng-pane h3 {
  color: #FFFFFF
}

.ng-sec .lead {
  color: rgba(255, 255, 255, .75)
}

.ng-bg {
  position: absolute;
  inset: 0
}

.ng-bg figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s;
  background: linear-gradient(135deg, #22384D, #072340 70%)
}

.ng-bg figure:nth-child(even) {
  background: linear-gradient(225deg, #2E3A2A, #072340 70%)
}

.ng-bg figure.on {
  opacity: 1
}

/* ponytail: ảnh hãng chỉ rộng 670-960px, phủ toàn section sẽ vỡ; đặt ở 60% bên phải, mép trái mờ dần. Có ảnh ≥1920px thì cho width:100% */
.ng-bg img {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
  mask-image: linear-gradient(to right, transparent, #000 35%)
}

@media (max-width:900px) {
  .ng-bg img {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none
  }
}

.ng-bg figcaption {
  position: absolute;
  right: 24px;
  bottom: 16px;
  color: rgba(255, 255, 255, .6);
  font-size: .8125rem
}

.ng-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(7, 35, 64, .92) 0, rgba(7, 35, 64, .7) 35%, transparent 70%)
}

.ng {
  max-width: 560px
}

/* Tab chỉ có tên sản phẩm, gạch chân cam ở tab đang chọn */
/* Full-width 3 cột, ảnh sản phẩm làm nền cột. Hover (hoặc focus link trong cột) phủ nền tối, ảnh lùi ra sau, thông số trượt lên.
   Thiết bị không hover (cảm ứng): thông số luôn hiện, không phủ tối */
#thoi-gian {
  padding: 0 0 calc(var(--sec-y) * 1.4);
  background: #fff
}

#thoi-gian .section-head {
  margin: 0;
  text-align: center
}

#thoi-gian h2 {
  margin: 0 0 14px;
  padding: 0
}

.tg {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.tg-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px clamp(20px, 3vw, 40px) 36px;
  background: radial-gradient(ellipse 70% 50% at 50% 25%, #FFFFFF 0, rgba(255, 255, 255, .6) 50%, transparent 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.tg-item+.tg-item {
  border-left: 1px solid var(--line)
}

.tg-bg {
  width: 100%;
  height: clamp(160px, 14vw, 200px);
  object-fit: contain;
  margin-bottom: 24px
}

.tg-cap {
  display: flex;
  flex-direction: column;
  flex: 1
}

.tg-item .brand {
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 4px
}

.tg-item h3 {
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  color: var(--heading);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--orange)
}

.tg-cap>p {
  margin: 12px 0 0;
  line-height: 1.5;
  color: var(--ink)
}

@media (max-width:760px) {
  .tg {
    grid-template-columns: 1fr
  }

  .tg-item+.tg-item {
    border-left: 0;
    border-top: 0
  }

  .tg-item {
    padding: 24px 16px
  }
}

.ng-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.ng-tabs button {
  padding: 10px 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: rgba(255, 255, 255, .7);
  text-align: left;
  cursor: pointer;
  transition: color .2s, border-color .2s
}

.ng-tabs button:hover {
  color: #FFFFFF
}

.ng-tabs button[aria-pressed="true"] {
  color: #FFFFFF;
  border-color: var(--orange)
}

.ng-info {
  display: grid
}

.ng-pane {
  grid-area: 1/1;
  visibility: hidden
}

.ng-pane.on {
  visibility: visible
}

.ng-pane.on>* {
  animation: qs-in .4s ease-out both
}

.ng-pane .brand {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
  margin-bottom: 4px
}

.ng-pane h3 {
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--orange)
}

.ng-pane .teaser {
  font-weight: 600
}

.ng-pane a {
  color: var(--orange)
}

.ng-pane dl div::before {
  background: var(--orange)
}

@media (max-width:900px) {
  .ng-bg::after {
    background: rgba(7, 35, 64, .75)
  }
}

@media (prefers-reduced-motion:reduce) {

  .ng-bg figure,
  .ng-tabs button {
    transition: none
  }

  .ng-pane.on>* {
    animation: none
  }
}

@media (max-width:1200px) {
  .qs {
    grid-template-columns: 1fr;
    max-width: none
  }
}

/* 4. Vị trí và thông tin triển lãm */
#trien-lam {
  background: var(--bg)
}

/* Heading hiển thị nằm trong ảnh; h2 chỉ giữ cho trình đọc màn hình */
#trien-lam .sec-h {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

/* Khung sơ đồ cao bằng cột thông tin bên trái */
.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 48px)
}

.event-grid>div {
  display: flex;
  flex-direction: column
}

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px)
}

.facts div {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  align-content: start;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line)
}

.facts dt {
  grid-column: 2;
  color: var(--muted);
  font-size: .875rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600
}

.facts dd {
  grid-column: 2;
  margin: 0;
  font-weight: 600;
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.45;
  color: var(--ink)
}

.facts .icon {
  grid-row: 1/span 2;
  color: var(--heading);
  align-self: start
}

.facts img.icon {
  width: 32px;
  height: 32px;
  object-fit: contain
}

.map-wrap {
  order: -1;
  aspect-ratio: 2528 / 1410;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: zoom-in;
}

.map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width:900px) {
  .event-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 0
  }

  .facts div {
    padding: 18px 0
  }
}

/* 5. Quý đơn vị nhận được gì: thẻ đánh số, màu nhấn --c xen kẽ xanh/cam từ :root */
#quyen-loi {
  position: relative;
  overflow: hidden;
  background: #FFFFFF
}

#quyen-loi .wrap {
  position: relative;
  z-index: 1
}

#quyen-loi h2 {
  color: var(--blue);
}

#quyen-loi h2 .hl {
  color: var(--orange)
}

#quyen-loi .lead {
  color: var(--muted)
}

.gains {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--blue)
}

.gains li {
  --c: var(--blue);
  --c-ink: var(--on-blue);
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 150px) minmax(0, 1fr) minmax(0, 1.5fr) 72px;
  align-items: center;
  gap: 32px;
  padding: 36px 28px;
  border-top: 2px solid var(--blue);
  background: #FFFFFF;
  color: var(--ink);
  transition: background .3s
}

.gains li:nth-child(even) {
  --c: var(--orange);
  --c-ink: var(--on-orange)
}

.gains li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  z-index: 0
}

.gains .num {
  position: relative;
  z-index: 1;
  padding: 0;
  background: none;
  clip-path: none;
  border-radius: 0;
  color: var(--c);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  transition: color .35s
}

.gains h3 {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  line-height: 1.25;
  text-wrap: balance;
  margin: 0;
  transition: color .35s
}

.gains p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  transition: color .35s
}

.gains .foot {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1
}

.gains .foot::before {
  display: none
}

.gains .ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, #FFFFFF)
}

.gains .ic img.icon {
  width: 36px;
  height: 36px;
  object-fit: contain
}

@media (hover:hover) {
  .gains li:hover {
    background: #FFFFFF
  }

  .gains li:hover::before {
    transform: scaleY(1)
  }

  .gains li:hover .num,
  .gains li:hover h3,
  .gains li:hover p {
    color: #fff
  }

  .gains li:hover .ic {
    background: rgba(255, 255, 255, .25)
  }

  .gains li:hover .ic img.icon {
    filter: brightness(0) invert(1)
  }
}

@media (max-width:1000px) {
  .gains li {
    grid-template-columns: 96px minmax(0, 1fr) 72px;
    gap: 12px 24px
  }

  .gains p {
    grid-column: 2/-1
  }

  .gains h3 {
    grid-column: 2
  }

  .gains .foot {
    grid-column: 3;
    grid-row: 1
  }

  .gains .num {
    grid-row: 1/3
  }
}

@media (max-width:560px) {
  .gains li {
    grid-template-columns: 1fr auto;
    padding: 28px 16px
  }

  .gains .num {
    grid-row: auto;
    grid-column: 1;
    font-size: 3rem
  }

  .gains .foot {
    grid-column: 2;
    grid-row: 1
  }

  .gains h3,
  .gains p {
    grid-column: 1/-1
  }

  .gains .ic {
    width: 56px;
    height: 56px
  }

  .gains .ic img.icon {
    width: 28px;
    height: 28px
  }
}

/* 6. Form */
.form-wrap {
  display: grid;
  gap: 24px;
  max-width: calc(720px + 48px)
}

/* Ảnh nền minh họa, chưa phải ảnh thật: thay trước khi publish. Lớp phủ xanh đậm giữ chữ trắng đủ tương phản */
#dang-ky {
  background: url("../assets/san-pham/banner-form.webp") center/cover no-repeat #072340;
  color: var(--on-blue)
}

#dang-ky h2 {
  color: var(--orange)
}

#dang-ky .lead {
  color: rgba(255, 255, 255, .85)
}

.form-wrap>div:first-child {
  text-align: center
}

.form-wrap>div:first-child p {
  margin-inline: auto
}

#dang-ky .form,
#dang-ky .success {
  color: var(--ink)
}

/* Kính trong: nền trắng 8% + blur nhẹ, thấy rõ ảnh nền. Nền ảnh tối nên chữ form chuyển sang trắng; ô nhập nền trắng 12%; danh sách chọn giữ nền đặc chữ tối */
#dang-ky .form {
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, .3);
  color: #fff
}

#dang-ky .form input[type=text],
#dang-ky .form input[type=email],
#dang-ky .form input[type=tel],
#dang-ky .form textarea,
#dang-ky .form .multi summary {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff
}

/* Thu gọn chiều cao form */
#dang-ky .form {
  padding: 22px 28px
}

#dang-ky .form .form-grid {
  gap: 12px 16px
}

#dang-ky .form label,
#dang-ky .form .legend {
  margin-bottom: 4px
}

#dang-ky .form input[type=text],
#dang-ky .form input[type=email],
#dang-ky .form input[type=tel],
#dang-ky .form .multi summary {
  padding-top: 8px;
  padding-bottom: 8px
}

#dang-ky .form textarea {
  min-height: 72px;
  height: 72px
}

#dang-ky .form-wrap {
  gap: 16px
}

#dang-ky .form ::placeholder {
  color: rgba(255, 255, 255, .6)
}

#dang-ky .form .req,
#dang-ky .form .err {
  color: #FFB4A8
}

#dang-ky .form .multi-list {
  color: var(--ink)
}

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 32px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.full {
  grid-column: 1/-1
}

label,
.legend {
  display: block;
  padding: 0;
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: 6px
}

.req {
  color: var(--error);
  font-weight: 700
}

.hint {
  font-weight: 400;
  color: var(--muted);
  font-size: .8125rem
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 11px 12px
}

textarea {
  min-height: 110px;
  resize: vertical
}

input:focus,
textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 0
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0
}

/* summary và nội dung <details> kế thừa qua slot của shadow DOM nên không nhận box-sizing:inherit, phải đặt thẳng */
select,
.multi summary {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 11px 36px 11px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23146EB4' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center
}

select:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 0
}

.invalid select {
  border-color: var(--error)
}

/* Chọn nhiều: <details> gốc của trình duyệt, không cần thư viện */
.multi {
  position: relative
}

.multi summary {
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.multi summary::-webkit-details-marker {
  display: none
}

.multi summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px
}

.multi[open] summary {
  border-color: var(--blue)
}

.multi-list {
  box-sizing: border-box;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 6px;
  max-height: 280px;
  overflow: auto
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  font-weight: 400;
  font-size: .9375rem;
  border-radius: var(--radius-m);
  cursor: pointer
}

.choice:hover {
  background: var(--bg)
}

.choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue)
}

.err {
  display: none;
  color: var(--error);
  font-size: .8125rem;
  margin-top: 4px
}

.invalid .err {
  display: block
}

.invalid input {
  border-color: var(--error)
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.form-actions {
  margin-top: 24px;
}

#submitBtn {
  width: 100%;
  justify-content: center;
  color: #FFFFFF;
  padding: 14px 24px;
  font-weight: 700;
}

#submitBtn:hover:not(:disabled) {
  color: #FFFFFF;
}

/* Đang gửi: vòng xoay trước chữ */
#submitBtn.is-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .6em;
  vertical-align: -.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: submitSpin .7s linear infinite;
}

@keyframes submitSpin {
  to { transform: rotate(360deg) }
}

@media (prefers-reduced-motion: reduce) {
  #submitBtn.is-loading::before { animation-duration: 1.6s }
}

/* Form compact: CHỈ áp dụng trong popup modal */
.form.form-compact {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

.form.form-compact .form-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "name phone"
    "email interest"
    "need need";
  gap: 10px 12px;
}

.form.form-compact [data-field="name"] {
  grid-area: name;
}

.form.form-compact [data-field="phone"] {
  grid-area: phone;
}

.form.form-compact [data-field="email"] {
  grid-area: email;
}

.form.form-compact [data-field="interest"] {
  grid-area: interest;
}

.form.form-compact [data-field="need"] {
  grid-area: need;
}

@media (max-width: 480px) {
  .form.form-compact .form-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "phone"
      "email"
      "interest"
      "need";
    gap: 10px;
  }
}

.form.form-compact label,
.form.form-compact .legend {
  font-size: .8125rem;
  margin-bottom: 3px;
}

.form.form-compact input[type=text],
.form.form-compact input[type=email],
.form.form-compact input[type=tel],
.form.form-compact select,
.form.form-compact .multi summary {
  padding: 8px 10px;
  font-size: .875rem;
}

.form.form-compact select,
.form.form-compact .multi summary {
  padding-right: 28px;
}

.form.form-compact textarea {
  min-height: 52px;
  height: 52px;
  padding: 6px 10px;
  font-size: .875rem;
}

.form.form-compact .form-actions {
  margin-top: 12px;
}

.form.form-compact #submitBtn {
  padding: 10px 16px;
  font-size: .9375rem;
}

/* Popup form modal */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

.form-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius-m);
  background: transparent;
  max-width: 480px;
  width: calc(100vw - 32px);
  box-shadow: 0 24px 64px rgba(7, 35, 64, .4);
  margin: auto;
  overflow: visible;
}

.form-dialog::backdrop {
  background: rgba(7, 35, 64, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.form-dialog-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px 20px 18px;
}

.form-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-m);
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  z-index: 10;
  transition: color .15s ease, background-color .15s ease;
}

.form-dialog-close:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, .06);
}

.form-dialog-close:focus-visible {
  outline: 2px solid var(--blue);
}

.form-dialog-title {
  margin: 0 0 14px;
  padding-right: 32px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blue-deep);
}

.form-dialog-body .form {
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.form-dialog-body .success {
  border: none;
  padding: 24px 16px 0;
  box-shadow: none;
}

/* Cloudflare Turnstile (appearance interaction-only): widget ẩn, chỉ lộ ra khi Cloudflare cần khách tương tác; .show do JS bật */
.ts-wrap {
  margin-top: 0
}

.ts-wrap.show {
  margin-top: 20px
}

.success {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 64px clamp(24px, 5vw, 48px) 0;
  box-shadow: 0 16px 48px rgba(7, 35, 64, .22);
  text-align: center;
  overflow: hidden
}

.success:focus {
  outline: none
}

.success:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px
}

.ok-icon {
  display: none
}

.success h3 {
  margin: 0 0 12px;
  color: var(--blue-deep);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.25
}

.ok-lead {
  font-size: 1.125rem;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 500
}

.ok-next {
  color: var(--muted);
  margin: 0 auto 48px;
  font-size: .9375rem;
  line-height: 1.6;
  max-width: 36ch
}

@media (max-width:560px) {
  .form-grid {
    grid-template-columns: 1fr
  }

  .form {
    padding: 20px 16px
  }

  .form-dialog {
    width: calc(100vw - 20px);
    max-height: 92vh;
    max-height: 92dvh;
  }

  .form-dialog-card {
    padding: 18px 14px 16px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
  }
}

/* 7. CTA cuối */
/* 7. Hẹn gặp: nền giống hero để khép trang, nhắc lại thời gian, địa điểm, gian */
.final {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: var(--blue);
  padding: 120px 0;
  text-align: center
}





/* 8. Footer */
.site-footer {
  background: #041A30;
  color: #DCE6EF;
  padding: 56px 0 32px;
  font-size: .9375rem
}

.site-footer a {
  color: #FFFFFF
}

.social {
  display: flex;
  gap: 10px
}

.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background .2s, border-color .2s
}

.social a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--on-orange)
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 48px
}

.foot-h {
  color: var(--orange);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 16px
}

.foot-sol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px
}

.foot-sol a {
  display: block;
  padding: 10px 0;
  color: #FFFFFF;
  font-size: 1.0625rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: color .2s, padding-left .2s
}

.foot-sol a:hover {
  color: var(--orange);
  padding-left: 8px
}

.site-footer a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px
}

.foot-grid img {
  height: 200px;
  width: auto;
  margin-bottom: 24px
}

.foot-grid>div:first-child strong {
  font-size: 1.125rem;
  color: #FFFFFF
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: 72px
}

.site-footer::after {
  content: "";
  position: absolute;
  right: -310px;
  bottom: -630px;
  width: 1200px;
  height: 1200px;
  background: url(../assets/tecotec-group-logo-vertical-white.svg) no-repeat center/contain;
  opacity: .05;
  pointer-events: none
}

.site-footer .wrap {
  position: relative;
  z-index: 1
}

.offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none
}

.offices strong {
  color: #FFFFFF;
  display: block
}

.offices li:first-child {
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.offices li:first-child strong {
  color: var(--orange);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 8px
}

.legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .8125rem;
  text-align: center
}

.legal span:first-child {
  opacity: .85
}

@media (max-width:900px) {
  .foot-grid {
    grid-template-columns: 1fr
  }

  .foot-grid img {
    height: 140px
  }

  .offices {
    grid-template-columns: 1fr
  }

  .site-footer::after {
    width: 360px;
    height: 360px
  }
}

/* 2b. Tổng quan nhóm giải pháp: slide full-width, cuộn ngang native (scroll-snap), không tự chạy */
/* Từ 2026-10-30 (ảnh mẫu người dùng): card bo góc rộng ~80vw, slide đang xem ở giữa, 2 card bên ló ra; bấm card bên để chuyển */
/* Gói trọn 1 màn hình (header đã ẩn ở section này): card co giãn lấp phần còn lại */
/* Từ 2026-10-30 (lần 2): tab dọc dạng viên thuốc bên trái; card đang xem căn trái khung, card đã qua trôi khuất sang trái, chỉ card kế tiếp ló bên phải */
.gs-sec {
  --gs-t: 12s;
  background: #fff;
  color: var(--ink);
  padding: 40px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  min-height: 560px
}

.gs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
  width: 100%
}

/* Ảnh nền section = ảnh của slide đang xem, phóng to + làm mờ + phủ xanh đậm để chữ, tab vẫn đọc được; đổi mờ chéo */
.gs-sec {
  position: relative;
  isolation: isolate
}

.gs-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  display: none /* nền trắng: ẩn ảnh nền mờ (người dùng 2026-11-06) */
}

.gs-bg img {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  max-width: none;
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(8px);
  opacity: 0;
  transition: opacity .8s ease
}

.gs-bg img.on {
  opacity: 1
}

/* Phủ tối đậm bên trái (tiêu đề, tab) và nhạt dần sang phải để ảnh lộ rõ */
.gs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 35, 64, .85) 0, rgba(7, 35, 64, .55) 25%, rgba(7, 35, 64, .25) 100%)
}

@media (prefers-reduced-motion:reduce) {
  .gs-bg img {
    transition: none
  }
}

.gs-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0
}

.gs-head h2 {
  margin: 0 0 14px;
  color: var(--heading);
  text-align: center
}

.gs-nav {
  display: flex;
  gap: 12px
}

.gs-nav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--heading);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s, border-color .2s
}

.gs-nav button:hover:not(:disabled) {
  background: rgba(0, 0, 0, .05);
  border-color: var(--orange)
}

.gs-nav button:disabled {
  opacity: .3;
  cursor: default
}

/* Thân full-width: cột tab cách mép trái như .wrap của section full-width, khung card tràn tới mép phải màn hình */
.gs-body {
  flex: 1;
  min-height: 0;
  display: flex
}

.gs-view {
  position: relative;
  min-height: 0;
  flex: 1;
  container-type: inline-size;
  display: flex
}

/* Card rộng 86% khung, padding phải 14% để card cuối vẫn snap sát trái */
.gs-track {
  flex: 1;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 66cqw;
  gap: 20px;
  padding: 0 17cqw;
  scroll-padding-left: 17cqw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  min-height: clamp(540px, 70vh, 700px)
}

.gs-track:active {
  cursor: grabbing
}

.gs-track::-webkit-scrollbar {
  display: none
}

/* Card = ảnh thực tế phủ kín, tên nhóm ở góc dưới trái trên lớp tối dần */
.gs-slide {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: #000;
  color: var(--on-blue);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 3vw, 48px);
  transition: opacity .4s;
  min-height: clamp(540px, 70vh, 700px)
}

.gs-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent 45%);
  pointer-events: none
}

.gs-slide[inert] {
  opacity: .55;
  cursor: pointer
}

.gs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.gs-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  max-width: none;
  color: rgba(255, 255, 255, .5);
  font-size: .875rem;
  background: repeating-linear-gradient(135deg, #0d0d0d 0 10px, #151515 10px 20px)
}

/* Nhóm chưa có ảnh thực tế: hoạt cảnh 3 bước (GS_SIM + GS_STEPS trong JS), chu kỳ --gs-t (12s): bước 1 và 2 mỗi bước 25% (3s), bước 3 là trọng tâm nên 50% (6s). Đổi tốc độ: sửa --gs-t.
   Dòng chữ của bước đang chạy ở trên (.gs-steps), hình ở giữa, tên nhóm ở đáy. Các lớp .p1/.p2/.p3/.p12/.p23 = hiện ở bước nào */
.gs-steps {
  position: absolute;
  z-index: 1;
  left: clamp(28px, 3vw, 48px);
  right: clamp(28px, 3vw, 48px);
  top: clamp(28px, 3vw, 48px);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none
}

.gs-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: none;
  font-size: clamp(1rem, .8rem + .6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3
}

.gs-steps b {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--on-orange);
  display: grid;
  place-items: center;
  font-size: 1rem
}

.gs-sim {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  height: 62%;
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.gs-sim text {
  fill: #FFFFFF;
  stroke: none;
  font: 600 18px var(--font)
}

.gs-sim .dim {
  stroke: rgba(255, 255, 255, .3);
  stroke-width: 2
}

.gs-sim .fill {
  fill: rgba(255, 255, 255, .12)
}

.gs-sim .hl {
  stroke: var(--orange)
}

.gs-sim .solid {
  fill: var(--orange);
  stroke: none
}

.gs-sim .tz {
  fill: var(--orange);
  font-size: 15px
}

.gs-sim .min {
  stroke-width: 2
}

.gs-sim .sec {
  stroke: var(--orange);
  stroke-width: 1.5
}

.gs-sim .mk {
  offset-path: path("M40 300C160 300 240 250 380 250S640 230 760 200");
  offset-rotate: auto
}

.gs-sim .go {
  offset-path: path("M140 192Q420 40 700 226");
  offset-rotate: 0deg
}

.gs-sim .back {
  offset-path: path("M700 226Q420 40 140 192");
  offset-rotate: 0deg
}

@media (prefers-reduced-motion:no-preference) {
  .gs-steps {
    gap: 0
  }

  .gs-steps li {
    grid-area: 1/1;
    animation: gs-s1 var(--gs-t) infinite
  }

  .gs-steps li:nth-child(2) {
    animation-name: gs-s2
  }

  .gs-steps li:nth-child(3) {
    animation-name: gs-s3
  }

  .gs-sim .p1 {
    animation: gs-p1 var(--gs-t) infinite
  }

  .gs-sim .p2 {
    animation: gs-p2 var(--gs-t) infinite
  }

  .gs-sim .p3 {
    animation: gs-p3 var(--gs-t) infinite
  }

  .gs-sim .p12 {
    animation: gs-p12 var(--gs-t) infinite
  }

  .gs-sim .p23 {
    animation: gs-p23 var(--gs-t) infinite
  }

  .gs-sim .flow {
    stroke-dasharray: 10 12;
    animation: gs-flow .8s linear infinite
  }

  .gs-sim .wave {
    animation: gs-wave 1.2s ease-out infinite
  }

  .gs-sim .mk {
    animation: gs-mk var(--gs-t) linear infinite
  }

  .gs-sim .trail {
    stroke-dasharray: 1;
    animation: gs-trail var(--gs-t) linear infinite
  }

  .gs-sim .hand {
    animation: gs-hand var(--gs-t) infinite
  }

  /* Kim giây quay 1 vòng mỗi 1/4 chu kỳ nên lúc bước 3 bắt đầu (50%) mọi kim giây cùng ở số 12 */
  .gs-sim .sec {
    animation: gs-sec calc(var(--gs-t)/4) linear infinite
  }

  .gs-sim .go {
    animation: gs-go var(--gs-t) infinite
  }

  .gs-sim .back {
    animation: gs-back var(--gs-t) infinite
  }

  .gs-slide[inert] .gs-sim *,
  .gs-slide[inert] .gs-steps li {
    animation-play-state: paused
  }
}

/* Giảm chuyển động: liệt kê đủ 3 bước, hình đứng ở trạng thái cuối */
@media (prefers-reduced-motion:reduce) {

  .gs-sim .p1,
  .gs-sim .p2,
  .gs-sim .p12 {
    display: none
  }
}

/* Mốc thời gian: bước 1 = 0-25%, bước 2 = 25-50%, bước 3 = 50-100% */
@keyframes gs-s1 {
  0% {
    opacity: 0;
    transform: translateY(8px)
  }

  2%,
  23% {
    opacity: 1;
    transform: none
  }

  25%,
  100% {
    opacity: 0
  }
}

@keyframes gs-s2 {

  0%,
  25% {
    opacity: 0;
    transform: translateY(8px)
  }

  27%,
  48% {
    opacity: 1;
    transform: none
  }

  50%,
  100% {
    opacity: 0
  }
}

@keyframes gs-s3 {

  0%,
  50% {
    opacity: 0;
    transform: translateY(8px)
  }

  52%,
  96% {
    opacity: 1;
    transform: none
  }

  100% {
    opacity: 0
  }
}

@keyframes gs-p1 {

  0%,
  23% {
    opacity: 1
  }

  27%,
  100% {
    opacity: 0
  }
}

@keyframes gs-p2 {

  0%,
  23% {
    opacity: 0
  }

  27%,
  48% {
    opacity: 1
  }

  52%,
  100% {
    opacity: 0
  }
}

@keyframes gs-p3 {

  0%,
  48% {
    opacity: 0
  }

  52%,
  96% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes gs-p12 {

  0%,
  48% {
    opacity: 1
  }

  52%,
  100% {
    opacity: 0
  }
}

@keyframes gs-p23 {

  0%,
  23% {
    opacity: 0
  }

  27%,
  96% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes gs-flow {
  to {
    stroke-dashoffset: -22
  }
}

@keyframes gs-wave {
  0% {
    opacity: 0
  }

  30% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* Vệt đường đi bám đúng vị trí xe (offset-distance x% = dashoffset 1 - x) */
@keyframes gs-mk {
  0% {
    offset-distance: 0%
  }

  25% {
    offset-distance: 30%
  }

  50% {
    offset-distance: 55%
  }

  96%,
  100% {
    offset-distance: 100%
  }
}

@keyframes gs-trail {
  0% {
    stroke-dashoffset: 1
  }

  25% {
    stroke-dashoffset: .7
  }

  50% {
    stroke-dashoffset: .45
  }

  96%,
  100% {
    stroke-dashoffset: 0
  }
}

@keyframes gs-hand {

  0%,
  50% {
    transform: rotate(var(--a))
  }

  60%,
  100% {
    transform: rotate(var(--b))
  }
}

@keyframes gs-sec {
  to {
    transform: rotate(360deg)
  }
}

@keyframes gs-go {

  0%,
  25% {
    offset-distance: 0%;
    opacity: 1
  }

  49% {
    offset-distance: 100%;
    opacity: 1
  }

  50%,
  100% {
    opacity: 0
  }
}

@keyframes gs-back {

  0%,
  52% {
    offset-distance: 0%;
    opacity: 0
  }

  53% {
    opacity: 1
  }

  94% {
    offset-distance: 100%;
    opacity: 1
  }

  96%,
  100% {
    opacity: 0
  }
}

.gs-text {
  position: relative;
  z-index: 1
}

/* Tiêu đề 1 dòng: cỡ chữ co theo bề rộng card (cqw của .gs-view), chặn nowrap */
.gs-text p {
  margin: 10px 0 0;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(.9375rem, 1.5cqw, 1.125rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .85)
}

.gs-text h3 {
  font-size: clamp(1.25rem, 3.4cqw, 2.5rem);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap
}

/* Chữ hiện dần khi section vào màn hình và mỗi lần đổi sang slide đó (.gs-in do IntersectionObserver gắn) */
@media (prefers-reduced-motion:no-preference) {
  .gs-text {
    transition: opacity .6s ease .15s, transform .6s cubic-bezier(.16, 1, .3, 1) .15s
  }

  .gs-sec:not(.gs-in) .gs-text,
  .gs-slide[inert] .gs-text {
    opacity: 0;
    transform: translateY(24px)
  }
}

/* Đè lên card trước đã đi qua (ló 20cqw bên trái), không phải cột riêng */
.gs-side {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 2cqw, 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px
}

.gs-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.gs-tabs button {
  background: rgba(0, 0, 0, .45);
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  color: rgba(255, 255, 255, .8);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  padding: 10px 20px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s
}

.gs-tabs button:hover {
  color: var(--on-blue);
  border-color: rgba(255, 255, 255, .7)
}

.gs-tabs button[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--on-orange)
}

@media (prefers-reduced-motion:reduce) {
  .gs-track {
    scroll-behavior: auto
  }

  .gs-slide,
  .gs-nav button,
  .gs-tabs button {
    transition: none
  }
}

/* ponytail: mobile chỉ xếp tab thành hàng cuộn ngang tạm, chờ đợt làm mobile riêng (quy ước 2026-10-29) */
@media (max-width:900px) {
  .gs-view {
    flex-direction: column
  }

  .gs-track {
    grid-auto-columns: 74cqw;
    padding: 0 13cqw;
    scroll-padding-left: 13cqw;
    gap: 12px;
    min-height: clamp(440px, 58vh, 560px)
  }

  .gs-slide {
    min-height: clamp(440px, 58vh, 560px)
  }

  .gs-side {
    position: static;
    transform: none;
    min-width: 0
  }

  .gs-nav {
    display: none
  }

  .gs-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding-right: 24px
  }

  .gs-tabs button {
    white-space: nowrap
  }
}

/* Hiệu ứng: JS gắn .reveal, không có JS thì nội dung vẫn hiện. Tắt hết khi người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion:no-preference) {
  .reveal {
    transition: opacity .5s ease, transform .5s ease
  }

  .reveal:not(.in) {
    opacity: 0;
    transform: translateY(16px)
  }

  #thoi-gian .section-head.reveal {
    opacity: 1;
    transform: none
  }

  .mobile-cta {
    transition: transform .2s ease, visibility .2s
  }
}

/* Thanh CTA dính đáy trên mobile: thay nút header, ẩn khi hero, form, CTA cuối hoặc footer đang hiện */
.mobile-cta {
  display: none
}

@media (max-width:900px) {
  .nav .btn {
    display: none
  }

  .mobile-cta {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 19;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25)
  }

  .mobile-cta.off {
    transform: translateY(calc(100% + 32px));
    visibility: hidden
  }
}


/* #quan-sat-3: card sản phẩm bên phải, bấm card đổi nền (tái dùng .ng-sec/.ng-bg/.ng-pane) */
#quan-sat-3 .wrap {
  max-width: none;
  padding: 0 clamp(24px, 4vw, 64px)
}

.q3-sec[hidden] {
  display: none
}

.q3-sec .ng-bg figure {
  transition: opacity .6s ease 0s
}

/* Nền đổi kiểu crossfade đồng thời như #nguy-trang (ảnh cũ mờ ra, ảnh mới hiện vào cùng lúc, không trễ) */
.q3-sec .ng-pane.on>* {
  animation-delay: .8s
}

.q3-sec .ng-bg img {
  width: 100%;
  -webkit-mask-image: none;
  mask-image: none
}

.q3-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center
}

.q3-cards {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 24px 0 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity
}

.q3-cards li {
  flex: 0 0 220px;
  scroll-snap-align: center
}

.q3-card {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .3s .4s, filter .3s
}

.q3-card:hover {
  filter: brightness(1.12)
}

.q3-card[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--orange)
}

/* 2 phần: trên = tấm màu (tên góc trái, ảnh góc phải dưới), dưới = dải tối ghi hãng. Chọn thì card cao hơn nên tấm màu lớn hơn */
.q3-card .ph {
  grid-area: 1/1;
  display: block;
  height: 200px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  transition: background .4s .4s
}

.q3-card[aria-pressed="true"] .ph {
  background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12))
}

.q3-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 14px;
  mix-blend-mode: multiply
}

.q3-card .txt {
  grid-area: 2/1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 64px;
  padding: 0 16px 14px;
  background: rgba(7, 35, 64, .45);
  transition: height .4s cubic-bezier(.16, 1, .3, 1) .4s
}

.q3-card .n {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .9375rem;
  line-height: 1.3
}

.q3-card .b {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .85)
}

/* Ảnh cố định 200px; chỉ dải hãng cao thêm khi chọn, card nở đều lên và xuống vì li căn giữa dọc */
.q3-card[aria-pressed="true"] .txt {
  height: 88px
}

@media (max-width:900px) {
  .q3-grid {
    grid-template-columns: 1fr
  }
}

@media (prefers-reduced-motion:reduce) {
  .q3-card {
    transition: none
  }
}

/* #quan-sat-3: cao 100vh, card bên trái, chữ bên phải (lớp phủ tối đảo chiều theo) */
.q3-sec {
  min-height: 0;
  height: auto;
  padding: clamp(40px, 4.5vw, 60px) 0
}

.q3-sec .section-head {
  margin-bottom: 20px
}

.q3-sec .ng-pane p {
  margin: 0 0 .75em
}

.q3-grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr)
}

.q3-grid .q3-left {
  order: 1;
  min-width: 0
}

.q3-sec .ng-bg::after {
  background: linear-gradient(to right, rgba(7, 35, 64, .92) 0, rgba(7, 35, 64, .78) 45%, transparent 80%)
}

@media (max-width:900px) {
  .q3-sec {
    height: auto
  }

  .q3-sec .ng-bg::after {
    background: rgba(7, 35, 64, .75)
  }
}

/* #quan-sat-3: hàng card chỉ hiện 3 card, không thanh cuộn; JS cuộn để card chọn đứng đầu, card trước khuất bên trái */
.q3-cards {
  position: relative;
  overflow: hidden;
  scroll-snap-type: none;
  gap: 20px;
  max-width: 760px;
  width: 100%
}

.q3-cards li {
  flex: 0 0 calc((100% - 40px)/3);
  scroll-snap-align: none
}

.q3-cards::after {
  content: "";
  flex: 0 0 calc(100% - (100% - 40px)/3 - 20px)
}

.q3-left {
  order: 1;
  min-width: 0
}

.q3-nav {
  display: flex;
  gap: 12px;
  margin-top: 16px
}

.q3-nav button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--on-orange);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s
}

.q3-nav button:hover {
  background: #fff;
  color: var(--orange)
}

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

@media (max-width:900px) {
  .q3-left {
    order: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .q3-nav button {
    transition: none
  }
}

/* #quan-sat-3 (bản trượt sang phải): card chọn ở ô thứ 3, đệm 2 ô ở đầu hàng, bỏ đệm cuối */
.q3-cards::after {
  display: none
}

.q3-cards::before {
  content: "";
  flex: 0 0 calc((200% - 80px)/3 + 20px)
}

/* #quan-sat-3 (vòng lặp): li đặt tuyệt đối theo ô --s, JS gán; thay mọi rule flex/spacer phía trên */
.q3-cards {
  display: block;
  position: relative;
  overflow: hidden;
  height: 300px;
  padding: 0;
  max-width: 760px
}

.q3-cards::before,
.q3-cards::after {
  display: none
}

.q3-cards li {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  width: calc((100% - 40px)/3);
  left: calc(var(--s, 0) * ((100% - 40px)/3 + 20px));
  transition: left .5s cubic-bezier(.16, 1, .3, 1)
}

/* li căn giữa dọc nên card chọn cao thêm thì nở đều: nửa lên trên, nửa xuống dưới */
@media (prefers-reduced-motion:reduce) {
  .q3-cards li {
    transition: none !important
  }
}

/* ===== #ung-dung: Giải pháp cho khối An ninh - Quốc phòng (mockup 2026-11-04) ===== */
.ud-sec {
  position: relative;
  overflow: visible;
  color: #fff;
  padding: calc(var(--sec-y, 72px) * .85) 0 0;
  /* Nền gốc #08090C = đúng nền #uav. Chuyển tiếp: quầng xanh ở mép trên (đối xứng với quầng ở đáy #uav)
     nên đường giao 2 section là một dải sáng liền mạch, không có biên. Xuống dưới tắt về đen. */
  background:
    radial-gradient(85% 340px at 50% 0%, rgba(20, 110, 180, .34) 0%, rgba(20, 110, 180, 0) 100%),
    #08090C
}

/* Nửa dưới của quầng chuyển tiếp, nằm cuối #uav */
#uav.tc-sec::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 340px;
  background: radial-gradient(85% 340px at 50% 100%, rgba(20, 110, 180, .34) 0%, rgba(20, 110, 180, 0) 100%);
  pointer-events: none
}

/* Vạch cam 3px ngăn #uav và #ung-dung */
.ud-sec::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--orange);
  pointer-events: none
}

.ud-head {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0 clamp(32px, 3.5vw, 48px)
}

.ud-head h2 {
  color: #fff;
  letter-spacing: -.01em;
}

.ud-dash {
  position: relative;
  display: inline-block;
  padding: 0 6px
}

.ud-lead {
  color: rgba(255, 255, 255, .78);
}

/* 3 cột vuông, rãnh trắng 4px */
.ud-grid {
  display: flex;
  position: relative;
  width: 100%;
  height: clamp(440px, 36vw, 560px);
  overflow: hidden;
  gap: 4px;
  background: #08090C
}

.ud-col {
  position: relative;
  overflow: hidden;
  height: 100%;
  flex: 1 1 0;
  background: #0B2545;
  cursor: pointer
}

.ud-col img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: max(100%, 44vw);
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center
}

.ud-col:nth-child(1) img {
  object-position: center 35%
}

/* Lớp phủ nội dung khi hover */
.ud-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px clamp(28px, 4vw, 52px);
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.2, 1, .3, 1);
  pointer-events: none
}

.ud-cap h3 {
  color: #fff;
  font-size: clamp(1.15rem, 1.35vw, 1.35rem);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3
}

.ud-cap p {
  margin: 0 0 14px;
  font-size: .95rem;
  line-height: 1.5;
  max-width: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, .88)
}

.ud-cap ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  line-height: 1.55;
  text-align: left
}

.ud-cap li {
  position: relative;
  padding-left: 16px;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, .95)
}

.ud-cap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange)
}

@media (hover:hover) {

  .ud-col:hover .ud-cap,
  .ud-col:focus-within .ud-cap {
    opacity: 1;
    pointer-events: auto
  }
}

@media (prefers-reduced-motion:reduce) {

  .ud-col img,
  .ud-cap {
    transition: none
  }
}

/* Mobile & touch: xếp dọc, gỡ lát cắt nghiêng */
@media (hover:none),
(max-width:820px) {
  .ud-grid {
    flex-direction: column;
    height: auto;
    gap: 12px;
    background: transparent;
    padding: 0 clamp(16px, 4vw, 24px) 24px
  }

  .ud-col {
    aspect-ratio: 4/3
  }

  .ud-cap {
    opacity: 1;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .7) 60%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 20px;
    pointer-events: auto
  }

  .ud-cap p {
    display: none
  }
}

/* ===== Nhịp nền so le tối - sáng (2026-11-04, docs/04). Tối = --grad-dark (#0B3A66 > #072340), sáng = --bg / trắng ===== */
/* #tong-quan: SÁNG (card ảnh giữ lớp phủ tối riêng) */
.gs-sec {
  background: #fff
}

.gs-bg {
  display: none
}

.gs-head h2 {
  color: var(--blue)
}

.gs-nav button {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--on-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.gs-nav button:hover:not(:disabled) {
  background: #FFAD33;
  border-color: #FFAD33
}

/* #quan-sat-3 (tối): vạch cam làm ranh giới */
.q3-sec {
  box-shadow: inset 0 4px 0 var(--orange)
}

/* #quyen-loi: NỀN TRẮNG (người dùng chốt 2026-11-04, dùng lại rule gốc phía trên) */
/* #dang-ky: CÓ ẢNH nền (người dùng chốt 2026-11-04, dùng lại rule gốc phía trên) */
/* .final: NỀN TRẮNG (người dùng chốt 2026-11-04, dùng lại rule gốc phía trên) */
.site-footer {
  border-top: 4px solid var(--orange)
}

/* ===== Chuẩn hóa chiều cao và padding (2026-11-04, docs/04 mục 6 bước 3) =====
   Thang padding dọc: --sec-y (56 đến 96px). Thang chiều cao: section có ảnh nền/carousel tối thiểu 90svh, còn lại tự co. */
section {
  padding: var(--sec-y) 0
}

.hero {
  min-height: 100vh;
  min-height: 100svh
}

.gs-sec {
  height: auto;
  min-height: max(var(--sec-full-d), 640px);
  padding: 100px 0
}

.ng-sec {
  min-height: var(--sec-full);
  min-height: var(--sec-full-d);
  padding: var(--sec-y) 0
}

.q3-sec {
  height: auto;
  min-height: 0;
  padding: clamp(40px, 4.5vw, 60px) 0
}

#thoi-gian {
  padding: 0 0 calc(var(--sec-y) * 1.4)
}

#thoi-gian .section-head {
  padding: calc(var(--sec-y) * 1.4) 0 calc(var(--sec-y) * .5)
}

#thoi-gian h2 {
  padding: 0
}

@media (max-width:900px) {
  .gs-sec {
    min-height: 0
  }

  .ng-sec,
  .q3-sec {
    min-height: 0
  }
}

/* ==============================================================
   #uav: THIẾT BỊ VÀ GIẢI PHÁP DO TECOTEC PHÁT TRIỂN
   Phong cách Defense-Tech hiện đại, mô phỏng bệ Isometric 3D (2026-11-05)
   ============================================================== */
#uav.tc-sec {
  background-color: #08090C;
  color: #F8FAFC;
  padding: clamp(64px, 7vw, 108px) 0;
  position: relative;
  overflow: hidden;
}

#uav .wrap {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(28px, 4vw, 72px);
  box-sizing: border-box;
}

/* Header Split: Headline bên trái, Mô tả & CTA bên phải */





/* Lưới 3 cột giải pháp (Flat & Borderless) */
.tc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 52px);
  width: 100%;
}

.tc-col {
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 1px solid var(--orange);
  padding-top: 24px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Step Header: Ô số vàng amber + Nhãn bước */
.tc-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.tc-step-num {
  width: 22px;
  height: 22px;
  background-color: var(--orange);
  color: #000000;
  font-weight: 800;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-m);
  flex-shrink: 0;
  line-height: 1;
}

.tc-step-label {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

/* Khung mô phỏng Isometric 3D Platform */
.tc-sim {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: clamp(340px, 25vw, 440px);
  margin: 14px 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 65%, rgba(13, 30, 52, 0.5) 0%, rgba(8, 16, 28, 0.18) 60%, transparent 80%);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.tc-sim-svg {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  user-select: none;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nội dung thẻ bên dưới */
.tc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 8px;
}

.tc-card-title {
  color: #FFFFFF;
  font-size: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.tc-card-desc {
  color: #94A3B8;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 16px 0;
}


/* ============ KEYFRAME ANIMATIONS CHO MÔ PHỎNG ISOMETRIC ============ */
@keyframes tcPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.tc-pulse-dot {
  animation: tcPulseDot 1.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tcBlinkFast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.tc-blink-fast {
  animation: tcBlinkFast 1.1s steps(2) infinite;
}

/* 1. Mô phỏng tuần tự: Tàu -> Cột phao -> Trạm gần bờ -> Trung tâm C2 (Chu kỳ 8s) */
/* Vệt sóng áp lực nước ngầm từ tàu (0s - 2.2s: 0% - 28%) */
/* Tàu tuần tra / Tàu quân sự tuần tra ngang trên biển */
@keyframes seqShipPatrol {
  0% {
    transform: translate(90px, 118px) rotate(-1deg);
  }
  25% {
    transform: translate(98px, 120px) rotate(0.8deg);
  }
  50% {
    transform: translate(105px, 118px) rotate(-0.5deg);
  }
  75% {
    transform: translate(98px, 116px) rotate(0.5deg);
  }
  100% {
    transform: translate(90px, 118px) rotate(-1deg);
  }
}
.seq-ship-group {
  animation: seqShipPatrol 8s ease-in-out infinite;
}

/* Radar trên tháp tàu quay */
@keyframes seqShipRadarSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.seq-ship-radar {
  transform-origin: -2px -19px;
  animation: seqShipRadarSpin 4s linear infinite;
}

/* Vệt rẽ nước đuôi tàu */
@keyframes seqSternChurn {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 0.9; transform: scale(1.15); }
}
.seq-stern-wake {
  transform-origin: -28px 1px;
  animation: seqSternChurn 2s ease-in-out infinite;
}

/* Sóng nước áp lực ngầm lan truyền từ vết tàu tới cột phao (0% - 32%: 0s - 2.5s) */
@keyframes seqWaveImpactTravel {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(-16px, -14px);
  }
  8% {
    opacity: 0.95;
  }
  24% {
    opacity: 1;
    transform: scale(1.05) translate(8px, 6px);
  }
  30% {
    opacity: 0.95;
    transform: scale(1.22) translate(18px, 14px);
  }
  34%, 100% {
    opacity: 0;
    transform: scale(1.35) translate(26px, 18px);
  }
}
.seq-wave-arc {
  transform-origin: 112px 128px;
  animation: seqWaveImpactTravel 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.seq-wave-arc.w1 { animation-delay: 0s; }
.seq-wave-arc.w2 { animation-delay: 0.35s; }
.seq-wave-arc.w3 { animation-delay: 0.7s; }

/* Vòng va chạm nước tại chân cột phao khi sóng ập tới (24% - 42%: 1.9s - 3.4s) */
@keyframes seqSplashImpact {
  0%, 20% {
    opacity: 0;
    transform: scale(0.3);
  }
  24% {
    opacity: 1;
    transform: scale(0.85);
  }
  32% {
    opacity: 0.85;
    transform: scale(1.35);
  }
  40%, 100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
.seq-splash-ring {
  transform-origin: 0 0;
  animation: seqSplashImpact 8s ease-out infinite;
}
.seq-splash-ring.r1 { animation-delay: 0.1s; }
.seq-splash-ring.r2 { animation-delay: 0.35s; }
.seq-splash-ring.r3 { animation-delay: 0.6s; }

/* Cột phao thủy âm phản ứng vật lý khi sóng va đập (nghiêng, nhấp nhô) */
@keyframes seqBuoyImpactTilt {
  0%, 22% {
    transform: translate(142px, 175px) rotate(0deg);
  }
  25% {
    transform: translate(142px, 172px) rotate(7deg);
  }
  29% {
    transform: translate(142px, 178px) rotate(-5deg);
  }
  33% {
    transform: translate(142px, 174px) rotate(3deg);
  }
  37% {
    transform: translate(142px, 176px) rotate(-1deg);
  }
  42%, 100% {
    transform: translate(142px, 175px) rotate(0deg);
  }
}
.seq-buoy {
  transform-origin: 0 0;
  animation: seqBuoyImpactTilt 8s ease-in-out infinite;
}

/* Cụm cảm biến hydrophone dưới nước tiếp nhận xung âm (24% - 38%) */
@keyframes seqHydroFlash {
  0%, 20% { opacity: 0.2; transform: scale(0.8); }
  25%, 34% { opacity: 1; transform: scale(1.4); }
  38%, 100% { opacity: 0.2; transform: scale(0.8); }
}
.seq-hydro-glow {
  transform-origin: center;
  animation: seqHydroFlash 8s ease-in-out infinite;
}

/* Đèn báo động trên đỉnh anten phao chuyển đỏ báo động (26% - 50%) */
@keyframes seqBuoyAlert {
  0%, 23% { fill: #00E676; }
  26%, 48% { fill: #FF5252; filter: drop-shadow(0 0 6px #FF5252); }
  52%, 100% { fill: #00E676; filter: none; }
}
.seq-buoy-beacon {
  animation: seqBuoyAlert 8s steps(1) infinite;
}

/* Vòng sóng vô tuyến RF từ anten phao bắn về đất liền */
@keyframes seqBuoyRfWave {
  0%, 27% { opacity: 0; transform: scale(0.6); }
  31% { opacity: 0.95; }
  45% { opacity: 0.8; transform: scale(1.3); }
  49%, 100% { opacity: 0; transform: scale(1.55); }
}
.seq-rf-ring {
  transform-origin: 0 -33px;
  animation: seqBuoyRfWave 8s ease-out infinite;
}
.seq-rf-ring.r1 { animation-delay: 2.2s; }
.seq-rf-ring.r2 { animation-delay: 2.55s; }
.seq-rf-ring.r3 { animation-delay: 2.9s; }

/* Tia sóng vô tuyến RF truyền từ phao về trạm bờ */
@keyframes seqRfBeamFlow {
  0%, 27% { stroke-dashoffset: 70; opacity: 0; }
  30% { opacity: 0.95; }
  47% { stroke-dashoffset: -130; opacity: 0.9; }
  51%, 100% { stroke-dashoffset: -170; opacity: 0; }
}
.seq-rf-beam {
  animation: seqRfBeamFlow 8s linear infinite;
}

/* Trạm bờ nhận tín hiệu, đèn mã hóa xử lý (50% - 74%) */
@keyframes seqShoreLedPulse {
  0%, 48% { opacity: 0.3; }
  52%, 74% { opacity: 1; filter: drop-shadow(0 0 5px #00E676); }
  78%, 100% { opacity: 0.3; }
}
.seq-shore-beacon {
  animation: seqShoreLedPulse 8s ease-in-out infinite;
}

@keyframes seqCryptoBlink {
  0%, 48% { opacity: 0.2; }
  50%, 75% { opacity: 1; }
  79%, 100% { opacity: 0.2; }
}
.seq-crypto-led1 { animation: seqCryptoBlink 8s steps(2) infinite; }
.seq-crypto-led2 { animation: seqCryptoBlink 8s steps(2) 0.15s infinite; }
.seq-crypto-led3 { animation: seqCryptoBlink 8s steps(2) 0.3s infinite; }

/* Tia truyền tín hiệu mã hóa từ trạm bờ sang C2 */
@keyframes seqCryptoBeamFlow {
  0%, 51% { stroke-dashoffset: 45; opacity: 0; }
  54% { opacity: 1; }
  73% { stroke-dashoffset: -110; opacity: 0.95; }
  77%, 100% { stroke-dashoffset: -140; opacity: 0; }
}
.seq-crypto-beam {
  animation: seqCryptoBeamFlow 8s linear infinite;
}

/* Dòng dữ liệu nhị phân 010101 bay từ Trạm bờ vào Trung tâm C2 */
.seq-binary-stream {
  pointer-events: none;
}
.seq-bin-group {
  filter: drop-shadow(0 0 3.5px rgba(0, 230, 118, 0.95));
}
.seq-bin-group text {
  font-family: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', Consolas, monospace;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  fill: #00E676;
}

@keyframes seqBinFly1 {
  0%, 50% {
    transform: translate(232px, 145px);
    opacity: 0;
  }
  53% {
    opacity: 1;
    transform: translate(242px, 137px);
  }
  62% {
    opacity: 1;
    transform: translate(258px, 127px);
  }
  70% {
    opacity: 0.9;
    transform: translate(275px, 128px);
  }
  72%, 100% {
    opacity: 0;
    transform: translate(282px, 129px);
  }
}

@keyframes seqBinFly2 {
  0%, 56% {
    transform: translate(232px, 145px);
    opacity: 0;
  }
  59% {
    opacity: 1;
    transform: translate(242px, 137px);
  }
  68% {
    opacity: 1;
    transform: translate(258px, 127px);
  }
  76% {
    opacity: 0.9;
    transform: translate(275px, 128px);
  }
  78%, 100% {
    opacity: 0;
    transform: translate(282px, 129px);
  }
}

@keyframes seqBinFly3 {
  0%, 62% {
    transform: translate(232px, 145px);
    opacity: 0;
  }
  65% {
    opacity: 1;
    transform: translate(242px, 137px);
  }
  74% {
    opacity: 1;
    transform: translate(258px, 127px);
  }
  82% {
    opacity: 0.9;
    transform: translate(275px, 128px);
  }
  84%, 100% {
    opacity: 0;
    transform: translate(282px, 129px);
  }
}

.seq-bin-group.p1 {
  animation: seqBinFly1 8s ease-in-out infinite;
}
.seq-bin-group.p2 {
  animation: seqBinFly2 8s ease-in-out infinite;
}
.seq-bin-group.p3 {
  animation: seqBinFly3 8s ease-in-out infinite;
}

/* Trung tâm C2 nhận tin & xác nhận (70% - 100%) */
@keyframes seqC2RadarSpin {
  0%, 66% { opacity: 0.3; transform: rotate(0deg); }
  70%, 96% { opacity: 0.95; transform: rotate(360deg); }
  100% { opacity: 0.3; transform: rotate(360deg); }
}
.seq-c2-radar {
  transform-origin: 0 -17px;
  animation: seqC2RadarSpin 8s linear infinite;
}

@keyframes seqC2Confirmed {
  0%, 68% { fill: #64748B; opacity: 0.4; }
  72%, 98% { fill: #00E676; opacity: 1; filter: drop-shadow(0 0 7px #00E676); }
  100% { fill: #64748B; opacity: 0.4; }
}
.seq-c2-status-dot {
  animation: seqC2Confirmed 8s ease-in-out infinite;
}
.seq-c2-alert-text {
  animation: seqC2Confirmed 8s ease-in-out infinite;
}






/* =========================================
   MÔ PHỎNG CARD 02: 3 CAMERA ICU Ở 3 GÓC VÙNG NƯỚC, TUẦN TRA VÀ BÁO VỀ CHỈ HUY (chu kỳ 12s)
   Vùng nước là tam giác (tip trái, tip dưới, tâm bệ); mỗi camera đứng ở 1 đỉnh, chùm quét hướng theo phân giác
   góc trong và xoay qua lại liên tục (tuần tra). Tàu đi vào vùng nước: camera nào có tàu trong sector thì chuyển
   từ tuần tra sang khóa theo tàu, bật sóng 4G, tia dữ liệu về C2 và đèn kênh C2 tương ứng sáng.
   Góc khóa đã tính từ quỹ đạo tàu: A 14-36%, giữa 34-58%, dưới 58-84%.
========================================= */
.cm-beam { transform: rotate(0deg) }
.cm-ship { opacity: 0; animation: cmShip 12s linear infinite }
@keyframes cmShip {
  0% { transform: translate(88px, 155.5px); opacity: 0 }
  6% { transform: translate(95px, 159px); opacity: 1 }
  32% { transform: translate(140px, 172.5px); opacity: 1 }
  58% { transform: translate(170px, 197.5px); opacity: 1 }
  84% { transform: translate(180px, 207.5px); opacity: 1 }
  92% { transform: translate(184px, 210px); opacity: 0 }
  100% { transform: translate(186px, 211px); opacity: 0 }
}
.cm-ret { opacity: 0; animation: cmRet 12s ease-in-out infinite }
@keyframes cmRet { 0%, 12% { opacity: 0 } 15%, 83% { opacity: 1 } 88%, 100% { opacity: 0 } }
.cm-ret-ring { transform-box: fill-box; transform-origin: center; animation: cmSpin 2.4s linear infinite }
@keyframes cmSpin { to { transform: rotate(360deg) } }

@keyframes cmBeam_a { 0% { transform: rotate(-14deg) } 8% { transform: rotate(14deg) } 14% { transform: rotate(0.9deg) } 18% { transform: rotate(2.0deg) } 22% { transform: rotate(2.7deg) } 26% { transform: rotate(3.4deg) } 30% { transform: rotate(3.9deg) } 34% { transform: rotate(5.6deg) } 36% { transform: rotate(7.0deg) } 45% { transform: rotate(-14deg) } 57% { transform: rotate(14deg) } 69% { transform: rotate(-14deg) } 81% { transform: rotate(14deg) } 93% { transform: rotate(-14deg) } 100% { transform: rotate(-14deg) } }
.cm-beam.cm-a { animation: cmBeam_a 12s ease-in-out infinite }
@keyframes cmLens_a { 0% { transform: translate(-3.50px, -1.54px) } 8% { transform: translate(3.50px, 1.54px) } 14% { transform: translate(0.23px, 0.10px) } 18% { transform: translate(0.50px, 0.22px) } 22% { transform: translate(0.68px, 0.30px) } 26% { transform: translate(0.85px, 0.37px) } 30% { transform: translate(0.97px, 0.43px) } 34% { transform: translate(1.40px, 0.62px) } 36% { transform: translate(1.75px, 0.77px) } 45% { transform: translate(-3.50px, -1.54px) } 57% { transform: translate(3.50px, 1.54px) } 69% { transform: translate(-3.50px, -1.54px) } 81% { transform: translate(3.50px, 1.54px) } 93% { transform: translate(-3.50px, -1.54px) } 100% { transform: translate(-3.50px, -1.54px) } }
.cm-lens.cm-a { animation: cmLens_a 12s ease-in-out infinite }
@keyframes cmTx_a { 0%, 15% { opacity: 0 } 17%, 36% { opacity: 1 } 38%, 100% { opacity: 0 } }
.cm-tx.cm-a { opacity: 0; animation: cmTx_a 12s ease-in-out infinite }
@keyframes cmLink_a { 0%, 16% { opacity: 0 } 18%, 38% { opacity: 1 } 40%, 100% { opacity: 0 } }
.cm-link.cm-a { opacity: 0; animation: cmDash .9s linear infinite, cmLink_a 12s linear infinite }
@keyframes cmCh_a { 0%, 22% { fill: #475569; opacity: .45 } 24%, 42% { fill: #00E676; opacity: 1; filter: drop-shadow(0 0 5px #00E676) } 44%, 100% { fill: #475569; opacity: .45 } }
.cm-ch.cm-a { fill: #475569; opacity: .45; animation: cmCh_a 12s ease-in-out infinite }
@keyframes cmBeam_c { 0% { transform: rotate(-30deg) } 11% { transform: rotate(30deg) } 22% { transform: rotate(-30deg) } 34% { transform: rotate(26.1deg) } 38% { transform: rotate(18.7deg) } 42% { transform: rotate(11.7deg) } 46% { transform: rotate(5.3deg) } 50% { transform: rotate(-0.4deg) } 54% { transform: rotate(-5.5deg) } 58% { transform: rotate(-10.0deg) } 67% { transform: rotate(-30deg) } 79% { transform: rotate(30deg) } 91% { transform: rotate(-30deg) } 100% { transform: rotate(-30deg) } }
.cm-beam.cm-c { animation: cmBeam_c 12s ease-in-out infinite }
@keyframes cmLens_c { 0% { transform: translate(-3.50px, -1.54px) } 11% { transform: translate(3.50px, 1.54px) } 22% { transform: translate(-3.50px, -1.54px) } 34% { transform: translate(3.05px, 1.34px) } 38% { transform: translate(2.18px, 0.96px) } 42% { transform: translate(1.36px, 0.60px) } 46% { transform: translate(0.62px, 0.27px) } 50% { transform: translate(-0.05px, -0.02px) } 54% { transform: translate(-0.64px, -0.28px) } 58% { transform: translate(-1.17px, -0.51px) } 67% { transform: translate(-3.50px, -1.54px) } 79% { transform: translate(3.50px, 1.54px) } 91% { transform: translate(-3.50px, -1.54px) } 100% { transform: translate(-3.50px, -1.54px) } }
.cm-lens.cm-c { animation: cmLens_c 12s ease-in-out infinite }
@keyframes cmTx_c { 0%, 35% { opacity: 0 } 37%, 58% { opacity: 1 } 60%, 100% { opacity: 0 } }
.cm-tx.cm-c { opacity: 0; animation: cmTx_c 12s ease-in-out infinite }
@keyframes cmLink_c { 0%, 36% { opacity: 0 } 38%, 60% { opacity: 1 } 62%, 100% { opacity: 0 } }
.cm-link.cm-c { opacity: 0; animation: cmDash .9s linear infinite, cmLink_c 12s linear infinite }
@keyframes cmCh_c { 0%, 42% { fill: #475569; opacity: .45 } 44%, 62% { fill: #00E676; opacity: 1; filter: drop-shadow(0 0 5px #00E676) } 64%, 100% { fill: #475569; opacity: .45 } }
.cm-ch.cm-c { fill: #475569; opacity: .45; animation: cmCh_c 12s ease-in-out infinite }
@keyframes cmBeam_b { 0% { transform: rotate(-14deg) } 8% { transform: rotate(14deg) } 16% { transform: rotate(-14deg) } 24% { transform: rotate(14deg) } 32% { transform: rotate(-14deg) } 40% { transform: rotate(14deg) } 48% { transform: rotate(-14deg) } 58% { transform: rotate(-5.9deg) } 62% { transform: rotate(-6.1deg) } 66% { transform: rotate(-6.3deg) } 70% { transform: rotate(-6.5deg) } 74% { transform: rotate(-6.8deg) } 78% { transform: rotate(-7.2deg) } 82% { transform: rotate(-7.7deg) } 84% { transform: rotate(-8.0deg) } 93% { transform: rotate(-14deg) } 100% { transform: rotate(-14deg) } }
.cm-beam.cm-b { animation: cmBeam_b 12s ease-in-out infinite }
@keyframes cmLens_b { 0% { transform: translate(-3.50px, -1.54px) } 8% { transform: translate(3.50px, 1.54px) } 16% { transform: translate(-3.50px, -1.54px) } 24% { transform: translate(3.50px, 1.54px) } 32% { transform: translate(-3.50px, -1.54px) } 40% { transform: translate(3.50px, 1.54px) } 48% { transform: translate(-3.50px, -1.54px) } 58% { transform: translate(-1.48px, -0.65px) } 62% { transform: translate(-1.52px, -0.67px) } 66% { transform: translate(-1.57px, -0.69px) } 70% { transform: translate(-1.62px, -0.71px) } 74% { transform: translate(-1.70px, -0.75px) } 78% { transform: translate(-1.80px, -0.79px) } 82% { transform: translate(-1.93px, -0.85px) } 84% { transform: translate(-2.00px, -0.88px) } 93% { transform: translate(-3.50px, -1.54px) } 100% { transform: translate(-3.50px, -1.54px) } }
.cm-lens.cm-b { animation: cmLens_b 12s ease-in-out infinite }
@keyframes cmTx_b { 0%, 59% { opacity: 0 } 61%, 84% { opacity: 1 } 86%, 100% { opacity: 0 } }
.cm-tx.cm-b { opacity: 0; animation: cmTx_b 12s ease-in-out infinite }
@keyframes cmLink_b { 0%, 60% { opacity: 0 } 62%, 86% { opacity: 1 } 88%, 100% { opacity: 0 } }
.cm-link.cm-b { opacity: 0; animation: cmDash .9s linear infinite, cmLink_b 12s linear infinite }
@keyframes cmCh_b { 0%, 66% { fill: #475569; opacity: .45 } 68%, 88% { fill: #00E676; opacity: 1; filter: drop-shadow(0 0 5px #00E676) } 90%, 100% { fill: #475569; opacity: .45 } }
.cm-ch.cm-b { fill: #475569; opacity: .45; animation: cmCh_b 12s ease-in-out infinite }
@keyframes cmDash { to { stroke-dashoffset: -14 } }
.cm-radar { transform-box: fill-box; transform-origin: center; animation: cmRadar 3s linear infinite }
@keyframes cmRadar { 0%, 100% { opacity: .25 } 50% { opacity: .8 } }
.cm-top, .cm-led { animation: cmBlink 1.2s steps(2) infinite }
@keyframes cmBlink { 50% { opacity: .25 } }

/* =========================================
   MÔ PHỎNG CARD 03: PHẦN MỀM TÍCH HỢP DỮ LIỆU HIỆN TRƯỜNG (chu kỳ 8s)
   4-32%: camera, ra đa, phao thủy âm gửi dữ liệu về bàn máy tính
   28-50%: laptop và máy chủ xử lý (màn hình sáng rực)
   46-69%: phần mềm gửi dữ liệu tổng hợp sang trung tâm chỉ huy
   62-95%: chảo xoay căn chỉnh, đèn C2 xanh xác nhận
========================================= */
.sw-link { opacity: .55; animation: swFlow 1.6s linear infinite }
@keyframes swFlow { to { stroke-dashoffset: -16 } }

.sw-ring { animation: swRing 3.5s ease-in-out infinite }
@keyframes swRing { 0%, 100% { opacity: .4 } 50% { opacity: .95 } }

.sw-pkt { opacity: 0; filter: drop-shadow(0 0 4px #F5A623); animation: 8s linear infinite }
.sw-pkt.pa { animation-name: swPkt_pa }
.sw-pkt.pb { animation-name: swPkt_pb }
.sw-pkt.pc { animation-name: swPkt_pc }
.sw-pkt.pd { animation-name: swPkt_pd }
.sw-pkt.pe { animation-name: swPkt_pe }

@keyframes swPkt_pa { 0%, 4% { transform: translate(98px, 146px); opacity: 0 } 5% { opacity: 1 } 19% { opacity: 1 } 20%, 100% { transform: translate(152px, 160px); opacity: 0 } }
@keyframes swPkt_pb { 0%, 10% { transform: translate(126px, 118px); opacity: 0 } 11% { opacity: 1 } 25% { opacity: 1 } 26%, 100% { transform: translate(152px, 160px); opacity: 0 } }
@keyframes swPkt_pc { 0%, 16% { transform: translate(130px, 176px); opacity: 0 } 17% { opacity: 1 } 31% { opacity: 1 } 32%, 100% { transform: translate(152px, 160px); opacity: 0 } }
@keyframes swPkt_pd { 0%, 46% { transform: translate(212px, 152px); opacity: 0 } 47% { opacity: 1 } 61% { opacity: 1 } 62%, 100% { transform: translate(254px, 148px); opacity: 0 } }
@keyframes swPkt_pe { 0%, 53% { transform: translate(212px, 152px); opacity: 0 } 54% { opacity: 1 } 68% { opacity: 1 } 69%, 100% { transform: translate(254px, 148px); opacity: 0 } }

.sw-laptop { animation: swLaptop 8s ease-in-out infinite }
.sw-laptop.l2 { animation-delay: .25s }
.sw-laptop.l3 { animation-delay: .5s }
@keyframes swLaptop {
  0%, 26% { filter: drop-shadow(0 0 2px rgba(255, 215, 64, .5)) }
  32%, 48% { filter: drop-shadow(0 0 9px rgba(255, 215, 64, 1)) }
  56%, 100% { filter: drop-shadow(0 0 2px rgba(255, 215, 64, .5)) }
}

.sw-dish { transform-box: fill-box; transform-origin: center; animation: swDish 8s ease-in-out infinite }
@keyframes swDish { 0%, 60% { transform: rotate(0deg) } 68%, 88% { transform: rotate(-14deg) } 96%, 100% { transform: rotate(0deg) } }

.sw-c2 { animation: swC2 8s ease-in-out infinite }
@keyframes swC2 {
  0%, 66% { fill: #475569; opacity: .4 }
  72%, 94% { fill: #00E676; opacity: 1; filter: drop-shadow(0 0 6px #00E676) }
  100% { fill: #475569; opacity: .4 }
}

.sw-spin, .sw-ripple { transform-box: fill-box; transform-origin: center }
.sw-spin { animation: swSpin 2.4s ease-in-out infinite }
@keyframes swSpin { 0%, 100% { transform: scaleX(1) } 50% { transform: scaleX(-1) } }

.sw-ripple { animation: swRipple 2.4s ease-out infinite }
.sw-ripple.r2 { animation-delay: 1.2s }
@keyframes swRipple { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(1.6); opacity: 0 } }

.sw-fov { opacity: .12; animation: swFov 2.4s ease-in-out infinite }
@keyframes swFov { 50% { opacity: .3 } }

.sw-blink { animation: swBlink 1.2s steps(2) infinite }
@keyframes swBlink { 50% { opacity: .2 } }

/* Responsive */
@media (max-width: 1040px) {
  .tc-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
  }
}

@media (max-width: 680px) {
  .tc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tc-col {
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-sim-svg *, .tc-drone-swarm, .tc-tactical-box {
    animation: none !important;
  }
}


/* ===== Chuẩn hóa heading + mô tả section (2026-11-06) =====
   Quy tắc: h2.sec-h luôn có cỡ chuẩn (h2 gốc), ngay sau là p.sec-lead (mô tả section, cỡ lớn hơn chữ thân).
   Mô tả sản phẩm trong card nhỏ hơn hẳn (.9-1rem) nên không lẫn với mô tả section.
   Căn giữa mọi section; riêng .ng-sec (chữ nằm trên ảnh nền) căn trái. Slot .sec-lead rỗng tự ẩn. */
.sec-h {
  margin: 0 0 14px
}

.sec-lead {
  max-width: 64ch;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6
}

.sec-lead:empty {
  display: none
}

.section-head,
.dm-head,
.ud-head,
.tc-head,
.gs-head {
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 44px)
}

.ng-sec .section-head {
  text-align: left
}

.ng-sec .sec-lead {
  margin-left: 0
}

#uav .sec-h {
  color: #FFFFFF
}

#uav .sec-lead {
  color: #94A3B8
}

.gs-head .sec-lead {
  color: var(--blue)
}

@media (max-width:640px) {
  .sec-lead {
    font-size: 1rem
  }
}

/* Demo mô tả (2026-11-06): .final và #thoi-gian có nền khác, chỉnh màu mô tả cho đọc được */

#thoi-gian .sec-lead {
  padding-bottom: 8px
}


/* ===== .final: slogan khoét lộ video (2026-11-06) =====
   Lớp chữ nền trắng + chữ đen, mix-blend-mode:lighten phủ lên video: chỗ trắng giữ trắng, chỗ chữ đen để lộ video bên dưới.
   Chưa có video (assets/video/measuring-everything.mp4) thì lộ gradient xanh chuyển động ở .final. */
.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(420px, 78svh, 860px);
  padding: 0;
  background: linear-gradient(120deg, #0B3A66, #146EB4, #072340, #FF9900 140%) 0 0 / 300% 300%;
  animation: final-bg 14s ease-in-out infinite alternate
}

@keyframes final-bg {
  to {
    background-position: 100% 100%
  }
}

.final-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.final-slogan {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  mix-blend-mode: lighten;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none
}

/* Chữ SVG (đo viewBox bằng JS để vừa khít). Mặc định tô đặc đen = khoét lộ video. */
.fs-svg {
  display: block;
  width: 100%;
  max-height: 100%;
  height: auto;
  overflow: visible
}

.fs-svg text {
  font-family: 'Be Vietnam Pro', var(--font), system-ui, sans-serif;
  font-weight: 900;
  font-size: 200px;
  letter-spacing: -6px;
  fill: var(--fs-c, #000);
  stroke: var(--fs-c, #000);
  stroke-width: 3px;
  stroke-linejoin: round
}

/* Hiệu ứng vẽ chữ: JS thêm .fs-ready (ẩn chữ, nét chưa vẽ), rồi .is-draw khi section tới gần.
   Nét vẽ đen cũng lộ video bên dưới; sau đó chữ tô đặc. */
.fs-ready .fs-svg text {
  fill: transparent;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000
}

.fs-ready.is-draw .fs-svg text {
  animation: fs-draw 1.8s cubic-bezier(.65, 0, .35, 1) forwards, fs-fill .9s ease 1.5s forwards
}

.fs-ready.is-draw .fs-svg .fs-l2 {
  animation-delay: .45s, 1.95s
}

@keyframes fs-draw {
  to {
    stroke-dashoffset: 0
  }
}

@keyframes fs-fill {
  to {
    fill: var(--fs-c, #000)
  }
}

@media (prefers-reduced-motion:reduce) {
  .final {
    animation: none
  }

  .fs-ready .fs-svg text,
  .fs-ready.is-draw .fs-svg text {
    animation: none;
    fill: var(--fs-c, #000);
    stroke-dashoffset: 0
  }
}


/* ===== B5 #danh-muc: grid fill, cân scale (2026-11-06) =====
   - Mọi ảnh nằm trong cùng một khung (.dm-card-img-wrap img: 100% x 100%, contain) nên sản phẩm lấp đầy khung theo cạnh giới hạn, không "thằng to thằng nhỏ".
   - Card cao (.dm-card-2) cho ảnh dùng cả chiều cao thay vì co giữa.
   - Nền xanh nhạt có quầng sáng sau sản phẩm + lưới kỹ thuật mờ, thay nền trắng rời rạc. Chỉ CSS; ảnh nền riêng do người dùng cấp sau. */
.dm-card {
  border-color: #CFDCEA;
  background: #E3EDF7
}

.dm-card-img-wrap {
  padding: clamp(20px, 2.2vw, 36px) clamp(20px, 2.2vw, 36px) 88px;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(rgba(20, 110, 180, .06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(20, 110, 180, .06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #EAF2FA 0%, #D3E3F2 100%)
}

.dm-card-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(7, 35, 64, .18))
}

.dm-card:hover .dm-card-img-wrap img {
  transform: scale(1.05)
}

/* Ảnh thumb gốc tối đa 480px: chặn phóng quá ~1.2x để không mờ */
.dm-card-img-wrap img {
  max-width: 580px;
  max-height: 580px
}

/* ===== Chuẩn hóa padding, container, cỡ chữ (2026-11-06) =====
   Một thang: padding dọc --sec-y; lề ngang --gutter; h3 tên mục --h3; mô tả card --card-p.
   Xóa khối này để quay về trạng thái trước. */
:root {
  --gutter: clamp(24px, 4vw, 64px);
  --h3: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  --card-p: 1rem
}

/* Padding dọc */
.gs-sec {
  padding: var(--sec-y) 0
}

#uav.tc-sec {
  padding: var(--sec-y) 0
}

.ud-sec {
  padding: var(--sec-y) 0
}

.ud-head {
  padding-bottom: clamp(32px, 3.5vw, 48px)
}

/* Lề ngang thống nhất */
#uav .wrap,
#quan-sat-3 .wrap,
#nguy-trang .wrap,
#tong-quan .wrap,
#danh-muc .wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter)
}

/* h3 tên mục */
.tg-item h3,
.qs-info h3,
.gains h3,
.dm-card-title,
.tc-card-title,
.ud-cap h3 {
  font-size: var(--h3)
}

/* Mô tả trong card */
.dm-card-desc,
.ud-cap p,
.tc-card-desc,
.gains p,
.tg-cap>p {
  font-size: var(--card-p)
}

#q3-title,
#ng-title {
  color: var(--orange)
}

/* #quan-sat-3: nút trước/sau nằm 2 bên hàng card */
.q3-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(760px + 112px)
}

.q3-row .q3-cards {
  flex: 1 1 0;
  min-width: 0;
  width: auto
}

.q3-nav {
  display: contents
}

.q3-nav button {
  flex: none;
  margin: 0
}

.q3-nav button:first-child {
  order: -1
}

.q3-nav button:last-child {
  order: 1
}

/* #quan-sat-3: nền như #nguy-trang (ảnh phủ toàn section, không nền màu, không lớp phủ gradient) */
#quan-sat-3 {
  background: none
}

#quan-sat-3 .ng-bg figure,
#quan-sat-3 .ng-bg figure:nth-child(even) {
  background: none
}

#quan-sat-3 .ng-bg::after,
.q3-sec .ng-bg::after {
  display: none
}

/* #nguy-trang: tab thiết bị luôn 1 dòng (desktop); mobile cho phép xuống dòng */
@media (min-width:641px) {
  .ng-tabs {
    flex-wrap: nowrap;
    gap: 8px clamp(16px, 2vw, 32px)
  }

  #nguy-trang .ng {
    max-width: 720px
  }

  .ng-tabs button {
    white-space: nowrap;
    font-size: clamp(.875rem, .8rem + .3vw, 1rem)
  }
}

/* #uav: nhãn 3 giải pháp to hơn (trước 1rem); ô số to theo, vẫn 1 dòng trong cột */
.tc-step-header {
  gap: 14px
}

.tc-step-label {
  font-size: clamp(1.2rem, 1rem + .75vw, 1.6rem);
  line-height: 1.25
}

.tc-step-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-size: 1rem
}

/* Hiệu ứng "đè lên": cuộn hết #uav thì #ung-dung trượt lên che #uav.
   #uav ghim (sticky) khi đáy của nó chạm đáy màn hình; top âm = chiều cao màn hình - chiều cao #uav (JS đặt --cover-top).
   Chỉ bật khi JS thêm .cover-on, nên không có JS thì 2 section xếp dọc bình thường (không mất nội dung). */
.cover-pair {
  position: relative;
  overflow-x: clip
}

.cover-on #uav {
  position: sticky;
  top: var(--cover-top, 0px);
  z-index: 0
}

/* Chuyển section theo TẦNG (mỗi lúc chỉ một thứ đổi, tránh chữ trắng mờ trên nền xám):
   p 0-40%: chữ và mô phỏng của #uav mờ đi (opacity); p 30-100%: nền đen chuyển sang trắng, ease-in (đầu chậm, cuối nhanh).
   Đường dự phòng (trình duyệt chưa có scroll-driven animation): --cover-p do JS đặt, 0 đến 1. Không còn scale. */
.cover-on #uav>.wrap {
  opacity: calc(1 - min(1, var(--cover-p, 0) / .4))
}

.cover-on #uav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  --q: clamp(0, calc((var(--cover-p, 0) - .3) / .7), 1);
  --mw: clamp(0, calc((var(--cover-p, 0) - .55) / .45), 1);
  /* Màu đi qua NAVY thương hiệu: đen sang navy #0B3A66 sang trắng (không qua xám đục) */
  background-color: color-mix(in srgb, #fff calc(var(--mw) * 100%), #0B3A66);
  opacity: calc(var(--q) * var(--q) * .96);
  pointer-events: none
}

/* Quầng sáng "bao" mép trên #ung-dung: tỏa lên che nền #uav, đậm dần theo --cover-p, đẩy #ung-dung nổi lên */
.cover-on #ung-dung::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2px);
  height: clamp(220px, 55svh, 520px);
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .4) 40%, rgba(255, 255, 255, 0) 75%);
  opacity: min(1, calc(var(--cover-p, 0) * 1.6));
  transform: translateY(calc((1 - var(--cover-p, 0)) * 40px));
  pointer-events: none;
  z-index: -1
}

.cover-on #ung-dung::before {
  box-shadow: 0 0 calc(var(--cover-p, 0) * 36px) calc(var(--cover-p, 0) * 6px) rgba(255, 153, 0, .55)
}

.cover-on #ung-dung {
  position: relative;
  z-index: 1;
  box-shadow: 0 -40px 80px rgba(0, 0, 0, .65)
}

@media (prefers-reduced-motion:reduce) {
  .cover-on #uav {
    position: relative;
    top: auto
  }
}

/* #ung-dung: hover/focus card thì card đó mở rộng theo chiều ngang, 2 card còn lại thu hẹp (chỉ desktop có hover) */
@media (hover:hover) and (min-width:821px) {
  .ud-col {
    transition: flex-grow .55s cubic-bezier(.45, 0, .15, 1)
  }

  .ud-col:hover,
  .ud-col:focus-within {
    flex-grow: 1.5
  }

  /* Ảnh giữ NGUYÊN cỡ (rộng bằng cột khi mở, căn giữa): cột mở ra chỉ để lộ thêm 2 bên, không phóng ảnh */
  .ud-col img {
    inset: 0 auto 0 50%;
    width: 43vw;
    max-width: none;
    transform: translateX(-50%) !important
  }

  /* Chữ chỉ hiện SAU khi cột mở xong (trễ = thời gian mở 1s); rời chuột thì tắt ngay */
  .ud-col:hover .ud-cap,
  .ud-col:focus-within .ud-cap {
    transition: opacity .4s ease .55s
  }

  .ud-col:not(:hover):not(:focus-within) .ud-cap {
    transition: opacity .2s ease 0s
  }
}

@media (prefers-reduced-motion:reduce) {

  .ud-col,
  .ud-col .ud-cap {
    transition: none !important
  }
}

/* Bỏ zoom-in ảnh khi hover (mọi màn hình) */
.ud-col:hover img,
.ud-col:focus-within img {
  transform: none
}

/* #quan-sat-3: đổi chữ kiểu thay thế (cũ mờ ra, mới hiện vào cùng lúc, không trễ), thay animation trễ .8s */
.q3-sec .ng-pane {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s .35s
}

.q3-sec .ng-pane.on {
  opacity: 1;
  transform: none;
  transition: opacity .35s ease, transform .35s ease, visibility 0s 0s
}

.q3-sec .ng-pane.on>* {
  animation: none
}

@media (prefers-reduced-motion:reduce) {
  .q3-sec .ng-pane,
  .q3-sec .ng-pane.on {
    transition: none
  }
}

/* #ung-dung: khoảng heading đến lưới đồng bộ #danh-muc/#thoi-gian (chỉ margin-bottom của nhóm .ud-head, bỏ padding-bottom cộng đôi) */
.ud-head,
.ud-head.wrap {
  padding-bottom: 0
}

/* #thoi-gian: padding và khoảng heading đến lưới đồng bộ #danh-muc (trước: đệm 1.4x --sec-y trên/dưới, heading cách lưới ~42-62px) */
#thoi-gian {
  padding: var(--sec-y) 0
}

#thoi-gian .section-head {
  padding: 0;
  margin: 0 0 clamp(24px, 2.5vw, 36px)
}

#thoi-gian h2 {
  margin: 0
}

/* ===== Đường chính: CSS scroll-driven animation (chạy trên compositor, không cần JS mỗi khung hình) =====
   Mốc theo vh: top của #ung-dung ở 80% màn hình = cover 20vh (p=0); chạm đỉnh = cover 100vh (p=1).
   Liên quan JS: hằng COVER_START=.8 ở cuối js/main.js (1 - .8 = 20vh). Đổi 1 chỗ thì đổi cả 2. */
@supports (animation-timeline: view()) and (timeline-scope: --cover) {
  @media (prefers-reduced-motion:no-preference) {
    .cover-pair {
      timeline-scope: --cover
    }

    .cover-on #ung-dung {
      view-timeline: --cover block
    }

    .cover-on #uav>.wrap {
      opacity: 1;
      animation: covFade linear both;
      animation-timeline: --cover;
      animation-range: cover 20vh cover 52vh
    }

    .cover-on #uav::before {
      opacity: 0;
      background-color: color-mix(in srgb, #fff var(--mx), #0B3A66);
      animation: covWhite cubic-bezier(.55, .06, .68, .19) both, covMix linear both;
      animation-timeline: --cover, --cover;
      animation-range: cover 44vh cover 100vh, cover 64vh cover 100vh
    }

    .cover-on #ung-dung::after {
      opacity: 0;
      transform: translateY(40px);
      animation: covGlow ease-out both;
      animation-timeline: --cover;
      animation-range: cover 20vh cover 70vh
    }

    .cover-on #ung-dung::before {
      animation: covEdge linear both;
      animation-timeline: --cover;
      animation-range: cover 20vh cover 100vh
    }
  }
}

@property --mx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%
}

@keyframes covMix { from { --mx: 0% } to { --mx: 100% } }
@keyframes covFade { from { opacity: 1 } to { opacity: 0 } }
@keyframes covWhite { from { opacity: 0 } to { opacity: .96 } }
@keyframes covGlow { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: none } }
@keyframes covEdge { from { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0) } to { box-shadow: 0 0 36px 6px rgba(255, 153, 0, .55) } }

/* #quan-sat-3: gạch cam dưới tên sản phẩm chỉ dài bằng chữ (xóa khối để hoàn tác) */
#q3Info h3 {
  display: block;
  width: fit-content;
  max-width: 100%
}

/* Hero tablet (641-1024px): min-height 50svh, theo người dùng 2026-11-07 */
@media (min-width:641px) and (max-width:1024px) {
  .hero {
    min-height: 50vh;
    min-height: 50svh
  }
}

/* #gioi-thieu tablet (641-1024px): min-height 38svh, theo người dùng 2026-11-07 */
@media (min-width:641px) and (max-width:1024px) {
  #gioi-thieu.final {
    min-height: 38vh;
    min-height: 38svh
  }
}