/* ============================================================================
   TECOTEC Group - CSS riêng cho Trang chủ (template-home.php)
   Tách khỏi assets/css/main.css: các khối dưới đây chỉ dùng trên trang chủ,
   không dùng chung với template nào khác. Component dùng chung (cards, bento,
   section--dark, marks, form, split, close, v.v.) vẫn ở main.css.
   ========================================================================== */

/* Trang chủ - giới thiệu TECOTEC: sticky storytelling, mỗi quãng cuộn đổi
   đồng bộ nội dung và ảnh. CTA đứng yên trong suốt section. */
.home-about {
  position: relative;
  height: calc(var(--about-count, 2) * 100dvh);
  background: var(--paper);
  isolation: isolate;
}

.home-about__sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
  overflow: hidden;
}

.home-about__inner {
  position: relative;
  height: 100%;
  padding-block: clamp(36px, 5vw, 72px)
}

.home-about__slides {
  position: relative;
  width: 100%;
  height: 100%
}

.home-about__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  pointer-events: none;
}

.home-about__text {
  max-width: 620px;
  opacity: 0;
  transform: translateY(22px)
}

.home-about__text h2 {
  font-size: 1.6rem
}

.home-about__text p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: .875rem;
  max-width: 58ch
}

.home-about__media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 585/365;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.home-about__media .slot {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: translateY(100%);
  transition: transform .7s var(--ease);
}

.home-about__slide:nth-child(1) .home-about__media {
  z-index: 1
}

.home-about__slide:nth-child(2) .home-about__media {
  z-index: 2
}

.home-about__text {
  transition: opacity .52s var(--ease), transform .7s var(--ease)
}

.home-about__slide.is--active {
  pointer-events: auto
}

.home-about__slide.is--active .home-about__text {
  opacity: 1;
  transform: none
}

.home-about__slide.is--active .home-about__media .slot {
  transform: none
}

.home-about__slide.is--past .home-about__text {
  opacity: 0;
  transform: translateY(-22px)
}

.home-about__slide.is--past .home-about__media .slot {
  transform: translateY(-100%)
}

.home-about__cta {
  margin-top: 24px
}

.home-about__steps {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--about-count, 2), 1fr);
  pointer-events: none;
}

.home-about__steps>span {
  display: block
}

@media (max-width:900px) {
  .home-about {
    height: auto
  }

  .home-about__sticky {
    position: static;
    height: auto;
    overflow: visible
  }

  .home-about__inner {
    padding-block: clamp(56px, 8vw, 88px)
  }

  .home-about__slides {
    height: auto;
    display: grid;
    gap: 56px
  }

  .home-about__slide {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    pointer-events: auto;
  }

  .home-about__text {
    max-width: 680px;
    padding-bottom: 0;
    opacity: 1;
    transform: none
  }

  .home-about__media {
    opacity: 1;
    transform: none;
    transition: none
  }

  .home-about__media .slot {
    transform: none;
    transition: none
  }

  .home-about__cta {
    margin-top: 24px
  }

  .home-about__steps {
    display: none
  }
}

@media (max-width:560px) {
  .home-about__slides {
    gap: 48px
  }
}

@media (prefers-reduced-motion:reduce) {
  .home-about {
    height: auto
  }

  .home-about__sticky {
    position: static;
    height: auto;
    overflow: visible
  }

  .home-about__inner {
    padding-block: clamp(56px, 8vw, 88px)
  }

  .home-about__slides {
    height: auto;
    display: grid;
    gap: 56px
  }

  .home-about__slide {
    position: static;
    display: grid;
    gap: 28px;
    pointer-events: auto
  }

  .home-about__text {
    padding-bottom: 0;
    opacity: 1;
    transform: none;
    transition: none
  }

  .home-about__media {
    opacity: 1;
    transform: none;
    transition: none
  }

  .home-about__media .slot {
    transform: none;
    transition: none
  }

  .home-about__cta {
    margin-top: 24px
  }

  .home-about__steps {
    display: none
  }
}

/* ==========================================================================
   TABS + PANEL (Industry Dashboard, lọc nhóm thiết bị, loại nội dung)
   ========================================================================== */
.dash {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft)
}

.dash__head {
  margin-bottom: clamp(28px, 3.5vw, 44px)
}

.dash__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
  border-block: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.dash__tabs::-webkit-scrollbar {
  display: none
}

.dash__tab {
  appearance: none;
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  min-height: 64px;
  padding: 16px 20px;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-3);
  text-align: left;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .24s var(--ease), background-color .24s var(--ease), box-shadow .24s var(--ease);
}

.dash__tab:last-child {
  border-right: 0
}

.dash__tab:hover {
  color: var(--ink);
  background: var(--paper)
}

.dash__tab:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--orange);
  outline-offset: -2px
}

.dash__tab[aria-selected="true"] {
  color: var(--blue);
  background: var(--paper);
  box-shadow: inset 0 -3px 0 var(--orange);
}

.panel {
  display: none;
  padding-top: clamp(36px, 4.5vw, 60px)
}

.panel[data-active] {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
  gap: clamp(52px, 7vw, 96px);
  align-items: start;
}

.panel h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  max-width: 22ch
}

.panel__lead {
  margin-top: 16px;
  color: var(--ink-2);
  max-width: 52ch
}

.panel__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  margin-top: 34px
}

.panel__col h4 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.panel__col li+li {
  margin-top: 9px
}

.panel__col a {
  font-size: .9375rem;
  color: var(--ink-2);
  transition: color .16s
}

.panel__col a:hover {
  color: var(--blue)
}

.panel__foot {
  margin-top: 34px
}

/* Nhiều bằng chứng dự án được trình bày như một danh sách editorial, không phải card grid. */
.proof-list {
  align-self: start;
  border-top: 1px solid var(--ink)
}

.proof-list__head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.proof-list__head span:last-child {
  color: var(--orange-ink)
}

.proof {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft)
}

.proof .slot {
  width: 112px;
  aspect-ratio: 4/3 !important;
  border: 0;
  border-radius: var(--radius)
}

.proof .slot__label {
  display: none
}

.proof__body {
  min-width: 0;
  padding-top: 1px
}

.proof__body h4 {
  font-size: 1rem;
  line-height: 1.4
}

.proof__body h4 a {
  color: var(--ink);
  transition: color .16s
}

.proof__body h4 a:hover {
  color: var(--blue)
}

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

.proof__meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--ink-3)
}

.proof__meta span {
  display: inline
}

.proof__meta b {
  color: var(--ink-2);
  font-weight: 600
}

@media (max-width:1040px) {
  .panel[data-active] {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .proof-list {
    max-width: 760px
  }
}

@media (max-width:720px) {
  .dash__tabs {
    display: flex;
    margin-inline: -20px;
    padding-inline: 20px;
    border-right: 0
  }

  .dash__tab {
    min-height: 56px;
    padding: 14px 18px
  }

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

  .proof {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px
  }

  .proof .slot {
    width: 96px
  }
}

@media (max-width:440px) {
  .proof {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px
  }

  .proof .slot {
    width: 80px
  }

  .proof__body h4 {
    font-size: .9375rem
  }

  .proof__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px
  }
}

/* ==========================================================================
   RESOURCES - carousel bài viết Trang chủ, 3/2/1 card và chuyển từng bài
   ========================================================================== */
.resources-section {
  background: var(--paper-2);
  border-block: 1px solid var(--line-soft)
}

.resources {
  --resources-full: 4;
  --resources-gap: 14px;
  --resource-card-width: calc((100% - 70px)/5)
}

.resources--full {
  width: 100vw;
  margin-left: calc(50% - 50vw)
}

.resources__viewport {
  overflow: hidden
}

.resources__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--resource-card-width);
  gap: var(--resources-gap);
  transition: transform .55s var(--ease);
  will-change: transform;
}

.resources__item {
  min-width: 0;
  height: 100%
}

.resources__image {
  display: block
}

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

.resources__item .card__body h3 a {
  transition: color .18s var(--ease)
}

.resources__item .card__body h3 a:hover {
  color: var(--blue)
}

.resources__item .card__actions {
  margin-top: auto
}

.resources__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 24px
}

.resources__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 72px
}

.resources__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .18s var(--ease), transform .18s var(--ease)
}

.resources__dot[data-active] {
  background: var(--orange);
  transform: scale(1.45)
}

.resources__control {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.resources__control:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper)
}

.resources__control:active:not(:disabled) {
  transform: translateY(1px)
}

.resources__control:disabled {
  border-color: var(--line);
  color: var(--ink-3);
  background: transparent;
  cursor: not-allowed;
  opacity: .52
}

@media (max-width:1040px) {
  .resources {
    --resources-full: 2;
    --resource-card-width: calc((100% - 42px)/3)
  }
}

@media (max-width:680px) {
  .resources {
    --resources-full: 1;
    --resource-card-width: calc((100% - 28px)/2)
  }
}

/* ==========================================================================
   COMPARE-ALT - khối "phương án thay thế" đặt cạnh section gốc khi còn đang
   chọn hướng (vd trang-chu.html mục 3B). Không dùng cho trang đã chốt hướng.
   ========================================================================== */
.compare-alt {
  border-top: 1px dashed var(--line)
}

/* ==========================================================================
   ACCIMG - hàng ảnh giãn ra khi hover/focus (accordion ảnh). Dùng lại .slot
   làm lớp ảnh phủ kín + slot__label làm chú thích, chỉ đổi container.
   ========================================================================== */
.accimg {
  display: flex;
  gap: 4px;
  height: 600px
}

.accimg__item {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  transition: flex 0.45s ease-in-out;
  cursor: pointer;
}

.accimg__item .slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0
}

.accimg__item:hover,
.accimg__item:focus-within {
  flex: 1.7
}

.accimg__item:hover .slot__label b,
.accimg__item:focus-within .slot__label b {
  color: var(--orange)
}

@media (max-width:820px) {
  .accimg {
    flex-direction: column;
    height: auto
  }

  .accimg__item {
    flex: none !important;
    height: 200px
  }
}

/* ==========================================================================
   CAPABILITIES - riêng section năng lực trên Trang chủ. Danh sách editorial
   giữ vai trò chính; ảnh là bằng chứng phụ trợ có kích thước giới hạn.
   Không thay đổi .bento vì component đó còn được dùng trên nhiều trang.
   ========================================================================== */
.capabilities {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: start;
}

.capabilities__list {
  list-style: none;
  border-top: 1px solid var(--ink)
}

.capabilities__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line-soft);
}

.capabilities__num {
  padding-top: 3px;
  font-family: "Inter", sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--orange-ink);
}

.capabilities__body h3 {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.35
}

.capabilities__body p {
  margin-top: 8px;
  max-width: 54ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.capabilities__media {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.capabilities__media-main {
  grid-column: 1/-1
}

.capabilities__media .slot {
  width: 100%;
  height: 100%
}

@media (max-width:1040px) {
  .capabilities {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .capabilities__media {
    position: static;
    grid-row: 1;
    grid-template-columns: 1.25fr .75fr .75fr;
  }

  .capabilities__media-main {
    grid-column: auto
  }

  .capabilities__media .slot {
    aspect-ratio: 4/3 !important
  }
}

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

  .capabilities__media-main {
    grid-column: 1/-1
  }

  .capabilities__media-main .slot {
    aspect-ratio: 16/10 !important
  }
}

@media (max-width:440px) {
  .capabilities__item {
    grid-template-columns: 1fr;
    gap: 7px
  }

  .capabilities__num {
    padding-top: 0
  }
}

/* --- Dự án đã triển khai --------------------------------------------------
   Không dùng lưới card đồng cỡ: một dự án được kể đủ (casefeat) rồi bốn dự án
   còn lại nằm trong sổ dự án (caselog) dạng dòng, mỗi dòng là một bản ghi có
   lĩnh vực - tên - khách hàng. Cách này mở rộng tới 5, 8 hay 20 dự án mà không
   phải đổi layout, và giữ được cột khách hàng vốn bị chôn trong card. */
.casefeat {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-card);
  background: var(--dark-2);
  overflow: hidden;
}

.casefeat__media {
  position: relative
}

.casefeat__media .slot {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--dark-line);
}

.casefeat__body {
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}

.casefeat__sector {
  font-family: "Inter", sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange);
}

.casefeat h3 {
  margin-top: 14px;
  font-size: clamp(1.375rem, 2.1vw, 1.8rem);
  line-height: 1.26;
  letter-spacing: -.02em
}

.casefeat h3 a {
  color: #fff
}

.casefeat h3 a:hover {
  color: var(--orange)
}

.casefeat p {
  margin-top: 14px;
  font-size: .9375rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, .74);
  max-width: 52ch
}

.casefeat__facts {
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
}

.casefeat__facts>div {
  min-width: 0
}

.casefeat__facts dt {
  font-family: "Inter", sans-serif;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
}

.casefeat__facts dd {
  margin-top: 5px;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff
}

/* Sổ dự án. Đường kẻ 1px là cấu trúc, không phải viền màu trang trí. */
.caselog {
  list-style: none;
  margin-top: 14px;
  border-top: 1px solid var(--dark-line)
}

.caselog__row {
  border-bottom: 1px solid var(--dark-line)
}

.caselog__row a {
  position: relative;
  display: grid;
  align-items: baseline;
  grid-template-columns: minmax(148px, .85fr) minmax(0, 2.5fr) minmax(132px, .75fr) 20px;
  gap: 10px 28px;
  padding: clamp(20px, 2.2vw, 26px) 4px;
  transition: background-color .3s var(--ease);
}

.caselog__row a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}

.caselog__row a:hover {
  background: rgba(255, 255, 255, .035)
}

.caselog__row a:hover::before,
.caselog__row a:focus-visible::before {
  transform: scaleX(1)
}

.caselog__sector {
  font-family: "Inter", sans-serif;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .56);
}

.caselog__row a:hover .caselog__sector {
  color: var(--orange)
}

.caselog__name {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  display: block
}

.caselog__note {
  display: block;
  margin-top: 6px;
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
  max-width: 60ch
}

.caselog__client {
  font-size: .875rem;
  color: rgba(255, 255, 255, .78)
}

.caselog__client b {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px
}

.caselog__client span {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .54)
}

.caselog__go {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, .4);
  align-self: center;
  transition: transform .34s var(--ease), color .34s var(--ease);
}

.caselog__row a:hover .caselog__go {
  transform: translateX(5px);
  color: var(--orange)
}

@media (max-width:1000px) {
  .caselog__row a {
    grid-template-columns: minmax(132px, .8fr) minmax(0, 2fr) 20px
  }

  .caselog__client {
    grid-column: 2;
    margin-top: 4px
  }

  .caselog__go {
    grid-row: 1
  }
}

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

  .casefeat__media .slot {
    min-height: 0;
    aspect-ratio: 16/10;
    border-right: 0;
    border-bottom: 1px solid var(--dark-line)
  }

  .caselog__row a {
    grid-template-columns: 1fr 20px;
    gap: 8px 16px
  }

  .caselog__sector,
  .caselog__name,
  .caselog__client {
    grid-column: 1
  }

  .caselog__go {
    grid-row: 1;
    grid-column: 2
  }
}

/* Khách hàng và đối tác - lưới liệt kê tên, khác với .marks (lưới logo, dùng chung với Hồ sơ năng lực) */
.clients {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px)
}

.clients--2 {
  grid-template-columns: repeat(2, 1fr)
}

.clients__g h3 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.clients__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center
}

.cword {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink-2)
}

/* Biến thể hẹp: form bản tin ở dải kết trang chủ */
.news {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper-2)
}

.news h3 {
  font-size: 1.125rem
}

.news>p {
  margin-top: 10px;
  font-size: .9375rem;
  color: var(--ink-2)
}

.news button {
  margin-top: 18px;
  width: 100%;
  justify-content: center
}

.news button[data-loading] {
  opacity: .72;
  pointer-events: none
}

.news__ok {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  font-size: .9375rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--ink);
}

.news[data-sent] .news__ok {
  display: block
}

.news[data-sent] form {
  display: none
}

.jobs {
  background: var(--paper-2);
  border-block: 1px solid var(--line-soft)
}

.jobs__in {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center
}

.jobs .slot {
  width: 100%
}

.jobs h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem)
}

.jobs p {
  margin-top: 14px;
  color: var(--ink-2);
  max-width: 52ch
}

.jobs__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px
}

.jobs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px
}

.jobs__open {
  font-size: .9375rem;
  color: var(--ink-2)
}

.jobs__open b {
  color: var(--blue);
  font-family: "Inter", sans-serif
}

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

/* ==========================================================================
   HERO TRANG CHỦ - ảnh nền toàn khung, nội dung đặt giữa màn hình
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2200&q=88") center center / cover no-repeat;
  border-bottom: 1px solid var(--dark-line);
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2, 11, 23, .74), rgba(4, 21, 46, .54) 54%, rgba(8, 43, 91, .46));
}

.hero__in {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.hero__content {
  width: min(100%, 980px);
  text-align: center
}

.hero h1 {
  font-size: clamp(2.75rem, 7.4vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}

.hero__vn {
  margin: 22px auto 0;
  font-size: clamp(1.0625rem, 1.55vw, 1.3125rem);
  color: rgba(255, 255, 255, .88);
  max-width: 76ch;
  line-height: 1.6;
  text-wrap: balance;
}

@media (max-width:900px) {
  .hero__in {
    min-height: calc(100dvh - var(--nav-h));
    padding-top: 44px
  }
}