/* ========== HEADER (Figma: header 198:3286) ========== */
/* Luôn bám đỉnh khi cuộn: trang có banner dùng fixed (ở đầu trang trùng vị trí absolute cũ) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  height: var(--header-height);
  background-image: var(--gradient-header);
  transition: background-color var(--transition), box-shadow var(--transition);
}

/* Trang con (Figma: Giới thiệu 465:7306) — nền đặc, nằm trong luồng, không đè lên hero */
.header--solid {
  position: sticky;
  background-color: var(--color-dark);
  background-image: none;
}

/* Đã cuộn khỏi đầu trang (JS bật class): nền đặc để chữ menu trắng đọc được trên mọi section */
.header.is-sticky {
  background-color: var(--color-dark);
  background-image: none;
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header__logo img {
  width: 204px;
  height: 48px;
}

/* Figma: nhóm menu x 392–1320 (928px). Cố định khung + space-between để bù chênh lệch render chữ 1–3px/mục */
.nav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 928px;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-20) var(--space-16) 0;
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-l);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-neutral);
  transition: color var(--transition);
}

a.nav__link:hover {
  color: var(--color-primary);
}

.nav__link.is-active {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* Figma variant "MENU / active" của mục có submenu: ẩn chevron, mục chỉ rộng bằng gạch chân 70px → cả menu hẹp lại 14px (914px) */
.nav__toggle.is-active img {
  display: none;
}

.nav__list:has(.nav__toggle.is-active) {
  width: 914px;
}

.nav__toggle.is-active {
  min-width: 90px;
}

.nav__link.is-active::after {
  content: '';
  position: absolute;
  top: 48px;
  left: 0;
  width: 70px;
  height: 2px;
  background-color: var(--color-primary);
}

/* ========== SUBMENU "DỊCH VỤ" (Figma: Submenu 132:1083) ========== */
.nav__item--has-sub {
  position: relative;
}

.nav__toggle:hover,
.nav__item--has-sub:hover .nav__toggle,
.nav__item--has-sub.is-open .nav__toggle {
  color: var(--color-primary);
}

/* Figma: khung submenu nằm sát đáy header (cách mục menu 12px), lệch phải 12px so với chữ "Dịch vụ" */
.submenu {
  position: absolute;
  top: calc(100% + var(--space-12));
  left: var(--space-12);
  z-index: var(--z-header);
  width: 304px;
  visibility: hidden;
  background-color: var(--color-white);
  opacity: 0;
  transform: translateY(var(--space-8));
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* Cầu nối 12px để không mất hover khi rê chuột từ menu xuống submenu */
.submenu::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: var(--space-12);
}

.nav__item--has-sub:hover .submenu,
.nav__item--has-sub.is-open .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.submenu__link {
  display: block;
  padding: var(--space-20) var(--space-32);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-submenu);
  white-space: nowrap;
  color: var(--color-gray-800);
  box-shadow: inset 0 -1px 0 var(--color-gray-200); /* stroke Figma nằm trong, không cộng chiều cao (mục cao 65px) */
  transition: background-color var(--transition), color var(--transition);
}

.submenu li:last-child .submenu__link {
  padding-bottom: var(--space-24);
  box-shadow: inset 0 -2px 0 var(--color-dark);
}

/* Figma variant "Sub menu / active": nền xanh nhạt, chữ Bold xanh đậm — dùng cho hover và trang hiện tại */
.submenu__link:hover,
.submenu__link.is-active {
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  background-color: var(--color-submenu-active);
}

/* Trang hiện tại: line-height 26px như Figma (mục cao 66px); hover giữ 25px để không nhảy chiều cao */
.submenu__link.is-active {
  line-height: var(--lh-body-xl);
}

/* ========== MENU HAMBURGER (tablet/mobile) ==========
   Nút theo Figma mobile (594:3249); panel mở, overlay, nút đóng không có trong Figma → tự thiết kế:
   panel trượt từ phải nền navy, "Dịch vụ" xổ xuống dạng accordion */
.header__burger,
.nav__close,
.nav-overlay {
  display: none;
}

@media (max-width: 1279px) {
  /* Nút hamburger: vùng bấm 44×44, 3 vạch canh phải (vạch cuối ngắn) */
  .header__burger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-6);
    width: var(--space-44);
    height: var(--space-44);
    margin-right: calc(-1 * var(--space-2));
    padding-right: var(--space-3);
    cursor: pointer;
  }

  .header__burger-line {
    width: var(--burger-line-w);
    height: var(--space-2);
    background-color: var(--color-white);
  }

  .header__burger-line:last-child {
    width: var(--burger-line-short-w);
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-base);
    display: block;
    visibility: hidden;
    background-color: var(--color-overlay-menu);
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-overlay);
    width: min(var(--menu-panel-width), 85%);
    height: 100vh;
    height: 100dvh;
    padding: var(--space-64) var(--space-24) var(--space-32);
    overflow-y: auto;
    visibility: hidden;
    background-color: var(--color-surface-dark);
    transform: translateX(100%);
    transition: transform var(--transition), visibility var(--transition);
  }

  /* Khi mở: hiện ngay (không trễ visibility) để focus được nút đóng; khi đóng: trễ tới hết hiệu ứng trượt */
  .header.is-menu-open .nav-overlay {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transition);
  }

  .header.is-menu-open .nav {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--transition);
  }

  .nav__close {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-44);
    height: var(--space-44);
    font-size: var(--fs-h6);
    color: var(--color-white);
    cursor: pointer;
  }

  .nav__list,
  .nav__list:has(.nav__toggle.is-active) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
  }

  .nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: var(--space-44);
    padding: var(--space-12) 0;
    box-shadow: inset 0 -1px 0 var(--color-menu-divider);
  }

  /* Gạch chân active của menu ngang → bỏ, chỉ giữ màu vàng */
  .nav__link.is-active::after {
    display: none;
  }

  .nav__toggle.is-active img {
    display: block;
  }

  .nav__toggle img {
    transition: transform var(--transition);
  }

  .nav__item--has-sub.is-open .nav__toggle img {
    transform: rotate(180deg);
  }

  /* Submenu: hết hover-dropdown, chỉ mở khi bấm (accordion) */
  .submenu {
    position: static;
    display: none;
    width: auto;
    visibility: inherit; /* theo panel: panel ẩn thì submenu cũng ẩn */
    background-color: transparent;
    opacity: 1;
    transform: none;
  }

  .submenu::before {
    display: none;
  }

  .nav__item--has-sub.is-open .submenu {
    display: block;
  }

  .submenu__link,
  .submenu li:last-child .submenu__link {
    padding: var(--space-12) var(--space-16);
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
    white-space: normal;
    color: var(--color-neutral);
    box-shadow: inset 0 -1px 0 var(--color-menu-divider);
  }

  .submenu__link:hover,
  .submenu__link.is-active {
    font-weight: var(--fw-medium);
    line-height: var(--lh-body-l);
    color: var(--color-primary);
    background-color: transparent;
  }
}

@media (max-width: 767px) {
  /* Figma mobile: header 75px (bỏ status bar 44px); logo 204×48 cách trái 16, cách đỉnh 15 */
  .header__inner {
    padding-top: var(--space-3);
    padding-left: var(--space-16);
  }
}

body.is-menu-open {
  overflow: hidden;
}

/* ========== HERO ========== */
.hero {
  position: relative;
  z-index: var(--z-overlay);
  height: 706px;
  overflow-x: clip;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 636px;
  object-fit: cover;
}

/* Lớp tối phủ video nền để chữ trắng dễ đọc (cùng vùng với .hero__bg) */
.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 636px;
  background-color: var(--color-overlay-hero);
}

/* Sóng trang trí: Figma rộng 1458.93px, lệch trái 5.65px, tràn xuống section sau 13px */
.hero__wave {
  position: absolute;
  top: 509px;
  left: -5.65px;
  width: calc(100% + 18.93px);
  max-width: none;
  height: 211.263px;
  pointer-events: none;
}

.hero__wave-back {
  opacity: 0.5;
  fill: var(--color-secondary);
}

.hero__wave-front {
  fill: url(#hero-wave-gradient);
}

.hero__wave-stop--start {
  stop-color: var(--color-blue);
}

.hero__wave-stop--end {
  stop-color: var(--color-dark);
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 1029px;
  margin: 0 auto;
  padding-top: 165px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 154px;
  text-align: center;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  color: var(--color-neutral);
}

.hero__desc {
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h6);
  color: var(--color-gray-200);
}

.hero__desc strong {
  font-weight: var(--fw-bold);
}

.hero__actions {
  display: flex;
  gap: var(--space-20);
}

@media (max-width: 1279px) {
  .hero__content {
    width: 100%;
    padding-inline: var(--container-padding);
  }

  .hero__text {
    height: auto;
  }

  .hero__actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Figma mobile: căn trái, tiêu đề 2 dòng bỏ dấu "-", nút 2 hàng đổi chỗ (SX phim lên trước Cho thuê) */
@media (max-width: 767px) {
  /* min-height: chữ xuống dòng thêm ở màn hẹp → hero cao theo nội dung */
  .hero {
    height: auto;
    min-height: 610px;
  }

  .hero__bg,
  .hero__overlay {
    height: 100%;
  }

  /* Sóng thu nhỏ theo bề ngang, đáy lớp trước chạm đáy hero */
  /* Bám đáy hero (thò xuống 6px như Figma) để vẫn đúng chỗ khi hero cao thêm */
  .hero__wave {
    top: auto;
    bottom: calc(var(--space-6) * -1);
    left: 0;
    width: 100%;
    height: 93px;
  }

  .hero__content {
    align-items: flex-start;
    gap: var(--space-22);
    padding-top: 148px;
  }

  .hero__text {
    text-align: left;
  }

  .hero__title-line {
    display: block;
  }

  .hero__title-sep {
    display: none;
  }

  .hero__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l-14);
  }

  .hero__actions {
    justify-content: flex-start;
    gap: var(--space-16);
  }

  .hero__actions .btn:nth-child(3) {
    order: 1;
  }
}

/* ========== ABOUT INTRO ========== */
/* Chiều cao theo Figma (bù chênh lệch line-height Auto vài phần px) */
.about-intro {
  min-height: 547px;
  position: relative;
  z-index: var(--z-base);
  background-image: var(--gradient-blue);
}

.about-intro__inner {
  display: flex;
  align-items: stretch;
  gap: var(--space-60);
  padding-bottom: var(--space-75);
  padding-left: 1px;
}

.about-intro__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 693px;
  flex-shrink: 0;
}

.about-intro__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.about-intro__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  text-transform: uppercase;
  color: var(--color-primary);
}

.about-intro__title-line {
  display: block;
}

.about-intro__highlight {
  color: var(--color-neutral);
}

.about-intro__desc {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h5);
  color: var(--color-gray-200);
}

.about-intro__desc strong {
  font-weight: var(--fw-bold);
}

.about-intro__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24) var(--space-74);
  width: 100%;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.stat__value {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  color: var(--color-primary);
}

.stat__label {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: normal;
  white-space: nowrap;
  color: var(--color-neutral);
}

.about-intro__media {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.about-intro__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1279px) {
  .about-intro__inner {
    flex-direction: column;
    padding-left: var(--container-padding);
  }

  .about-intro__content {
    width: 100%;
  }

  .about-intro__media {
    flex: none;
    aspect-ratio: 400 / 472;
    max-height: 600px;
  }
}

/* Figma mobile: 1 cột chữ → số liệu 2×2 → ảnh dọc 400×472 (crop ảnh desktop) */
@media (max-width: 767px) {
  .about-intro {
    min-height: 0;
  }

  .about-intro__inner {
    gap: var(--space-32);
    padding-top: var(--space-35);
    padding-bottom: var(--about-intro-pb-mobile);
  }

  .about-intro__content {
    gap: var(--space-23);
  }

  .about-intro__intro {
    gap: var(--space-18);
  }

  .about-intro__desc {
    font-size: var(--fs-body-xl);
    line-height: var(--lh-submenu);
  }

  .about-intro__stats {
    gap: var(--space-25) var(--space-46);
  }

  .stat__value {
    font-size: var(--fs-h3);
    line-height: var(--lh-stat-mobile);
  }

  .stat__label {
    font-size: var(--fs-body-l);
  }

  .about-intro__media {
    max-height: none;
  }
}

/* ========== SERVICES ========== */
.services {
  padding: var(--section-py) 0;
  background-color: var(--color-neutral);
}

.services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.services__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.services__desc {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  text-align: center;
  color: var(--color-gray-700);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 379px);
  gap: var(--space-24) var(--space-32);
}

/* Ảnh card 6: Figma dịch ảnh sang trái 5.37% thay vì căn giữa */
.service-card__image--shift {
  object-position: 15.6% center;
}

@media (max-width: 1279px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .services__grid .service-card {
    width: 100%;
  }
}

/* Figma mobile: 6 thẻ xếp 1 cột 400×340, cách 20 */
@media (max-width: 767px) {
  .services__inner {
    gap: var(--space-23);
  }

  .services__head {
    gap: var(--space-13);
  }

  .services__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .services__br {
    display: none;
  }

  .services__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-20);
  }
}

/* ========== CORE VALUES ========== */
/* Figma cao 513.59px, section sau bắt đầu ở y nguyên → làm tròn 514px */
.core-values {
  height: 514px;
  padding: var(--section-py) 0;
  background: url('../images/bg-dark-pattern.webp') center / cover no-repeat;
}

.core-values__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.core-values__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.core-values__slogan {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  text-align: right;
  white-space: nowrap;
  color: var(--color-gray-200);
}

.core-values__slogan span {
  font-weight: var(--fw-medium);
}

.core-values__list {
  display: flex;
  gap: var(--space-20);
}

@media (max-width: 1279px) {
  .core-values {
    height: auto;
  }

  .core-values__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }

  .core-values__slogan {
    text-align: left;
    white-space: normal;
  }

  .core-values__list {
    flex-wrap: wrap;
  }

  .core-values__list .value-tile {
    flex-basis: calc((100% - 2 * var(--space-20)) / 3);
  }
}

/* Figma mobile: 6 thẻ ngang 400×118 xếp dọc cách 13 (không lật, mô tả luôn hiện) */
@media (max-width: 767px) {
  /* Chiều cao theo Figma (thẻ 117.8px lẻ phần px → ghim để section sau bắt đầu ở px nguyên) */
  .core-values {
    height: auto;
    min-height: var(--core-values-h-mobile);
    padding-top: calc(var(--section-py) + var(--space-3));
  }

  .core-values__inner {
    gap: var(--space-23);
  }

  .core-values__head {
    gap: var(--space-21);
  }

  .core-values__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-13);
  }

  .core-values__list .value-tile {
    flex-basis: auto;
  }
}

/* ========== PROJECTS ========== */
.projects {
  padding: var(--section-py) 0;
  overflow: hidden;
  background-image: var(--gradient-light);
}

.projects__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.projects__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.projects__desc {
  width: 477px;
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  text-align: right;
  color: var(--color-gray-700);
}

/* 6 card 320px + gap 20px = 2020px, căn giữa trang → card đầu ở x = 50% − 1010px */
.projects__slider {
  align-self: flex-start;
  width: 100%;
  margin-left: calc(50% - 1010px);
}

.projects__slider .slick-list {
  overflow: visible;
}

.projects__slider .project-card {
  margin: 0 var(--space-10);
}

@media (max-width: 1279px) {
  .projects__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .projects__desc {
    width: auto;
    text-align: left;
  }

  /* Card đầu thẳng lề container, các card sau lộ dần bên phải */
  .projects__slider {
    margin-left: var(--container-padding);
  }
}

/* Figma mobile: card 330×377, lộ 1 phần card sau, dots dưới */
@media (max-width: 767px) {
  /* Figma: dải trắng 10px giữa Giá trị cốt lõi và Dự án */
  .core-values + .projects {
    margin-top: var(--space-10);
  }

  /* Trang Giới thiệu / Thiết bị sự kiện / Chi tiết thiết bị / Dự án: section Dự án ngắn hơn trang chủ 6px (đáy 41px) */
  .team + .projects,
  .project-list + .projects,
  .event-process + .projects,
  .featured-equipment + .projects {
    min-height: var(--about-projects-h-mobile);
    padding-bottom: var(--section-py);
  }

  .projects {
    min-height: var(--projects-h-mobile);
    padding-bottom: calc(var(--section-py) + var(--space-7));
  }

  .projects__inner {
    gap: var(--space-24);
  }

  .projects__head {
    gap: var(--space-9);
  }

  .projects__slider .project-card {
    width: var(--project-card-w-mobile);
    height: auto;
    min-height: var(--project-card-h-mobile);
  }
}

/* ========== TEAM ========== */
/* Chiều cao theo Figma (bù chênh lệch line-height Auto vài phần px) */
.team {
  min-height: 588px;
  position: relative;
  padding: var(--section-py) 0;
  overflow: hidden;
  background: url('../images/team-bg.webp') center / cover no-repeat;
}

.team::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-team);
}

.team__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

/* 4 member 352px + gap 60px = 1588px, căn giữa → member đầu ở x = 50% − 794px */
.team__slider {
  align-self: flex-start;
  width: 100%;
  margin-left: calc(50% - 794px);
}

.team__slider .slick-list {
  overflow: visible;
}

.team__slider .member-card {
  margin: 0 var(--space-30);
}

/* Figma mobile: tiêu đề 2 dòng, avatar 160 ở giữa, lộ 2 người 2 bên (bước 265px) */
@media (max-width: 767px) {
  .team {
    min-height: var(--team-h-mobile);
    padding: calc(var(--section-py) - 1px) 0 calc(var(--section-py) - 2px);
  }

  .team .section-title__heading > span {
    display: block;
  }

  /* Figma: người thứ 2 ở giữa → lùi dải thêm 1 bước */
  .team__slider {
    margin-left: calc(50% - var(--member-card-w-mobile) * 1.5);
  }

  .team__slider .member-card {
    width: var(--member-card-w-mobile);
    margin: 0;
  }

  .member-card {
    gap: var(--space-23);
  }

  .member-card__avatar {
    width: var(--member-avatar-mobile);
    height: var(--member-avatar-mobile);
  }

  .member-card__info {
    gap: var(--space-5);
  }

  .member-card__name {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
  }

  .member-card__role {
    font-size: var(--fs-body-l);
    font-weight: var(--fw-medium);
  }
}

/* ========== PARTNERS ========== */
/* Figma cao 423.77px, section sau bắt đầu sau 2px → 426px */
.partners {
  height: 426px;
  padding: var(--section-py) 0;
  background-color: var(--color-dark);
}

.partners__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.partners__panel {
  display: none;
  overflow: hidden;
}

.partners__panel.is-active {
  display: block;
}

/* 6 logo lấp đầy container như Figma (gap 20px → margin-right để nửa track = đúng 1 bộ logo) */
.partners__track {
  display: flex;
  width: max-content;
}

.partners__logo {
  flex-shrink: 0;
  width: var(--partners-logo-w);
  height: auto;
  margin-right: var(--space-20);
  aspect-ratio: 156 / 90;
  object-fit: contain;
}

/* Chạy chậm sang phải: JS nhân đôi bộ logo, track trượt từ -50% về 0 rồi lặp lại liền mạch.
   Hiệu ứng thêm theo yêu cầu (Figma không có); dừng khi rê chuột, tắt khi người dùng giảm chuyển động */
.partners__track.is-marquee {
  animation: partners-marquee var(--partners-marquee-duration) linear infinite;
}

.partners__panel:hover .partners__track {
  animation-play-state: paused;
}

@keyframes partners-marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 1279px) {
  .partners {
    height: auto;
  }
}

/* Figma mobile: tiêu đề 3 dòng, tab vuốt ngang tràn tới mép phải màn hình, logo 100px */
@media (max-width: 767px) {
  .partners {
    --partners-logo-w: 97px;
    min-height: var(--partners-h-mobile);
    padding-top: calc(var(--section-py) - 1px);
  }

  .partners__inner {
    gap: var(--space-24);
  }

  .partners .section-title__heading {
    max-width: var(--partners-title-w-mobile);
  }

  .partners .section-title__text--primary {
    display: block;
  }

  .partners__inner .section-title {
    margin-bottom: var(--space-3);
  }

  /* Hàng logo tràn tới mép phải màn hình như dải tab */
  .partners__panels {
    margin-right: calc(var(--container-padding) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track.is-marquee {
    animation: none;
  }
}

/* ========== VIDEO EVENTS ========== */
/* Chiều cao theo Figma (bù chênh lệch line-height Auto vài phần px) */
.video-events {
  min-height: 760px;
  padding: var(--section-py) 0;
  background-color: var(--color-blue-dark);
}

.video-events__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.video-events__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.video-events__main {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 1px;
}

.video-events__player {
  position: relative;
  display: block;
  width: 100%;
  height: 446px;
  overflow: hidden;
  background-color: var(--color-video-placeholder);
  border-radius: var(--radius-lg);
}

.video-events__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-events__play {
  position: absolute;
  top: 219px;
  left: 43.97%;
  width: 14.56%;
  height: 99px;
  transition: transform var(--transition);
}

.video-events__player:hover .video-events__play {
  transform: scale(1.05);
}

.video-events__caption {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5);
  color: var(--color-neutral);
}

.video-events__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 488px;
  flex-shrink: 0;
}

@media (max-width: 1279px) {
  .video-events__body {
    flex-direction: column;
  }

  .video-events__main,
  .video-events__list {
    width: 100%;
  }

  /* Player rộng hơn desktop → giữ nút play 97×99, căn giữa (tránh méo icon) */
  .video-events__play {
    top: calc(50% - 49.5px);
    left: calc(50% - 48.5px);
    width: 97px;
  }
}

/* Figma mobile: video 400×269 → tiêu đề → danh sách thumb 96×70 */
@media (max-width: 767px) {
  .video-events {
    min-height: var(--video-events-h-mobile);
  }

  .video-events__inner {
    gap: var(--space-25);
  }

  .video-events__body {
    gap: var(--space-30);
  }

  .video-events__player {
    height: var(--video-player-h-mobile);
  }

  /* Nút play giữ tỉ lệ vị trí như desktop (Figma mobile 58px) */
  .video-events__play {
    top: 49.1%;
    left: 43.97%;
    width: 14.56%;
    height: auto;
  }

  .video-events__caption {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .video-events__list {
    gap: var(--space-23);
  }

  .video-item {
    gap: var(--space-16);
  }

  .video-item__thumb {
    width: var(--video-thumb-w-mobile);
    height: var(--video-thumb-h-mobile);
  }

  .video-item__body {
    gap: var(--space-2);
  }

  .video-item__title {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .video-item__date {
    font-size: var(--fs-body-s);
    line-height: var(--lh-label-auto);
  }
}

/* ========== TESTIMONIALS ========== */
.testimonials {
  padding: var(--section-py) 0;
  background-image: var(--gradient-light);
}

.testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.testimonials__inner .section-title {
  width: 607px;
}

.testimonials__slider {
  width: 100%;
}

.testimonials__slider .testimonial-card {
  margin-right: var(--space-31);
}

@media (max-width: 1279px) {
  .testimonials {
    overflow: hidden;
  }

  .testimonials__inner .section-title {
    width: 100%;
  }

  .testimonials__slider .slick-list {
    overflow: visible;
  }
}

/* Figma mobile: thẻ 330 lộ 1 phần thẻ sau, cách 20 */
@media (max-width: 767px) {
  .testimonials {
    padding-bottom: calc(var(--section-py) - 1px);
  }

  .testimonials__inner {
    gap: var(--space-24);
  }

  .testimonials__slider .testimonial-card {
    width: var(--project-card-w-mobile);
    margin-right: var(--space-20);
  }
}

/* ========== NEWS ========== */
.news {
  position: relative;
  padding: var(--space-60) 0;
  background: url('../images/bg-dark-pattern.webp') center / cover no-repeat;
}

.news__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.news__slider {
  width: 100%;
}

.news__slider .post-card {
  margin-right: var(--space-32);
}

.news .slider-arrow {
  top: 220px;
}

@media (max-width: 1279px) {
  .news {
    overflow: hidden;
  }

  .news__slider .slick-list {
    overflow: visible;
  }

  .news .slider-arrow {
    display: none;
  }
}

/* Figma mobile: thẻ 330 lộ 1 phần thẻ sau, không mũi tên, không dots */
@media (max-width: 767px) {
  .news {
    min-height: var(--news-h-mobile);
    padding: var(--section-py) 0 calc(var(--section-py) - 1px);
  }

  .news__inner {
    gap: var(--space-25);
  }

  .news .post-card {
    gap: var(--space-21);
  }

  .news .post-card__body {
    gap: var(--space-15);
  }

  .news__slider .post-card {
    width: var(--project-card-w-mobile);
    margin-right: var(--space-20);
  }
}

/* ========== CONTACT FORM ========== */
.contact-form {
  position: relative;
  height: 817px;
  overflow: hidden;
  background-color: var(--color-secondary);
}

.contact-form__bg {
  position: absolute;
  z-index: 0; /* tạo stacking context để lớp multiply/overlay không phủ lên form */
  top: -78px;
  left: 0;
  width: 100%;
  height: 895px;
  overflow: hidden;
  border: 1px solid var(--color-gray-600);
}

.contact-form__bg img {
  position: absolute;
  top: 0;
  left: -0.07%;
  width: 100.15%;
  max-width: none;
  height: 107.04%;
  object-fit: cover;
}

.contact-form__bg::before,
.contact-form__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.contact-form__bg::before {
  z-index: var(--z-base);
  background-color: var(--color-blue-dark);
  mix-blend-mode: multiply;
}

.contact-form__bg::after {
  z-index: var(--z-overlay);
  background-color: var(--color-overlay-contact);
}

.contact-form__image {
  position: absolute;
  top: 131px;
  left: calc(50% + 154px);
  width: 584px;
  height: 584px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.contact-form__inner {
  position: relative;
  padding-top: 163px;
  padding-left: var(--space-4);
}

.contact-form__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 665px;
}

.contact-form__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 559px;
  text-transform: uppercase;
}

.contact-form__eyebrow {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-xl);
  color: var(--color-primary);
}

.contact-form__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  color: var(--color-white);
}

.contact-form__fields {
  display: flex;
  gap: var(--space-34);
  width: 100%;
  margin-top: var(--space-32);
}

.contact-form__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
  width: 315px;
}

.contact-form__col + .contact-form__col {
  width: 316px;
}

.contact-form__check {
  margin-top: var(--space-32);
}

.contact-form__submit {
  margin-top: var(--space-32);
  padding-top: var(--space-14);
  padding-bottom: var(--space-14);
}

/* Tablet/mobile: form 1 cột, ảnh xuống dưới form (Figma mobile: ảnh 400×584 crop từ ảnh desktop) */
@media (max-width: 1279px) {
  .contact-form {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: var(--space-64) 0;
  }

  .contact-form__bg {
    top: 0;
    height: 100%;
  }

  .contact-form__image {
    position: relative;
    top: auto;
    left: auto;
    order: 1;
    width: calc(100% - 2 * var(--container-padding));
    margin: var(--space-32) auto 0;
  }

  .contact-form__inner {
    padding-top: 0;
    padding-left: calc(var(--container-padding) + var(--space-4));
  }

  .contact-form__form,
  .contact-form__heading {
    width: 100%;
  }

  .contact-form__fields {
    flex-direction: column;
    gap: var(--space-24);
  }

  .contact-form__col,
  .contact-form__col + .contact-form__col {
    width: 100%;
  }

  .contact-form .form-field__icon {
    left: auto;
    right: var(--space-4);
  }
}

@media (max-width: 767px) {
  .contact-form {
    min-height: var(--contact-form-h-mobile);
    padding: var(--space-41) 0 var(--space-34);
  }

  .contact-form__image {
    margin-top: var(--space-32);
  }

  .contact-form__heading {
    gap: var(--space-7);
  }

  .contact-form__eyebrow {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .contact-form__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .contact-form__fields {
    margin-top: var(--space-25);
  }

  .contact-form__check {
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  .contact-form__submit {
    margin-top: var(--space-33);
    padding-inline: var(--space-20);
  }
}

/* ========== FINAL CTA ========== */
.final-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 562px;
  padding: var(--space-20) var(--space-24);
  background: url('../images/cta-bg.webp') center / cover no-repeat;
}

.final-cta__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 1056px;
  padding: var(--space-48) var(--space-60);
  text-align: center;
  background-color: var(--color-overlay-cta);
  border-radius: var(--radius-lg);
}

.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.final-cta__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  white-space: nowrap;
  color: var(--color-white);
}

.final-cta__desc {
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-cta-desc);
  color: var(--color-white);
}

.final-cta__contact {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-cta-phone);
  white-space: nowrap;
  color: var(--color-gray-100);
}

.final-cta__phone strong {
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

.final-cta__divider {
  width: 1px;
  height: 24px;
  background-color: var(--color-gray-100);
}

.final-cta__zalo {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.final-cta__zalo img {
  width: 32px;
  height: 32px;
}

.final-cta__actions {
  display: flex;
  gap: var(--space-20);
}

@media (max-width: 1279px) {
  .final-cta__box {
    width: 100%;
    max-width: 1056px;
  }

  .final-cta__title {
    white-space: normal;
  }
}

/* Figma mobile: hộp 400 (lề 20), chữ thu nhỏ, 2 nút vẫn cùng hàng, nút cao 42 */
@media (max-width: 767px) {
  .final-cta {
    height: auto;
    min-height: var(--final-cta-h-mobile);
    padding: var(--space-20) var(--container-padding);
  }

  .final-cta__box {
    gap: var(--space-25);
    padding: var(--space-42) var(--space-14) var(--space-40);
  }

  .final-cta__content {
    gap: var(--space-11);
  }

  /* Figma mobile: "Hoặc chat qua" + icon, bỏ chữ "zalo" */
  .final-cta__zalo-word {
    display: none;
  }

  .final-cta__title {
    font-size: var(--fs-h5);
    line-height: var(--lh-final-cta-title-mobile);
  }

  .final-cta__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  /* Màn < 440 không đủ 1 hàng → xuống dòng, căn giữa */
  .final-cta__contact {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-8) var(--space-20);
    font-size: var(--fs-body-l);
  }

  /* 2 nút 189 + 167 vừa khít khung 372px của Figma 440 */
  .final-cta__actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16);
  }

  .final-cta__actions .btn {
    height: var(--final-cta-btn-h-mobile);
  }
}

/* ========== FOOTER (Figma: Footer 500:8246) ========== */
.footer {
  padding: var(--section-py) 0 var(--space-32);
  background-color: var(--color-surface-dark);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.footer__columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  white-space: nowrap;
  color: var(--color-text-muted);
}

.footer__logo img {
  width: 230px;
  height: 54px;
}

.footer__value {
  color: var(--color-neutral);
}

.footer__address .footer__value {
  display: block;
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.footer__social-label {
  font-family: var(--font-mona);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer__social-list {
  display: flex;
  gap: var(--space-10);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.footer__col--wide {
  width: 200px;
}

.footer__heading {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-xl);
  color: var(--color-white);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  white-space: nowrap;
  color: var(--color-text-muted);
}

.footer__links a {
  transition: color var(--transition);
}

/* Figma (mô tả component): link hover → Text/Inverse */
.footer__links a:hover {
  color: var(--color-white);
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border-glass);
}

.footer__copyright {
  width: 420px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  text-align: center;
  color: var(--color-text-muted);
}

.footer__copyright-name {
  color: var(--color-primary);
}

.footer__bct img {
  width: 116px;
  height: 44px;
}

@media (max-width: 1279px) {
  .footer__columns {
    flex-wrap: wrap;
    gap: var(--space-32) var(--space-40);
  }

  .footer__brand {
    flex-basis: 100%;
  }
}

/* Figma mobile: 1 cột (thông tin → mạng xã hội → 3 nhóm link mở sẵn), bản quyền + logo BCT căn giữa */
@media (max-width: 767px) {
  .footer__columns {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .footer__brand {
    white-space: normal;
  }

  .footer__col--wide {
    width: auto;
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--space-20);
  }

  .footer__copyright {
    width: auto;
  }

  /* Bỏ dấu " - ", "All rights reserved" xuống dòng */
  .footer__copyright-sep {
    display: block;
    height: 0;
    overflow: hidden;
  }
}


/* ======================================================================
   TRANG GIỚI THIỆU (Figma: Giới thiệu 465:7265)
   ====================================================================== */

/* ========== ABOUT HERO (Figma: 468:7560 + 468:7567 + 468:7588) ========== */
/* Nền gradient = khối xanh bên phải (Rectangle 124, x 839–1440); ảnh phủ phần trái */
.about-hero {
  position: relative;
  height: 648px;
  overflow: hidden;
  background-image: var(--gradient-blue);
}

/* Vùng ảnh: x 0–839 ở frame 1440 → 50% + 119px */
.about-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(50% + 119px);
  overflow: hidden;
}

/* Ảnh 1240×828 tại x −250, y −117 → mép phải ảnh vượt vùng ảnh 151px */
.about-hero__image {
  position: absolute;
  top: -117px;
  right: -151px;
  width: 1240px;
  max-width: none;
  height: 828px;
}

.about-hero__play {
  position: absolute;
  top: 247px;
  right: 319px;
  width: 154px;
  height: 154px;
  transition: transform var(--transition);
}

.about-hero__play:hover {
  transform: scale(1.05);
}

.about-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 433px;
  margin-left: 767px;
  padding-top: 409px;
}

/* Figma: khung chữ 2 dòng × 41.6px làm tròn 84px */
.about-hero__title {
  min-height: 84px;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  white-space: nowrap;
}

.about-hero__desc {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-200);
}

/* Tablet (không có Figma): xếp dọc như mobile — ảnh phủ ngang ở trên, khối chữ nền xanh ở dưới */
@media (max-width: 1279px) {
  .about-hero {
    height: auto;
    background-position: 0 100%;
    background-size: 100% calc(100% - var(--about-hero-media-h));
    background-repeat: no-repeat;
  }

  .about-hero__media {
    position: relative;
    width: auto;
    height: var(--about-hero-media-h);
  }

  .about-hero__image {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-hero__play {
    top: calc(50% - 77px);
    right: auto;
    left: calc(50% - 77px);
  }

  .about-hero__content {
    width: auto;
    margin-left: 0;
    padding: var(--section-py) 0;
  }
}

/* Figma mobile: ảnh 440×309 ở trên, khối chữ nền gradient xanh 363px ở dưới */
@media (max-width: 767px) {
  .about-hero__image {
    top: -56px;
    right: auto;
    left: calc(50% - 339px);
    width: var(--about-hero-img-w-mobile);
    height: var(--about-hero-img-h-mobile);
  }

  .about-hero__play {
    top: 117px;
    right: auto;
    left: calc(50% - var(--about-play-mobile) / 2);
    width: var(--about-play-mobile);
    height: var(--about-play-mobile);
  }

  .about-hero__play img {
    width: 100%;
    height: 100%;
  }

  .about-hero__content {
    min-height: var(--about-hero-content-h-mobile);
    gap: var(--space-15);
    padding: var(--about-hero-content-pt-mobile) 0 0;
  }

  .about-hero .section-title {
    gap: var(--space-9);
  }

  .about-hero__title {
    min-height: 0;
    font-size: var(--fs-title);
    line-height: var(--lh-h4-mobile);
    white-space: normal;
  }
}

/* ========== ABOUT HISTORY (Figma: 500:7907) ========== */
/* Figma cao 692.79px → section sau bắt đầu ở 693px */
.about-history {
  min-height: 693px;
  padding: var(--section-py) 0;
  background-image: var(--gradient-light);
}

.about-history__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.about-history__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.about-history__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* Figma: khung chữ 24px × 1.4 làm tròn 34px */
.about-history__subtitle {
  min-height: 34px;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5);
  text-align: center;
  color: var(--color-dark);
}

/* Bù 1px: Chrome đặt chữ Gilroy Medium 18/26 cao hơn Figma 1px (đo bằng compare) */
.about-history__desc {
  position: relative;
  top: 1px;
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-xl);
  text-align: center;
  color: var(--color-gray-700);
}

@media (max-width: 767px) {
  /* Đệm đáy bớt 1px: ở 440 nội dung (dư phần px của Gilroy) vẫn vừa chiều cao Figma */
  .about-history {
    min-height: var(--about-history-h-mobile);
    padding-bottom: calc(var(--section-py) - var(--space-1));
  }

  .about-history__inner {
    gap: var(--space-26);
  }

  .about-history__intro {
    gap: var(--space-22);
  }

  .about-history__head {
    gap: var(--space-7);
  }

  .about-history .section-title {
    gap: var(--space-6);
  }

  /* Figma mobile: đoạn mô tả weight Regular (desktop Medium) */
  .about-history__desc {
    top: 0;
    font-weight: var(--fw-regular);
  }

  .about-history__subtitle {
    min-height: 0;
    font-size: var(--fs-body-xl);
    line-height: var(--lh-body-xl-14);
  }
}

/* ========== TIMELINE (Figma: Group 500:7905, time dot 468:7706) ========== */
.timeline {
  position: relative;
  display: flex;
  gap: var(--space-64);
}

/* Đường ngang 1186×1.05px, tâm ở y 13.79px, bắt đầu từ tâm chấm đầu (x 14px) */
.timeline::before {
  content: '';
  position: absolute;
  top: 13.265px;
  left: 14px;
  width: 1186px;
  height: 1.05px;
  background-color: var(--color-gray-200);
}

.timeline__item {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 1px;
  padding-top: 73.79px;
}

.timeline__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 28.896px;
  height: 74px;
}

.timeline__year {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

.timeline__title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  text-transform: uppercase;
}

.timeline__text {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  text-align: justify;
  color: var(--color-text-strong);
}

.timeline__item--yellow { color: var(--color-primary); }
.timeline__item--blue { color: var(--color-secondary); }
.timeline__item--cyan { color: var(--color-cyan); }

/* Figma mobile: timeline dọc — vòng tròn + vạch ngang bên trái, đường dọc nối tâm các vòng (x 34) */
@media (max-width: 767px) {
  .timeline {
    flex-direction: column;
    gap: var(--space-20);
  }

  .timeline::before {
    display: none;
  }

  .timeline__item {
    padding-top: 0;
    padding-left: var(--timeline-indent-mobile);
  }

  /* Đường dọc từ tâm vòng này tới vòng sau */
  .timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--space-3) + var(--timeline-dot-mobile) / 2);
    bottom: calc(var(--space-20) * -1);
    left: var(--space-14);
    width: 1px;
    background-color: var(--color-gray-200);
  }

  /* Vạch ngang mảnh (Figma stroke 1px lệch nửa px → màu nhạt) */
  .timeline__item::after {
    content: '';
    position: absolute;
    top: calc(var(--space-3) + var(--timeline-dot-mobile) / 2);
    left: var(--space-29);
    width: var(--timeline-tick-w-mobile);
    height: 1px;
    background-color: currentColor;
    opacity: 0.5;
  }

  /* Figma: vòng tròn thấp hơn đỉnh dòng năm 3px */
  .timeline__dot {
    top: var(--space-3);
    z-index: var(--z-base);
    height: var(--timeline-dot-mobile);
    object-fit: none;
    object-position: top;
  }

  .timeline__year {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }

  /* Figma: tiêu đề sát năm hơn 1px */
  .timeline__title {
    position: relative;
    top: -1px;
    font-size: var(--fs-body-xl);
    line-height: var(--lh-body-xl-14);
  }

  .timeline__text {
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }
}

/* ========== ABOUT STATS (Figma: 500:7914) ========== */
.about-stats {
  height: 388px;
  padding: var(--section-py) 0;
  background-color: var(--color-secondary);
}

.about-stats__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-stats__list {
  display: flex;
  gap: var(--space-32);
}

.about-stats__list .stat {
  flex: 1 0 0;
  min-width: 1px;
  height: 93px;
}

.stat--muted .stat__label {
  color: var(--color-gray-200);
}

/* Tablet + mobile: 4 nhãn không đủ chỗ 1 hàng → lưới 2×2 xếp theo cột (10+, 50+ / 500+, 10+) như Figma mobile */
@media (max-width: 1279px) {
  .about-stats {
    height: auto;
  }

  .about-stats__list {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: var(--space-37) var(--space-32);
  }

  .about-stats__list .stat {
    height: auto;
  }
}

/* Figma mobile: tiêu đề chảy liền 2 dòng */
@media (max-width: 767px) {
  .about-stats {
    height: auto;
    min-height: var(--about-stats-h-mobile);
    padding-top: calc(var(--section-py) - var(--space-2));
  }

  .about-stats__inner {
    gap: var(--space-29);
  }

  .about-stats .section-title__line {
    display: inline;
  }
}

/* ========== VISION & MISSION (Figma: Section 1 — 500:7994) ========== */
.vision-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 564px 564px;
}

.vision-mission__photo {
  position: relative;
  overflow: hidden;
}

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

/* Figma: ảnh rộng 139.32%, lệch trái 15.01% */
.vision-mission__photo--mission img {
  position: absolute;
  top: 0;
  left: -15.01%;
  width: 139.32%;
  max-width: none;
}

.vision-mission__panel {
  position: relative;
  overflow: hidden;
}

.vision-mission__panel::after {
  content: '';
  position: absolute;
  inset: 0;
}

.vision-mission__bg {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.vision-mission__content {
  position: absolute;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.vision-mission__panel--vision {
  background-color: var(--color-sand);
}

.vision-mission__panel--vision::after {
  background-color: var(--color-overlay-vision);
}

.vision-mission__panel--vision .vision-mission__bg {
  top: -143px;
  left: 0;
  width: 732px;
  height: 850px;
}

.vision-mission__panel--vision .vision-mission__content {
  top: 104px;
  left: 49px;
  width: 548px;
}

.vision-mission__panel--mission {
  background-color: var(--color-navy);
}

.vision-mission__panel--mission::after {
  background-color: var(--color-overlay-mission);
}

.vision-mission__panel--mission .vision-mission__bg {
  top: 0;
  left: -65px;
  width: 850px;
  height: 565px;
}

.vision-mission__panel--mission .vision-mission__content {
  top: 66px;
  left: 118px;
  width: 554px;
}

.vision-mission__text {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-200);
}

/* Figma: một dòng trống giữa 2 đoạn */
.vision-mission__text p + p {
  margin-top: var(--lh-body-xl);
}

.vision-mission__text strong {
  font-weight: var(--fw-bold);
}

.mission-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.mission-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.mission-list__title {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-xl-14);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-neutral);
}

.mission-list__title::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
}

.mission-list__text {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-200);
}

/* Tablet + mobile: 1 cột — Tầm nhìn → ảnh → Sứ mệnh → ảnh (như Figma mobile) */
@media (max-width: 1279px) {
  .vision-mission {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .vision-mission__photo {
    aspect-ratio: 980 / 551;
  }

  .vision-mission__photo--mission img {
    position: static;
    width: 100%;
    object-position: 38% 50%;
  }

  .vision-mission__panel {
    padding: var(--section-py) 0;
  }

  .vision-mission__panel--vision {
    order: -1;
  }

  .vision-mission__panel .vision-mission__bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Tăng độ ưu tiên để thắng khối Laptop (max-width 1366) ở cuối file */
  .vision-mission .vision-mission__panel .vision-mission__content {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 0 var(--container-padding);
  }
}

/* Figma mobile: chiều cao từng khối ghim theo Figma */
@media (max-width: 767px) {
  .vision-mission__photo {
    height: var(--vision-photo-h-mobile);
    aspect-ratio: auto;
  }

  .vision-mission__photo--mission {
    height: var(--mission-photo-h-mobile);
  }

  /* min-height + đệm đáy: chữ dài hơn ở màn hẹp không bị cắt (overflow hidden) */
  .vision-mission__panel--vision {
    min-height: var(--vision-panel-h-mobile);
    padding: var(--space-53) 0 var(--space-32);
  }

  .vision-mission__panel--mission {
    min-height: var(--mission-panel-h-mobile);
    padding: var(--space-51) 0 var(--space-32);
  }

  .vision-mission .vision-mission__panel .vision-mission__content {
    padding-left: var(--vision-mission-px-mobile);
  }

  .vision-mission__panel .section-title {
    gap: var(--space-8);
  }

  .vision-mission__panel--vision .vision-mission__content {
    gap: var(--space-17);
  }

  .mission-list {
    margin-top: var(--space-1);
  }

  .vision-mission__text,
  .mission-list__text {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .vision-mission__text p + p {
    margin-top: var(--lh-body-l);
  }

  .mission-list__title {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l-14);
    white-space: normal;
  }
}

/* ========== CORE VALUES — biến thể căn giữa (Figma: 500:8113) ========== */
/* Figma cao 511.59px → section sau bắt đầu ở 512px */
.core-values--center {
  height: 512px;
}

.core-values__tagline {
  font-size: var(--fs-h4);
  line-height: var(--lh-tagline);
  color: var(--color-neutral);
}

/* Tablet: thẻ xuống 2 hàng → bỏ chiều cao cố định */
@media (max-width: 1279px) {
  .core-values--center {
    height: auto;
  }
}

/* Figma mobile: tiêu đề căn trái như trang chủ, 6 thẻ ngang bám đáy section (giữ chữ bản desktop) */
@media (max-width: 767px) {
  .core-values--center {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: var(--about-core-values-h-mobile);
  }

  .core-values--center .core-values__inner {
    flex: 1;
  }

  .core-values--center .section-title--center {
    align-items: flex-start;
    text-align: left;
  }

  .core-values--center .section-title--center .section-title__label {
    flex-direction: row;
  }

  .core-values--center .core-values__list {
    margin-top: auto;
  }

  .core-values__tagline {
    margin-top: var(--space-14);
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }
}

/* ========== NEXT STEP — Final CTA trang Giới thiệu (Figma: Section/Final CTA 515:8374) ========== */
.next-step {
  position: relative;
  height: 470px;
  padding: var(--section-py) 0;
  overflow: hidden;
  background-color: var(--color-cta-bg);
}

/* Motif "Activation Beam": 3 vòng tròn đồng tâm (tâm x −60, y 300) + vạch ngang y 274 */
.next-step__motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.next-step__motif::before {
  content: '';
  position: absolute;
  top: 273.3px;
  left: 0;
  width: 100%;
  border-top: 1.4px solid var(--color-cta-beam);
}

.next-step__ring {
  position: absolute;
  border: 1px solid;
  border-radius: var(--radius-full);
}

.next-step__ring--sm {
  top: 150px;
  left: -210px;
  width: 300px;
  height: 300px;
  border-color: var(--color-cta-ring-1);
}

.next-step__ring--md {
  top: 20px;
  left: -340px;
  width: 560px;
  height: 560px;
  border-color: var(--color-cta-ring-2);
}

.next-step__ring--lg {
  top: -120px;
  left: -480px;
  width: 840px;
  height: 840px;
  border-color: var(--color-cta-ring-3);
}

.next-step__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-34);
}

.next-step__title {
  font-family: var(--font-unbounded);
  font-size: var(--fs-display);
  font-weight: var(--fw-xbold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.next-step__lead {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-text-muted);
}

.next-step__actions {
  display: flex;
  gap: var(--space-20);
}

.next-step__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  height: 52px;
  padding: var(--space-14) var(--space-21);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-l);
  white-space: nowrap;
  border: 1.5px solid;
  border-radius: var(--radius-xs);
  transition: opacity var(--transition);
}

/* Hover tối thiểu (Figma không có state hover) */
.next-step__btn:hover {
  opacity: 0.85;
}

.next-step__btn--primary {
  color: var(--color-cta-bg);
  background-color: var(--color-cta-yellow);
  border-color: var(--color-cta-yellow);
}

.next-step__btn--outline {
  color: var(--color-white);
  border-color: var(--color-btn-outline);
}

/* Tablet: tiêu đề 60px không vừa 1 dòng → thu chữ, cho xuống dòng */
@media (max-width: 1279px) {
  .next-step {
    height: auto;
    min-height: var(--next-step-h);
  }

  .next-step__title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    white-space: normal;
  }
}

/* Figma mobile: tiêu đề Unbounded 26px 2 dòng, vạch beam ngắn 162px, nút cao 44 cùng hàng */
@media (max-width: 767px) {
  /* min-height: ở 360–414 tiêu đề xuống thêm dòng → section cao ra, không cắt nút */
  .next-step {
    min-height: var(--next-step-h);
  }

  .next-step__motif::before {
    top: 156px;
    left: var(--space-8);
    width: 162px;
  }

  /* Figma: eyebrow → tiêu đề 14, tiêu đề → mô tả 21, mô tả → nút 22 */
  .next-step__inner {
    gap: var(--space-14);
  }

  .next-step__lead {
    margin-top: var(--space-7);
  }

  .next-step__actions {
    margin-top: var(--space-8);
  }

  .next-step .eyebrow {
    font-size: var(--fs-body-m);
    line-height: var(--fs-body-m);
    letter-spacing: var(--ls-eyebrow-mobile);
  }

  .next-step__title {
    font-size: var(--fs-display-mobile);
    line-height: var(--lh-display-mobile);
    letter-spacing: var(--ls-display-mobile);
    white-space: normal;
  }

  .next-step__actions {
    flex-wrap: wrap;
  }

  /* 2 nút 207 + 170 + gap 20 vừa khung 400 */
  .next-step__btn {
    gap: var(--space-5);
    height: var(--next-step-btn-h-mobile);
    padding: 0 var(--space-20);
    font-size: var(--fs-body-m);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body-m);
  }
}

/* ==========================================================
   TRANG DỊCH VỤ (Figma: Danh mục dịch vụ_Tổ chức sự kiện 132:440)
   ========================================================== */

/* ========== PAGE BANNER (Figma: Rectangle 1 132:441) — header trong suốt đè lên ========== */
.page-banner {
  height: 430px;
}

.page-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* <picture> khi trang có ảnh banner riêng cho mobile */
.page-banner__picture {
  display: block;
  height: 100%;
}

/* Figma mobile (642:5499): banner cao 585 tính cả status bar 44 → bản build cao 541,
   ảnh (dichvu-banner-mobile.webp, cắt từ ảnh gốc 1600×900) cover khung 585 rồi đẩy lên 44px */
@media (max-width: 767px) {
  .page-banner {
    height: var(--page-banner-h-mobile);
    overflow: hidden;
  }

  .page-banner__image {
    height: calc(100% + var(--status-bar-h-mobile));
    margin-top: calc(var(--status-bar-h-mobile) * -1);
  }
}

/* ========== SERVICE CATALOG (Figma: Frame 132:1050) ========== */
/* Figma: nội dung 478–1735, section sau bắt đầu ở 1800 */
.service-catalog {
  padding: var(--space-48) 0 var(--section-py);
}

/* Figma: khối rộng 1202px bắt đầu ở x=118 (lệch trái 2px so với container 1200) */
.service-catalog__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 1202px;
  margin-left: calc(var(--space-2) * -1);
}

.service-catalog__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.service-catalog__desc {
  width: 909px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  text-align: center;
  color: var(--color-gray-700);
}

.service-catalog__grid {
  align-self: flex-start;
  display: grid;
  grid-template-columns: repeat(3, 379px);
  gap: var(--space-24) var(--space-32);
}

/* Tablet: khối co theo container, lưới 2 cột (selector 2 cấp để thắng các biến thể --2/--4 khai báo sau) */
@media (max-width: 1279px) {
  .service-catalog .service-catalog__inner {
    width: 100%;
    margin-left: 0;
  }

  .service-catalog .service-catalog__desc {
    width: 100%;
    max-width: 909px;
  }

  .service-catalog .service-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .service-catalog__grid .service-card {
    width: 100%;
  }
}

/* Figma mobile: mô tả 14/20, thẻ 400×340 xếp 1 cột cách 20 */
@media (max-width: 767px) {
  .service-catalog {
    padding-top: var(--section-py);
  }

  .service-catalog .service-catalog__inner {
    gap: var(--space-23);
  }

  .service-catalog__head {
    gap: var(--space-8);
  }

  .service-catalog .service-catalog__desc {
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  /* Figma mobile: mô tả chảy liền, không ngắt dòng cứng */
  .service-catalog__desc br {
    display: none;
  }

  .service-catalog .service-catalog__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-20);
  }
}

/* ========== EVENT PROCESS (Figma: Frame 368:4255) ========== */
/* Figma cao 500.9px → làm tròn 501px để section sau bắt đầu đúng y */
.event-process {
  height: 501px;
  padding: var(--section-py) 0;
  background-color: var(--color-blue-dark);
}

.event-process__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.event-process__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.event-process__desc {
  width: 583px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  text-align: right;
  color: var(--color-gray-200);
}

.event-process__desc strong {
  font-weight: var(--fw-bold);
}

.process-steps {
  display: flex;
  gap: var(--space-24);
}

.process-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  text-align: center;
}

/* Figma: đường nối 124px giữa 2 vòng tròn, nét 1.4px, tâm ở y = 40.45px */
.process-steps__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 39.75px;
  left: calc(50% + 40px);
  width: 124px;
  height: 1.4px;
  background-color: var(--color-cta-beam);
}

/* Vòng ngoài 79×80.9 viền 1px + hình elip vàng 53.4×54.7 lệch 13px (đúng Figma) */
.process-steps__number {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 80.9px;
  margin-bottom: var(--space-16);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5);
  color: var(--color-dark);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
}

.process-steps__number::before {
  content: '';
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: -1;
  width: 53.4px;
  height: 54.7px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.process-steps__title {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-xl);
  white-space: nowrap;
  color: var(--color-white);
}

.process-steps__text {
  margin-top: var(--space-12);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-gray-200);
}

/* Tablet: tiêu đề + mô tả xếp dọc, hàng bước cuộn ngang tràn tới mép phải màn hình */
@media (max-width: 1279px) {
  .event-process {
    height: auto;
  }

  .event-process__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }

  .event-process .event-process__desc {
    width: 100%;
    text-align: left;
  }

  .event-process .process-steps {
    justify-content: flex-start;
    margin-right: calc(var(--container-padding) * -1);
    padding-right: var(--container-padding);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .process-steps::-webkit-scrollbar {
    display: none;
  }

  .process-steps__item {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* Figma mobile: mô tả 14/20 căn trái, bước rộng 258 cách 24 (thấy 1 bước + mép bước 2) */
@media (max-width: 767px) {
  /* Ghim chiều cao theo Figma để section sau bắt đầu đúng pixel */
  .event-process {
    height: auto;
    min-height: var(--event-process-h-mobile);
    padding-bottom: calc(var(--section-py) - var(--space-2));
  }

  .event-process__inner {
    gap: var(--space-23);
  }

  .event-process__head {
    gap: var(--space-14);
  }

  .event-process .event-process__desc {
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  .event-process .process-steps .process-steps__item {
    width: var(--process-step-w-mobile);
  }

  /* Figma mobile: vòng tròn → tên bước 17, tên → mô tả 13 (desktop 16 / 12) */
  .process-steps__number {
    margin-bottom: var(--space-17);
  }

  .process-steps__text {
    margin-top: var(--space-13);
  }

  /* Đường nối từ mép vòng tròn này tới mép vòng tròn kế tiếp: 258 + 24 − 80 */
  .event-process .process-steps .process-steps__item:not(:last-child)::after {
    left: calc(50% + 40px);
    width: calc(var(--process-step-w-mobile) + var(--space-24) - 80px);
  }
}

/* ==========================================================
   TRANG CHI TIẾT DỊCH VỤ (Figma: CT Dịch vụ 155:1111) — dichvu_view.php
   ========================================================== */

/* ========== BREADCRUMB (Figma: Breadcrumbs 198:3481) ========== */
/* Viền dưới 0.5px nằm trong khung (Figma stroke inside) → inset box-shadow */
.breadcrumb {
  height: 48px;
  padding: var(--space-12) 0;
  background-color: var(--color-gray-50);
  box-shadow: inset 0 -0.5px 0 var(--color-gray-300);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  white-space: nowrap;
  color: var(--color-slate);
}

/* Dấu "/" — Figma dùng Inter 500 (khung 6px); dự án không có Inter → giữ đúng khung 6px */
.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  width: 6px;
  font-weight: var(--fw-medium);
  text-align: center;
}

.breadcrumb__link {
  transition: color var(--transition);
}

.breadcrumb__link:hover {
  color: var(--color-secondary);
}

.breadcrumb__link--home {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-gray-500);
}

.breadcrumb__current {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
}

/* Tablet: breadcrumb dài thì cuộn ngang, không tràn trang */
@media (max-width: 1279px) {
  .breadcrumb__list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .breadcrumb__list::-webkit-scrollbar {
    display: none;
  }
}

/* Figma mobile (CT Dịch vụ 646:6040) không có breadcrumb — nội dung bắt đầu ngay dưới header */
@media (max-width: 767px) {
  .breadcrumb {
    display: none;
  }
}

/* ========== SERVICE DETAIL (Figma: 155:1202 + 198:3537 + 266:3609) ========== */
/* Figma: tiêu đề bắt đầu y=168 (cách breadcrumb 40px), nội dung kết thúc y=2551, section sau ở 2616 */
.service-detail {
  padding: var(--space-40) 0 var(--section-py);
}

.service-detail__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.service-detail__desc {
  width: 909px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  text-align: center;
  color: var(--color-gray-700);
}

.service-detail__desc strong {
  font-weight: var(--fw-bold);
}

@media (max-width: 1279px) {
  .service-detail__desc {
    width: 100%;
    max-width: 909px;
  }
}

/* Figma mobile: gạch → tiêu đề cách 8px (component mobile mặc định 7px) */
@media (max-width: 767px) {
  .service-detail__head .section-title {
    gap: var(--space-8);
  }
}

/* ========== DETAIL GALLERY (Figma: Frame 198:3537) ========== */
.detail-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-24);
}

.detail-gallery__main {
  width: 1202px;
  height: 530px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Hàng thumbnail: mũi tên 36 + gap 24 + 7 thumb (1200px) + gap 24 + mũi tên 36, căn giữa */
.detail-gallery__nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding-top: var(--space-24);
}

.detail-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-24);
  width: var(--container);
}

.detail-gallery__thumb {
  display: block;
  width: 100%;
  height: 96px;
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition);
  cursor: pointer;
}

.detail-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Figma: viền vàng 4px nằm ngoài (stroke outside) */
.detail-gallery__thumb.is-active {
  box-shadow: 0 0 0 4px var(--color-primary);
}

.detail-gallery__arrow,
.related-services__arrow {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--color-secondary);
  transition: color var(--transition);
  cursor: pointer;
}

.detail-gallery__arrow svg,
.related-services__arrow svg {
  display: block;
}

/* Figma: nút trước = icon lật ngang, màu xám */
.detail-gallery__arrow--prev,
.related-services__arrow--prev {
  transform: scaleX(-1);
}

.detail-gallery__arrow--prev,
.related-services__arrow.is-disabled {
  color: var(--color-gray-400);
}

.detail-gallery__arrow--prev:hover {
  color: var(--color-secondary);
}

.related-services__arrow.is-disabled {
  cursor: default;
}

/* Tablet: ảnh lớn co theo container, giữ tỉ lệ 1202×530; hàng thumbnail co giữa 2 mũi tên */
@media (max-width: 1279px) {
  .detail-gallery {
    padding: 0 var(--container-padding);
  }

  .detail-gallery__main {
    width: 100%;
    max-width: 1202px;
    height: auto;
    aspect-ratio: 1202 / 530;
  }

  .detail-gallery__nav {
    width: 100%;
  }

  /* 2 cấp để thắng rule @1280 (width cố định) khai báo cuối file */
  .detail-gallery .detail-gallery__thumbs {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* Figma mobile: ảnh 400×245, bỏ mũi tên, 6 thumbnail 36px cao / hàng (cách 12), thumbnail thứ 7 cuộn ngang */
@media (max-width: 767px) {
  .detail-gallery__main {
    height: var(--detail-gallery-h-mobile);
    aspect-ratio: auto;
  }

  .detail-gallery__nav {
    padding-top: var(--space-12);
  }

  .detail-gallery__arrow {
    display: none;
  }

  /* Đệm 4px cho viền vàng của thumbnail đang chọn không bị cắt khi cuộn ngang */
  .detail-gallery__thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--detail-thumbs-per-view-mobile) - 1) * var(--space-12)) / var(--detail-thumbs-per-view-mobile));
    gap: var(--space-12);
    margin: 0 calc(var(--space-4) * -1);
    padding: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .detail-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .detail-gallery__thumb {
    height: var(--detail-thumb-h-mobile);
  }
}

/* ========== DETAIL TABS (Figma: Frame 266:3609) ========== */
.detail-tabs {
  margin-top: var(--space-36);
}

.detail-tabs__list {
  display: flex;
}

.detail-tabs__tab {
  flex: 1;
  padding: var(--space-14) var(--space-24);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tab-auto);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-gray-500);
  background-color: var(--color-gray-50);
  border-radius: 6px;
  transition: color var(--transition), background-color var(--transition);
  cursor: pointer;
}

/* Viền dưới 1px nằm trong khung (Figma stroke inside) */
.detail-tabs__tab.is-active {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  background-color: var(--color-tab-active);
  box-shadow: inset 0 -1px 0 var(--color-secondary);
}

.detail-tabs__panel {
  display: none;
  margin-top: var(--space-32);
}

.detail-tabs__panel.is-active {
  display: flex;
}

/* Tablet: 4 tab không vừa 1 hàng → cuộn ngang */
@media (max-width: 1279px) {
  .detail-tabs__list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .detail-tabs__list::-webkit-scrollbar {
    display: none;
  }

  .detail-tabs__tab {
    flex: 1 0 auto;
  }
}

/* Figma mobile: tab ôm chữ 16px (cao 45), dải tab chạy tới mép phải màn hình */
@media (max-width: 767px) {
  .detail-tabs {
    margin-top: var(--space-20);
  }

  .detail-tabs__list {
    margin-right: calc(var(--container-padding) * -1);
  }

  .detail-tabs__tab {
    flex: none;
    font-size: var(--fs-body-l);
    line-height: var(--lh-label-auto);
  }

  .detail-tabs__panel {
    margin-top: var(--space-30);
  }
}

/* ========== ARTICLE — nội dung bài chi tiết (Figma: Frame 266:3574) ========== */
.article {
  flex-direction: column;
  gap: var(--space-20);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-text-body);
}

/* Figma: khung chữ cao 42px (32px × 1.3 = 41.6 làm tròn) */
.article__title {
  min-height: 42px;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h4);
  color: var(--color-text-heading);
}

.article__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.article__figure img {
  width: 790px;
  height: 498px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.article__caption {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  text-align: center;
  color: var(--color-gray-500);
}

.article__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Figma: khung chữ cao 34px (24px × 1.4 = 33.6 làm tròn) */
.article__heading {
  min-height: 34px;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5);
  color: var(--color-text-heading);
}

.article__text ol {
  padding-left: 27px;
  list-style: decimal;
}

.article__text a {
  color: var(--color-secondary);
  transition: opacity var(--transition);
}

.article__text a:hover {
  opacity: 0.8;
}

/* Figma: các đoạn cách nhau 1 dòng trống */
.article__text--spaced p + p {
  margin-top: var(--lh-body-xl);
}

@media (max-width: 1279px) {
  .article__figure img {
    width: 100%;
    max-width: 790px;
    height: auto;
    aspect-ratio: 790 / 498;
  }
}

/* Figma mobile: chữ 16/24, tiêu đề 24/24, tiêu đề mục 20/30 (cách đoạn 10), ảnh full 400 */
@media (max-width: 767px) {
  .article {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .article__title {
    min-height: 0;
    font-size: var(--fs-h5);
    line-height: var(--lh-article-title-mobile);
  }

  .article__block {
    gap: var(--space-10);
  }

  .article__heading {
    min-height: 0;
    font-size: var(--fs-h6);
    line-height: var(--lh-article-heading-mobile);
  }

  .article__text ol {
    padding-left: var(--space-24);
  }

  .article__text--spaced p + p {
    margin-top: var(--lh-body-l);
  }

  /* Ghim chiều cao nguyên px (tỉ lệ 790×498 cho ra 252.15px → lệch phần px dồn xuống các section sau) */
  .article__figure img {
    height: var(--article-figure-h-mobile);
    aspect-ratio: auto;
  }
}

/* ========== RELATED SERVICES (Figma: Frame 273:1375) ========== */
.related-services {
  padding: var(--section-py) 0;
  background-image: var(--gradient-light);
}

.related-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.related-services__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Slick variableWidth căn mép card (không tính margin) → card đầu sát mép container;
   rộng thêm 16px để card thứ 3 (kết thúc ở 1200–1201px) không bị cắt, card thứ 4 (từ 1232px) bị ẩn */
.related-services__slider {
  align-self: flex-start;
  width: 1216px;
}

/* slick.css đặt .slick-slide { display: block } → trả lại flex để caption nằm đáy card */
.related-services__slider .service-card,
.other-services__slider .service-card {
  display: flex;
}

.related-services__slider .service-card {
  margin: 0 var(--space-16);
}

.related-services__nav {
  display: flex;
  gap: var(--space-24);
}

/* Trang Thiết bị sự kiện: khối chỉ có trong Figma mobile */
.related-services--mobile-only {
  display: none;
}

@media (max-width: 1279px) {
  .related-services__head {
    flex-wrap: wrap;
    gap: var(--space-24);
  }

  .related-services__slider {
    width: calc(100% + var(--space-32));
    margin-left: calc(var(--space-16) * -1);
  }
}

/* Figma mobile: tiêu đề → slider card 330×392 (cách 20, tràn mép phải) → nút full 400 dưới cùng; không có mũi tên */
@media (max-width: 767px) {
  .related-services {
    min-height: var(--related-services-h-mobile);
  }

  .related-services--mobile-only {
    display: block;
  }

  .related-services__inner {
    align-items: stretch;
  }

  /* Bỏ khung head để nút xếp xuống dưới slider */
  .related-services__head {
    display: contents;
  }

  .related-services__head .btn {
    order: 1;
    height: auto;
    padding: var(--space-13) var(--space-24);
    font-size: var(--fs-body-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body-xl);
  }

  /* Figma: tiêu đề → slider cách 23px (nút cách slider 24px) */
  .related-services__slider {
    width: calc(100% + var(--container-padding));
    margin-top: calc(var(--space-1) * -1);
    margin-left: 0;
  }

  .related-services__slider .service-card {
    width: var(--project-card-w-mobile);
    height: auto;
    min-height: var(--related-card-h-mobile);
    margin: 0 var(--space-20) 0 0;
  }

  .related-services__nav {
    display: none;
  }
}

/* ========== OTHER SERVICES (Figma: Frame 7 — 368:3973) ========== */
.other-services {
  padding: var(--section-py) 0;
  overflow: hidden;
  background-color: var(--color-secondary);
}

.other-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

/* 5 card 379px + gap 32px căn giữa trang → card đầu ở x = 50% − 1011px (Slick căn theo mép card) */
.other-services__slider {
  align-self: flex-start;
  width: 100%;
  margin-left: calc(50% - 1011px);
}

.other-services__slider .slick-list {
  overflow: visible;
}

.other-services__slider .service-card {
  margin: 0 var(--space-16);
}

/* Tablet: card đầu sát mép trái container */
@media (max-width: 1279px) {
  .other-services__slider {
    margin-left: calc(var(--space-16) * -1);
  }
}

/* Figma mobile: card 330×296 cách 20, card đầu ở mép container */
@media (max-width: 767px) {
  .other-services {
    min-height: var(--other-services-h-mobile);
  }

  .other-services .section-title__label {
    gap: var(--space-11);
  }

  .other-services__slider {
    margin-left: 0;
  }

  .other-services__slider .service-card {
    width: var(--project-card-w-mobile);
    height: auto;
    min-height: var(--other-card-h-mobile);
    margin: 0 var(--space-20) 0 0;
  }

  /* Figma: tên dịch vụ 18px, khung chữ Auto (19px), 1 dòng */
  .other-services__slider .service-card__title {
    font-size: var(--fs-body-xl);
    line-height: var(--lh-tab-auto);
  }
}

/* ==========================================================
   TRANG THIẾT BỊ SỰ KIỆN (Figma: DS thiết bị sự kiện 266:3681) — thietbisukien.php
   Dùng lại: page-banner, service-catalog, event-process, projects, footer
   ========================================================== */

/* Danh mục thiết bị: 4 cột card 276px */
.service-catalog__grid--4 {
  grid-template-columns: repeat(4, 276px);
}

/* Tablet/mobile: card giãn theo cột lưới, ảnh giữ cao 276 (Figma mobile 400×276) */
@media (max-width: 1279px) {
  .service-catalog__grid--4 .equipment-card,
  .service-catalog__grid--4 .equipment-card__image {
    width: 100%;
  }
}

/* Quy trình cho thuê (Figma: Frame 278:2054) — cao 481px, 5 bước rộng 214px */
.event-process--compact {
  height: 481px;
}

/* 5 × 214px trên 1200px → khoảng cách 32.5px như Figma */
.process-steps--wide {
  justify-content: space-between;
}

.process-steps--wide .process-steps__item {
  width: 214px;
}

/* Đường nối 167px từ mép vòng tròn này tới mép vòng tròn kế tiếp */
.process-steps--wide .process-steps__item:not(:last-child)::after {
  left: calc(50% + 39.5px);
  width: 167px;
}

/* Tablet: bỏ chiều cao cố định để mô tả xuống dòng không bị cắt */
@media (max-width: 1279px) {
  .event-process--compact {
    height: auto;
  }
}

/* Figma mobile (646:7045): mô tả giữ 16/24 như desktop, tên công ty in đậm; cao 517 */
@media (max-width: 767px) {
  .event-process--compact {
    min-height: var(--event-process-compact-h-mobile);
  }

  .event-process--compact .event-process__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .event-process__brand {
    font-weight: var(--fw-bold);
  }
}

/* ========== BUDGET FORM (Figma: Frame 278:2343) ========== */
.budget-form {
  padding: var(--section-py) 0;
  background:
    linear-gradient(var(--color-overlay-budget), var(--color-overlay-budget)),
    url('../images/budget-bg.webp') center / cover no-repeat;
}

.budget-form__inner,
.budget-form__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.budget-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.budget-form__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.budget-form__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.budget-form__desc {
  width: 461px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  text-align: right;
  color: var(--color-gray-200);
}

.budget-form__form {
  width: 100%;
}

.budget-form__body {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  width: 100%;
}

.budget-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
  width: 613px;
}

.budget-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 290px);
  gap: var(--space-32) var(--space-34);
}

/* Ô rộng 290px / 613px → icon sát mép phải (component mặc định cho ô 315px) */
.budget-form .form-field__icon--select {
  left: 278px;
}

.budget-form .form-field__icon--textarea {
  left: 602px;
}

.budget-form__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 539px;
  height: 248px;
  padding: var(--space-24);
  background-color: var(--color-panel-budget);
  border-radius: var(--radius-md);
}

.budget-form__panel-title {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-xl);
  color: var(--color-white);
}

.budget-form__checks {
  display: flex;
  gap: var(--space-65);
}

.budget-form__check-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-18);
}

/* Thanh cuộn trang trí (Figma: Rectangle 5332, 4×41) */
.budget-form__scrollbar {
  position: absolute;
  top: 79px;
  right: var(--space-5);
  width: 4px;
  height: 41px;
  background-color: var(--color-secondary);
  border-radius: 6px;
}

/* Tablet: ô nhập + khung hạng mục xếp dọc, co theo container */
@media (max-width: 1279px) {
  .budget-form__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .budget-form .budget-form__desc {
    width: 100%;
    text-align: left;
  }

  .budget-form__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }

  .budget-form .budget-form__fields,
  .budget-form .budget-form__panel {
    width: 100%;
  }

  .budget-form .budget-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .budget-form .form-field__icon--select,
  .budget-form .form-field__icon--textarea {
    right: 0;
    left: auto;
  }
}

/* Figma mobile: 7 ô 1 cột (bước 63), khung hạng mục 1 cột 8 dòng (bước 44) */
@media (max-width: 767px) {
  .budget-form__inner {
    gap: var(--space-24);
  }

  .budget-form__head {
    gap: var(--space-10);
  }

  .budget-form .eyebrow {
    font-size: var(--fs-body-m);
    line-height: var(--fs-body-m);
    letter-spacing: var(--ls-eyebrow-mobile);
  }

  .budget-form .budget-form__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }

  /* Figma xếp theo cột: Loại chương trình, Không gian, Quy mô, rồi Mức đầu tư, Địa điểm, Số ngày */
  .budget-form__grid .form-field:nth-child(even) {
    order: 1;
  }

  .budget-form__fields {
    gap: var(--space-32);
  }

  .budget-form .budget-form__panel {
    height: auto;
  }

  .budget-form__checks,
  .budget-form__check-col {
    flex-direction: column;
    gap: var(--space-20);
  }

  .budget-form__scrollbar {
    top: var(--budget-scrollbar-top-mobile);
    height: var(--budget-scrollbar-h-mobile);
  }

  /* Figma: nút 261×36, chữ 14px */
  .budget-form .btn--sm {
    height: var(--budget-btn-h-mobile);
    padding: 0 var(--space-20);
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }
}

/* ==========================================================
   TRANG CHI TIẾT THIẾT BỊ (Figma: CT Thiết bị 278:2464) — thietbisukien_view.php
   Dùng lại: breadcrumb, detail-tabs, article, event-process, projects, budget-form, footer
   ========================================================== */

/* ========== EQUIPMENT DETAIL (Figma: Frame 305:2891) ========== */
/* Figma: nội dung bắt đầu y=177 (cách breadcrumb 49px), kết thúc y=2121, section sau ở 2186 */
.equipment-detail {
  padding: 49px 0 var(--section-py);
}

.equipment-detail__top {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}

/* ========== EQUIPMENT GALLERY (Figma: Frame 305:2976) ========== */
.equipment-gallery {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-12);
  width: 576px;
  height: 384px;
}

.equipment-gallery__main {
  width: 488px;
  height: 384px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Cột thumbnail 76px, 6 ảnh 71×56 dàn đều theo chiều cao (Figma: space-between) */
.equipment-gallery__thumbs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 76px;
}

.equipment-gallery__thumb {
  display: block;
  width: 71px;
  height: 56px;
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition);
  cursor: pointer;
}

.equipment-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Figma: viền vàng 2px nằm ngoài (stroke outside) */
.equipment-gallery__thumb.is-active {
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* Tablet: gallery giãn hết container — ảnh lớn co theo, cột thumbnail giữ nguyên */
@media (max-width: 1279px) {
  .equipment-gallery {
    width: 100%;
  }

  .equipment-gallery__main {
    flex: 1;
    min-width: 0;
    width: auto;
  }
}

/* Figma mobile (646:7887): như gallery chi tiết dịch vụ — ảnh 400×245, hàng 6 thumbnail cao 36 cách 12 bên dưới,
   viền vàng 4px; đệm 4px để viền không bị cắt khi cuộn ngang */
@media (max-width: 767px) {
  .equipment-gallery {
    flex-direction: column;
    gap: var(--space-12);
    height: auto;
  }

  .equipment-gallery__main {
    flex: none;
    width: 100%;
    height: var(--detail-gallery-h-mobile);
  }

  .equipment-gallery__thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--detail-thumbs-per-view-mobile) - 1) * var(--space-12)) / var(--detail-thumbs-per-view-mobile));
    gap: var(--space-12);
    width: auto;
    margin: 0 calc(var(--space-4) * -1);
    padding: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .equipment-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .equipment-gallery__thumb {
    width: 100%;
    height: var(--detail-thumb-h-mobile);
  }

  .equipment-gallery__thumb.is-active {
    box-shadow: 0 0 0 4px var(--color-primary);
  }
}

/* ========== EQUIPMENT SUMMARY (Figma: Frame 278:2755) ========== */
.equipment-summary {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

/* Gạch vàng 36×5 + gap 12 trước tiêu đề; Figma: khung chữ cao 50px (36px × 1.4 = 50.4 làm tròn) */
.equipment-summary__title {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 50px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--color-dark);
}

.equipment-summary__title::before {
  content: '';
  flex-shrink: 0;
  width: 36px;
  height: 5px;
  background-color: var(--color-primary);
}

.equipment-summary__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  color: var(--color-dark);
}

/* Chrome đo dòng 1 rộng 576.09px (Figma vừa khung 576px) → nới 1px để xuống dòng như Figma */
.equipment-summary__desc {
  margin-right: -1px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}

/* Figma: dòng có dấu cách đầu → chữ lùi 31px */
.equipment-summary__specs {
  padding-left: var(--space-31);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-spec);
  list-style: disc;
}

.equipment-summary__actions {
  display: flex;
  gap: var(--space-16);
}

/* Tablet: gallery xếp trên phần mô tả */
@media (max-width: 1279px) {
  .equipment-detail__top {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Figma mobile: tiêu đề 24px (gạch vàng 24×3), mô tả 16/24, thông số 16/32, 2 nút chia đôi hàng 400 */
@media (max-width: 767px) {
  .equipment-detail {
    min-height: var(--equipment-detail-h-mobile);
    padding: var(--section-py) 0 var(--equipment-detail-pb-mobile);
  }

  .equipment-detail__top {
    gap: var(--equipment-top-gap-mobile);
  }

  .equipment-summary {
    gap: var(--space-12);
    align-items: stretch;
  }

  .equipment-summary__title {
    height: auto;
    font-size: var(--fs-h5);
    line-height: var(--lh-equipment-title-mobile);
  }

  .equipment-summary__title::before {
    width: var(--space-24);
    height: var(--space-3);
  }

  .equipment-summary__desc {
    margin-right: 0;
  }

  .equipment-summary__specs {
    padding-left: var(--space-28);
    font-size: var(--fs-body-l);
  }

  .equipment-summary__actions .btn {
    flex: 1;
    padding: 0;
  }
}

/* ========== EQUIPMENT MAIN — danh mục + tab (Figma: Frame 278:2758) ========== */
.equipment-detail__main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  margin-top: var(--space-40);
}

.equipment-cats {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-12);
  width: 326px;
}

/* Gạch xanh 90×2 cách tiêu đề 5px */
.equipment-cats__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5-auto);
  text-transform: uppercase;
  color: var(--color-text-body);
}

.equipment-cats__title::after {
  content: '';
  display: block;
  width: 90px;
  height: 2px;
  margin-top: var(--space-5);
  background-color: var(--color-secondary);
}

/* Viền dưới 1px nằm trong khung (Figma stroke inside) */
.equipment-cats__link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24) 0;
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-xl);
  text-transform: uppercase;
  color: var(--color-gray-500);
  box-shadow: inset 0 -1px 0 var(--color-gray-200);
  transition: color var(--transition);
}

.equipment-cats li:last-child .equipment-cats__link {
  box-shadow: none;
}

.equipment-cats__link:hover {
  color: var(--color-secondary);
}

.equipment-cats__link.is-active {
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
}

.equipment-cats__link.is-active::before {
  content: '';
  width: 14px;
  height: 14px;
  background: url('../icons/chevron-right-blue.svg') no-repeat center;
}

/* Tab nằm cạnh danh mục → bỏ margin-top của trang chi tiết dịch vụ */
.detail-tabs--flush {
  flex: 1;
  margin-top: 0;
}

/* Tablet: danh mục xếp trên tab nội dung, rộng hết container */
@media (max-width: 1279px) {
  .equipment-detail__main {
    flex-direction: column;
    align-items: stretch;
  }

  .equipment-cats {
    width: auto;
  }

  .detail-tabs--flush {
    flex: none;
  }
}

/* Figma mobile: không có khối "Danh mục thiết bị"; 2 tab chia đôi hàng 400 (không tràn mép phải),
   nhãn tab rút gọn "Thông tin thiết bị" */
@media (max-width: 767px) {
  .equipment-detail__main {
    margin-top: var(--space-24);
  }

  .equipment-cats {
    display: none;
  }

  .detail-tabs--flush .detail-tabs__list {
    margin-right: 0;
  }

  .detail-tabs--flush .detail-tabs__tab {
    flex: 1;
    padding-right: 0;
    padding-left: 0;
  }

  .detail-tabs__tab-extra {
    display: none;
  }
}

/* Tiêu đề cách nội dung 12px, các khối trong nội dung cách 20px (Figma: 305:2869) */
.article--compact {
  gap: var(--space-12);
}

.article__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.article__text ul,
ul.article__text {
  padding-left: 27px;
  list-style: disc;
}

.article__figure--full img {
  width: 100%;
  height: 521px;
}

@media (max-width: 1279px) {
  .article__figure--full img {
    max-width: none;
    height: auto;
    aspect-ratio: 826 / 521;
  }
}

/* Figma mobile: tiêu đề bài cách nội dung 17px; tiêu đề mục semibold trong khung rộng 300 (xuống dòng như Figma); ảnh 400×252 */
@media (max-width: 767px) {
  .article--compact {
    gap: var(--article-compact-gap-mobile);
  }

  .article--compact .article__heading {
    max-width: var(--article-heading-w-mobile);
    font-weight: var(--fw-semibold);
  }

  .article__figure--full img {
    height: var(--article-figure-h-mobile);
    aspect-ratio: auto;
  }
}

/* ========== FEATURED EQUIPMENT (Figma: Group 305:2892) ========== */
.featured-equipment {
  position: relative;
  padding: var(--space-60) 0;
  background-color: var(--color-secondary);
}

.featured-equipment__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

/* Như related-services: rộng thêm 16px để card thứ 4 không bị cắt */
.featured-equipment__slider {
  align-self: flex-start;
  width: 1216px;
}

.featured-equipment__slider .equipment-card {
  display: flex;
  margin: 0 var(--space-16);
}

/* Figma: mũi tên ở y=220 của section (cao 540) */
.featured-equipment__arrow {
  top: 220px;
}

/* Tablet: card đầu sát mép trái container, slider tràn mép phải */
@media (max-width: 1279px) {
  .featured-equipment {
    overflow: hidden;
  }

  .featured-equipment__slider {
    width: calc(100% + var(--space-32));
    margin-left: calc(var(--space-16) * -1);
  }
}

/* Figma mobile: card 330 (ảnh 330×276, tên 20px khung Auto) cách 20, tràn mép phải; không có mũi tên; cao 471 */
@media (max-width: 767px) {
  .featured-equipment {
    min-height: var(--featured-equipment-h-mobile);
    padding: var(--section-py) 0;
  }

  .featured-equipment__inner {
    gap: var(--featured-equipment-gap-mobile);
  }

  .featured-equipment__slider {
    width: calc(100% + var(--container-padding));
    margin-left: 0;
  }

  .featured-equipment__slider .equipment-card {
    gap: var(--space-20);
    width: var(--project-card-w-mobile);
    margin: 0 var(--space-20) 0 0;
  }

  .featured-equipment__slider .equipment-card__image {
    width: 100%;
  }

  .featured-equipment__slider .equipment-card__title {
    font-weight: var(--fw-semibold);
    line-height: var(--lh-h6-auto);
  }

  .featured-equipment__arrow {
    display: none;
  }
}

/* ==========================================================
   TRANG PHIM DOANH NGHIỆP (Figma: 317:3107) — phimdoanhnghiep.php
   Dùng lại: page-banner, service-catalog, service-card, event-process, projects, next-step, footer
   ========================================================== */

/* ========== FILM CATALOG — khối rộng đúng container, card 584×360, 2 cột ========== */
.service-catalog--film .service-catalog__inner {
  width: auto;
  margin-left: 0;
}

.service-catalog--film .service-catalog__desc {
  width: auto;
}

.service-catalog__desc strong {
  font-weight: var(--fw-bold);
}

.service-catalog__grid--2 {
  grid-template-columns: repeat(2, 584px);
}

.service-card--wide {
  width: 584px;
  height: 360px;
}

/* Ngắt dòng tên phim chỉ dùng ở mobile (Figma mobile ngắt cứng từng tên) */
.service-card__break {
  display: none;
}

/* Figma mobile (646:8246): banner lệch phải (ảnh cover x −335 thay vì −300), mô tả 16/24 cách tiêu đề 11,
   card 400×296, tên phim 18px cách đáy 12 */
@media (max-width: 767px) {
  .page-banner--film .page-banner__image {
    object-position: 55.8% 50%;
  }

  .service-catalog--film .service-catalog__inner {
    gap: var(--space-24);
  }

  .service-catalog--film .service-catalog__head {
    gap: var(--space-11);
  }

  .service-catalog--film .service-catalog__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .service-card--wide {
    height: auto;
    min-height: var(--film-card-h-mobile);
  }

  .service-card--wide .service-card__caption {
    padding-bottom: var(--space-12);
  }

  .service-card--wide .service-card__title {
    font-size: var(--fs-body-xl);
    line-height: var(--lh-body-xl-14);
  }

  .service-card__break {
    display: inline;
  }
}

/* ========== FILM SCOPE — "Bao gồm những hạng mục gì?" (nền xanh, 3 cột hạng mục ảnh tròn) ========== */
/* Figma cao 931px (làm tròn) */
.film-scope {
  height: 931px;
  padding: var(--section-py) 0;
  background-color: var(--color-secondary);
}

.film-scope__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.film-scope__text {
  display: flex;
  margin-top: var(--space-2);
  flex-direction: column;
  gap: var(--space-12);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-xl);
  color: var(--color-neutral);
}

.film-scope__text strong {
  font-weight: var(--fw-bold);
}

.film-scope__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-23) var(--space-32);
  margin-top: var(--space-18);
}

.scope-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.scope-item__image {
  width: 162px;
  height: 162px;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.scope-item__title {
  margin-top: var(--space-21);
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  color: var(--color-neutral);
}

.scope-item__text {
  margin-top: var(--space-8);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-200);
}

/* Tablet: chiều cao theo nội dung */
@media (max-width: 1279px) {
  .film-scope {
    height: auto;
  }
}

/* Figma mobile: tiêu đề 2 dòng, đoạn văn 16/24, lưới 2 cột cách 20, ảnh tròn 96, tên 16, mô tả 14/20 */
@media (max-width: 767px) {
  .film-scope .section-title__heading span {
    display: block;
  }

  .film-scope__text {
    font-size: var(--fs-body-l);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body-l);
  }

  .film-scope__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-23) var(--space-20);
  }

  .scope-item__image {
    width: var(--scope-image-mobile);
    height: var(--scope-image-mobile);
  }

  .scope-item__title {
    margin-top: var(--space-12);
    font-size: var(--fs-body-l);
    line-height: var(--lh-film-stage-title-mobile);
  }

  .scope-item__text {
    margin-top: var(--space-11);
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }
}

/* ========== FILM PROCESS — quy trình 3 giai đoạn dạng timeline dọc ========== */
/* Figma cao 1054px — ghim để section sau bắt đầu đúng y */
.event-process--film {
  height: 1054px;
}

.event-process__desc--narrow {
  width: 532px;
}

.film-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-23);
}

.film-stages__item {
  position: relative;
  display: flex;
  gap: var(--space-20);
}

/* Đường nối 1px vàng từ đáy vòng tròn tới vòng tròn của giai đoạn sau */
.film-stages__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 80px;
  bottom: calc(var(--space-23) * -1);
  left: 39px;
  width: 1px;
  background-color: var(--color-primary);
}

.film-stages__number {
  flex-shrink: 0;
  margin-bottom: 0;
}

.film-stages__title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  text-transform: uppercase;
  color: var(--color-white);
}

.film-stages__lead {
  margin-top: var(--space-12);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-200);
}

.film-stages__list {
  margin-top: var(--space-13);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-spec);
  color: var(--color-gray-200);
}

/* Sau đoạn dẫn: Figma cách 9px (sau tiêu đề: 13px) */
.film-stages__lead + .film-stages__list {
  margin-top: var(--space-9);
}

.film-stages__list li {
  position: relative;
  padding-left: var(--space-26);
}

.film-stages__list li::before {
  content: '';
  position: absolute;
  top: var(--space-13);
  left: var(--space-11);
  width: var(--space-3);
  height: var(--space-3);
  background-color: currentColor;
  border-radius: var(--radius-full);
}

.event-process__note {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-200);
}

.event-process__note strong {
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

/* "(Pre-production)" không ngắt dòng ở dấu gạch nối (Figma mobile xuống dòng cả cụm) */
.film-stages__nowrap {
  white-space: nowrap;
}

/* Nút "Xem thêm" chỉ có ở mobile */
.film-stages__more {
  display: none;
}

/* Tablet: chiều cao theo nội dung */
@media (max-width: 1279px) {
  .event-process--film {
    height: auto;
  }
}

/* Figma mobile: mô tả/ghi chú 16/24, số giai đoạn 60 (tròn vàng 41 đồng tâm), tên 16/22, nội dung 14/20,
   mỗi giai đoạn thu gọn còn đoạn dẫn (hoặc 2 ý đầu) + nút "Xem thêm" */
@media (max-width: 767px) {
  /* Giữ đệm đáy đầy đủ (event-process mobile bớt 2px để vừa chiều cao ghim) */
  .event-process--film {
    height: auto;
    padding-bottom: var(--section-py);
  }

  .event-process--film .event-process__desc,
  .event-process__note {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .film-stages {
    gap: var(--space-22);
  }

  .film-stages__item:not(:last-child)::after {
    top: var(--film-stage-number-mobile);
    bottom: calc(var(--space-22) * -1);
    left: calc(var(--film-stage-number-mobile) / 2);
  }

  /* min-width 0: dòng nowrap "..." không được đẩy cột chữ rộng quá màn hình */
  .film-stages__body {
    flex: 1;
    min-width: 0;
  }

  .event-process .film-stages__number {
    width: var(--film-stage-number-mobile);
    height: var(--film-stage-number-mobile);
    font-size: var(--fs-body-xl);
    line-height: var(--lh-body-xl);
  }

  .film-stages__number::before {
    top: 50%;
    left: 50%;
    width: var(--film-stage-dot-mobile);
    height: var(--film-stage-dot-mobile);
    transform: translate(-50%, -50%);
  }

  .film-stages__title {
    font-size: var(--fs-body-l);
    line-height: var(--lh-film-stage-title-mobile);
  }

  .film-stages__lead,
  .film-stages__list {
    margin-top: var(--space-10);
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  .film-stages__lead + .film-stages__list {
    margin-top: var(--space-8);
  }

  .film-stages__list li {
    padding-left: var(--space-21);
  }

  .film-stages__list li::before {
    top: var(--space-9);
    left: var(--space-9);
  }

  /* Thu gọn: có đoạn dẫn → ẩn danh sách; không có → 2 ý đầu, ý thứ 2 cắt "..." */
  .film-stages__item:not(.is-open) .film-stages__lead + .film-stages__list {
    display: none;
  }

  .film-stages__item:not(.is-open) .film-stages__list li:nth-child(n + 3) {
    display: none;
  }

  .film-stages__item:not(.is-open) .film-stages__list li:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .film-stages__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-7);
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    color: var(--color-primary);
  }

  /* Vùng bấm 44px, giữ nguyên hình chữ */
  .film-stages__more::before {
    content: '';
    position: absolute;
    inset: calc(var(--space-12) * -1) 0;
  }

  .film-stages__more i {
    font-size: var(--fs-body-s);
    transition: transform 0.2s;
  }

  .film-stages__item.is-open .film-stages__more i {
    transform: rotate(180deg);
  }
}

/* ==========================================================
   TRANG DỰ ÁN (Figma: Danh mục dự án 368:3708)
   Dùng lại: page-banner, service-catalog (head), project-card, projects, next-step, footer
   ========================================================== */

/* Figma: 430–2214 → cao 1784px */
.project-list {
  height: 1784px;
}

.service-catalog--projects .service-catalog__inner {
  width: auto;
  margin-left: 0;
}

.service-catalog--projects .service-catalog__desc {
  width: auto;
}

/* Tiêu đề + mô tả cách thanh danh mục 24px (Figma) */
.project-list__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

/* Figma: card 379px, cột cách 32px, bắt đầu x=119 (lệch trái 1px); hàng cao 434 / 441 / 440px, cách nhau 23px */
.project-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 379px);
  grid-template-rows: 434px 441px;
  grid-auto-rows: 440px;
  gap: var(--space-23) var(--space-32);
  margin-left: -1px;
}

.project-card--grid {
  width: auto;
  height: auto;
}

/* Figma: tiêu đề cách link 13px */
.project-card--grid .project-card__body {
  gap: var(--space-13);
}

/* Figma: card trong lưới dùng Montserrat Medium (card slider dùng SemiBold) */
.project-card--grid .project-card__title {
  font-weight: var(--fw-medium);
}

.project-list__more {
  display: none;
}

/* Tablet: lưới 2 cột co theo container, chiều cao theo nội dung */
@media (max-width: 1279px) {
  .project-list {
    height: auto;
  }

  .project-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: var(--project-list-row-h-tablet);
    width: 100%;
    margin-left: 0;
  }
}

/* Figma mobile: mô tả 16/24, thẻ 400 rộng xếp 1 cột cách 20 (hàng cao 457/457/457/463/464/465),
   chỉ hiện 6 thẻ + nút "Xem thêm" thay cho phân trang */
@media (max-width: 767px) {
  /* Ghim chiều cao theo Figma khi thu gọn (chữ Gilroy dư ~1px ở phần đệm đáy) */
  .project-list {
    min-height: var(--project-list-h-mobile);
    padding-bottom: calc(var(--section-py) - var(--space-1));
  }

  .project-list.is-expanded {
    height: auto;
  }

  /* Figma: tiêu đề → mô tả 12, mô tả → tab 23, tab → lưới 24 */
  .service-catalog--projects .service-catalog__inner {
    gap: var(--space-24);
  }

  .service-catalog--projects .service-catalog__head {
    gap: var(--space-12);
  }

  .service-catalog--projects .service-catalog__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .project-list__top {
    gap: var(--space-23);
  }

  .project-list__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--project-list-rows-mobile);
    grid-auto-rows: minmax(var(--project-list-row-h-mobile), auto);
    gap: var(--space-20);
  }

  /* Ẩn/hiện: cần !important vì .project-card đặt display:flex !important (chống slick) */
  .project-list:not(.is-expanded) .project-card--grid:nth-child(n + 7) {
    display: none !important;
  }

  .project-list__pagination {
    display: none;
  }

  .project-list__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
    color: var(--color-secondary);
    cursor: pointer;
  }

  /* Vùng bấm 44px, giữ nguyên hình chữ */
  .project-list__more::before {
    content: '';
    position: absolute;
    inset: calc(var(--space-10) * -1) 0;
  }

  .project-list__more i {
    font-size: var(--fs-body-s);
    transition: transform 0.2s;
  }

  .project-list.is-expanded .project-list__more i {
    transform: rotate(180deg);
  }
}

/* ==========================================================
   TRANG KIẾN THỨC (Figma: Danh mục kiến thức 394:4340) — kienthuc.php
   Dùng lại: page-banner, section-title, pagination, link-arrow, related-services__arrow, final-cta, footer
   ========================================================== */

/* Figma: 430–1719 → cao 1289px; gạch tiêu đề ở y=473 */
.knowledge-list {
  height: 1289px;
  padding-top: var(--space-46);
}

.knowledge-list__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

/* Figma: tiêu đề cách thanh tab 24px (các khối khác cách nhau 32px) */
.knowledge-list__head {
  margin-bottom: calc(var(--space-8) * -1);
}

/* Figma: 2 cột card 570px cách 60px, hàng cách 32px */
.knowledge-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 570px);
  gap: var(--space-32) var(--space-60);
}

.knowledge-card {
  display: flex;
  gap: var(--space-24);
  height: 280px;
}

.knowledge-card__image {
  flex-shrink: 0;
  width: 248px;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.knowledge-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.knowledge-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5);
  color: var(--color-text-strong);
}

.knowledge-card__desc {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-700);
}

/* Link nằm sát đáy card */
.knowledge-card__link {
  margin-top: auto;
}

.knowledge-list__more {
  display: none;
}

/* Tablet: lưới 2 cột co theo container, thanh tab cuộn ngang */
@media (max-width: 1279px) {
  .knowledge-list {
    height: auto;
    padding-bottom: var(--section-py);
  }

  .knowledge-list__inner {
    align-items: stretch;
  }

  .knowledge-list__pagination {
    align-self: center;
  }

  .underline-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .underline-tabs::-webkit-scrollbar {
    display: none;
  }

  .knowledge-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-32) var(--space-24);
  }

  .knowledge-card {
    height: auto;
  }

  /* Ảnh cao tối thiểu như desktop, kéo theo chiều cao chữ */
  .knowledge-card__image {
    align-self: stretch;
    width: 42%;
    height: auto;
    min-height: 280px;
  }

  .knowledge-card__body {
    min-width: 0;
  }
}

/* Figma mobile (657:10273): 585–2297 trong frame; thẻ 400×222 (ảnh 174) xếp 1 cột cách 20,
   tiêu đề/mô tả cắt 3 dòng; thanh tab tràn mép phải; "Xem thêm" thay cho phân trang */
@media (max-width: 767px) {
  /* min-height: màn < 400 tiêu đề xuống 2 dòng → section cao thêm */
  .knowledge-list {
    min-height: var(--knowledge-list-h-mobile);
    padding: var(--knowledge-list-pt-mobile) 0 var(--section-py);
  }

  .knowledge-list__inner {
    gap: var(--space-24);
  }

  .knowledge-list__head {
    margin-bottom: var(--knowledge-head-mb-mobile);
  }

  .underline-tabs {
    width: auto;
    margin-right: calc(var(--container-padding) * -1);
  }

  .knowledge-list__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: var(--knowledge-card-h-mobile);
    gap: var(--space-20);
  }

  .knowledge-card {
    gap: var(--space-20);
    height: auto;
  }

  .knowledge-card__image {
    width: var(--knowledge-card-img-w-mobile);
    height: 100%;
    min-height: 0;
  }

  .knowledge-card__body {
    gap: var(--knowledge-card-gap-mobile);
  }

  .knowledge-card__title,
  .knowledge-card__desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  /* Figma: dòng đầu tiêu đề thấp hơn mép ảnh 1px */
  .knowledge-card__title {
    margin-top: var(--space-1);
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .knowledge-card__desc {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .knowledge-list__pagination {
    display: none;
  }

  .knowledge-list__more {
    position: relative;
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--knowledge-more-mt-mobile);
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
    color: var(--color-secondary);
  }

  /* Vùng bấm 44px, giữ nguyên hình chữ */
  .knowledge-list__more::before {
    content: '';
    position: absolute;
    inset: calc(var(--space-10) * -1) 0;
  }

  .knowledge-list__more i {
    font-size: var(--fs-body-s);
  }
}

/* ========== FEATURED POSTS (Figma: "Kiến thức nổi bật" 394:4340) — cao 662px ========== */
.featured-posts {
  height: 662px;
  padding: var(--section-py) 0;
  background-image: var(--gradient-light);
}

.featured-posts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.featured-posts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.featured-posts__nav {
  display: flex;
  gap: var(--space-24);
}

/* Như related-services: rộng thêm 16px để card thứ 3 không bị cắt, card thứ 4 bị ẩn */
.featured-posts__slider {
  width: 1216px;
}

.featured-posts__slider .blog-card {
  display: flex;
  margin: 0 var(--space-16);
}

/* Dots chỉ có ở Figma mobile */
.featured-posts__dots {
  display: none;
}

/* Tablet: slider co theo container, dải card tràn mép phải */
@media (max-width: 1279px) {
  .featured-posts {
    height: auto;
    overflow: hidden;
  }

  .featured-posts__head {
    flex-wrap: wrap;
    gap: var(--space-24);
  }

  .featured-posts__slider {
    width: calc(100% + var(--container-padding));
  }

  .featured-posts__slider .slick-list {
    overflow: visible;
  }

  .featured-posts__slider .blog-card {
    margin: 0 var(--space-24) 0 0;
  }
}

/* Figma mobile (657:10273): 2297–2870 trong frame; card 330 (ảnh 270, tiêu đề 20/28) cách 20,
   không mũi tên, dots bên dưới */
@media (max-width: 767px) {
  .featured-posts {
    min-height: var(--featured-posts-h-mobile);
    height: auto;
  }

  .featured-posts__inner {
    gap: var(--featured-posts-gap-mobile);
  }

  .featured-posts__nav {
    display: none;
  }

  .featured-posts__slider .blog-card {
    width: var(--project-card-w-mobile);
    margin: 0 var(--space-20) 0 0;
  }

  .featured-posts .blog-card__media {
    height: var(--blog-card-media-h-mobile);
  }

  .featured-posts .blog-card__title {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  /* Figma: tiêu đề → ngày giờ 4px */
  .featured-posts .blog-card__meta {
    margin-top: var(--space-4);
  }

  .featured-posts__dots {
    display: block;
    margin-top: var(--featured-dots-mt-mobile);
  }
}

/* ==========================================================
   TRANG CHI TIẾT KIẾN THỨC (Figma: Chi tiết kiến thức 394:5459) — kienthuc_view.php
   ========================================================== */

/* ========== ARTICLE DETAIL — Figma y 128 → 2338 (cao 2210px) ========== */
/* line-height 25.2px cộng dồn ra số lẻ → ghim chiều cao Figma để section sau bắt đầu ở pixel chẵn */
.article-detail {
  min-height: 2210px;
  padding: var(--space-48) 0 55px;
}

.article-detail__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: var(--container-article);
  margin-left: calc((100% - var(--container-article) - 1px) / 2); /* Figma x=222 (không lệch nửa px) */
}

/* Figma: ảnh đầu cách mô tả 23px (khung chữ 26px làm tròn) */
.article-detail__head {
  display: flex;
  margin-bottom: -1px;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  text-align: center;
}

.article-detail__title {
  font-family: var(--font-montserrat);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  color: var(--color-article-title);
}

.article-detail__desc {
  margin-top: var(--space-4);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-xl);
  color: var(--color-article-title);
}

/* Nội dung bài (HTML từ trình soạn thảo) → style theo thẻ trong khối .article-content */
.article-content {
  font-family: var(--font-montserrat);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl-14);
  color: var(--color-article-text);
}

.article-content > * + * {
  margin-top: var(--space-24);
}

.article-content > p + p {
  margin-top: var(--space-16);
}

.article-content > h2 + p {
  margin-top: var(--space-12);
}

.article-content h2 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h5);
  color: var(--color-text-heading);
}

/* Figma crop ảnh theo khung (Fill) → chiều cao lấy từ thuộc tính height của <img> */
.article-content img {
  width: 100%;
  object-fit: cover;
}

.article-content figcaption {
  margin-top: var(--space-16);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-gray-500);
}

.article-content ol {
  padding-left: 27px;
  list-style: decimal;
}

.article-content a {
  color: var(--color-teal);
  transition: opacity var(--transition);
}

.article-content a:hover {
  opacity: 0.8;
}

/* Đường kẻ 1px phía trên: cách đoạn cuối 21px (Figma đo được), cách nút 24px */
.share-bar {
  display: flex;
  margin-top: -3px;
  gap: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-divider);
}

.share-bar__social {
  display: flex;
  gap: var(--space-8);
}

.share-bar__copy,
.share-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid var(--color-share-border);
  border-radius: var(--radius-pagination);
  transition: border-color var(--transition);
}

/* Figma rộng 127px (chữ Poppins) — giữ độ rộng để 3 nút mạng xã hội đúng vị trí */
.share-bar__copy {
  min-width: 127px;
  gap: var(--space-6);
  padding: 0 var(--space-18) 0 15px;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-m);
  color: var(--color-gray-800);
  background: none;
  cursor: pointer;
}

.share-bar__btn {
  width: 36px;
}

.share-bar__copy:hover,
.share-bar__btn:hover {
  border-color: var(--color-gray-400);
}

/* Tablet: cột bài co theo container, ảnh giữ tỉ lệ */
@media (max-width: 1279px) {
  .article-detail {
    min-height: 0;
  }

  .article-detail__inner {
    width: min(var(--container-article), 100% - 2 * var(--container-padding));
    margin-right: auto;
    margin-left: auto;
  }

  /* Giữ đúng khung crop desktop (996×487 ảnh đầu bài, 996×532 ảnh minh hoạ) — ảnh gốc tỉ lệ khác nên không dùng height: auto */
  .article-content > img {
    height: auto;
    aspect-ratio: 996 / 487;
  }

  .article-content figure img {
    height: auto;
    aspect-ratio: 996 / 532;
  }
}

/* Figma mobile 659:11068: chữ Gilroy 16/24, tiêu đề 24/34, tiêu đề mục 20/30 (cách đoạn 10), ảnh 400 bo góc */
@media (max-width: 767px) {
  .article-detail {
    min-height: var(--article-detail-h-mobile);
    padding: var(--section-py) 0;
  }

  .article-detail__head {
    margin-bottom: 0;
    gap: var(--article-detail-head-gap-mobile);
  }

  .article-detail__title {
    font-family: var(--font-primary);
    font-size: var(--fs-h5);
    line-height: var(--lh-article-detail-title-mobile);
  }

  .article-detail__desc {
    margin-top: var(--space-2);
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .article-content {
    font-family: var(--font-primary);
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .article-content > h2 + p {
    margin-top: var(--space-10);
  }

  .article-content h2 {
    font-size: var(--fs-h6);
    line-height: var(--lh-article-heading-mobile);
  }

  .article-content img {
    border-radius: var(--radius-md);
  }

  /* Ghim chiều cao nguyên px (400 × tỉ lệ cho ra 195.6 / 213.7 → lệch phần px dồn xuống) */
  .article-content > img {
    height: var(--article-cover-h-mobile);
  }

  .article-content figure img {
    height: var(--article-image-h-mobile);
  }

  .article-content figcaption {
    font-size: var(--fs-body-l);
  }

  .article-content ol {
    padding-left: var(--space-24);
  }
}

/* ==========================================================
   TRANG LIÊN HỆ (Figma: 394:6728)
   Dùng lại: page-banner, section-title, btn, final-cta, footer
   ========================================================== */

/* ========== PAGE BANNER — logo giữa nền xanh (Figma: logo 775×276 tại x 332, y 106) ========== */
.page-banner--logo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 106px;
  background-color: var(--color-dark);
}

.page-banner__logo {
  width: 775px;
  height: auto;
}

@media (max-width: 1279px) {
  .page-banner__logo {
    max-width: calc(100% - var(--container-padding) * 2);
  }
}

/* Figma mobile (659:11726): nền xanh cao 266 (dưới header), logo 337 rộng căn giữa */
@media (max-width: 767px) {
  .page-banner--logo {
    height: var(--contact-banner-h-mobile);
    padding-top: var(--contact-logo-top-mobile);
  }

  .page-banner__logo {
    width: var(--contact-logo-w-mobile);
  }
}

/* ========== COMPANY CONTACT — Figma y 430 → 1462 (cao 1032px) ========== */
.company-contact {
  min-height: 1032px;
  padding: var(--space-48) 0 var(--section-py);
}

.company-contact__offices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-24);
}

/* Figma: cao 106px — chữ địa chỉ nằm thấp (khoảng cách 20px, đáy 22px) */
.office-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-24) 22px;
  background-color: var(--color-office-card);
  border-radius: var(--radius-md);
}

.office-card--alt {
  background-color: var(--color-office-card-alt);
}

.office-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-office-title);
  color: var(--color-gray-700);
}

/* Font Awesome: hộp 24px như icon Figma */
.office-card__icon {
  width: 24px;
  font-size: 20px;
  text-align: center;
  color: var(--color-secondary);
}

.office-card__address {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-office-address);
  color: var(--color-gray-700);
}

@media (max-width: 1279px) {
  .office-card__address {
    line-height: var(--lh-office-address-wrap);
  }
}

/* Figma mobile: 2 ô xếp dọc 400×128, cách 16 */
@media (max-width: 767px) {
  .company-contact {
    min-height: 0;
    padding-top: var(--contact-pt-mobile);
  }

  .company-contact__offices {
    grid-template-columns: 1fr;
    gap: var(--space-16);
    margin-top: var(--space-18);
  }

  .office-card {
    gap: var(--space-15);
    padding: var(--space-22) var(--space-24) var(--office-card-pb-mobile);
  }
}

/* Khung form + bản đồ: 564 + 636 = 1200, bo góc 20px */
.company-contact__body {
  display: grid;
  grid-template-columns: 564px 636px;
  margin-top: var(--space-32);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.company-contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tablet (không có Figma): form trên, bản đồ dưới */
@media (max-width: 1279px) {
  .company-contact__body {
    grid-template-columns: 1fr;
  }

  .company-contact__map {
    height: var(--contact-map-h-tablet);
  }
}

/* Figma mobile: form bo 20 rộng 400, bản đồ tràn full 440 × 465 ngay dưới form */
@media (max-width: 767px) {
  .company-contact__body {
    overflow: visible;
    border-radius: 0;
  }

  .company-contact__map {
    height: var(--contact-map-h-mobile);
    margin: 0 calc(var(--container-padding) * -1);
  }
}

/* ========== CONTACT PANEL (form liên hệ, nền xám nhạt → trắng) ========== */
.contact-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-48) var(--space-40);
  background-image: var(--gradient-light);
}

.contact-panel__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
}

.contact-panel__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}

/* Figma mobile: padding 32/20, các ô xếp 1 cột cách 24 */
@media (max-width: 767px) {
  .contact-panel {
    padding: var(--contact-panel-pt-mobile) var(--space-20) var(--space-32);
    border-radius: var(--radius-lg);
  }

  .contact-panel__submit {
    padding: 0 var(--space-21);
  }

  .contact-panel__fields,
  .contact-panel__row {
    gap: var(--space-24);
  }

  .contact-panel__row {
    grid-template-columns: 1fr;
  }
}

/* ========== INPUT FIELD — nhãn trên, ô viền 46px ========== */
/* Nhãn cao 28px + 4px → ô nhập cách đỉnh nhãn 32px như Figma */
.input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.input-field__label {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-input-label);
  color: var(--color-text-heading);
}

.input-field__control {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 var(--space-24);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-700);
  background: transparent;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-xs);
  outline: none;
  transition: border-color var(--transition);
}

.input-field__control::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.input-field__control:focus {
  border-color: var(--color-secondary);
}

.input-field__control--textarea {
  height: 82px;
  padding-top: var(--space-12);
  resize: none;
}

/* Figma mobile: ô "Lời nhắn" cao 46 như ô thường */
@media (max-width: 767px) {
  .input-field__control--textarea {
    height: 46px;
    padding-top: var(--space-10);
  }
}

/* ========== QUOTE REQUEST — trang Tư vấn & báo giá (Figma: 271:3031) ========== */
/* Figma: gạch tiêu đề y=157, 2 cột bắt đầu y=308, section kết thúc y=1308 (footer) */
.quote-request {
  padding: var(--space-32) 0 var(--space-64);
}

.quote-request__desc {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-700);
}

.quote-request__body {
  display: grid;
  grid-template-columns: 800px 360px;
  gap: var(--space-40);
  align-items: start;
  margin-top: var(--space-44);
}

/* ----- Form ----- */
.quote-form__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Đường kẻ 1px giữa 2 nhóm: cách nhóm trên 28px, nhóm dưới 28px */
.quote-form__group--divided {
  margin-top: var(--space-28);
  padding-top: var(--space-28);
  border-top: 1px solid var(--color-gray-200);
}

/* float: viền trên của fieldset không vẽ xuyên qua legend; chữ Gilroy hạ 1px cho khớp Figma.
   Khoảng cách 7px tới dòng mô tả đặt ở margin-bottom (margin-top của phần tử clear bị nuốt) */
.quote-form__legend {
  float: left;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  margin-bottom: var(--space-7);
  padding: var(--space-2) 0 0;
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-quote-legend);
  color: var(--color-dark);
}

.quote-form__legend + * {
  clear: both;
}

.quote-form__step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-inter);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-s);
  color: var(--color-secondary);
  background-color: var(--color-blue-50);
  border-radius: var(--radius-full);
}

.quote-form__note {
  font-family: var(--font-inter);
  font-size: var(--fs-body-m);
  line-height: normal;
  color: var(--color-gray-500);
}

.quote-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 320px);
  gap: var(--space-21) var(--space-90);
  margin-top: var(--space-23);
}

.quote-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.quote-field__label {
  font-family: var(--font-inter);
  font-size: var(--fs-body-l);
  line-height: normal;
  color: var(--color-dark);
}

.quote-field__required {
  color: var(--color-secondary);
}

.quote-field__control {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 var(--space-13);
  font-size: var(--fs-input-quote);
  line-height: normal;
  color: var(--color-zinc-700);
  background-color: var(--color-white);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-input);
  outline: none;
  transition: border-color var(--transition);
}

.quote-field__control::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

.quote-field__control:focus {
  border-color: var(--color-secondary);
}

.quote-field__control--textarea {
  padding-top: var(--space-12);
  resize: none;
}

.quote-field__select {
  position: relative;
  display: block;
}

.quote-field__select .quote-field__control {
  padding-right: var(--space-48);
  appearance: none;
  cursor: pointer;
}

.quote-field__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-13);
  color: var(--color-zinc-700);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Ô đính kèm viền đứt */
.quote-attach {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  margin-top: var(--space-20);
  padding: var(--space-16);
  font-family: var(--font-inter);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  border: 1px dashed var(--color-input-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.quote-attach__icon {
  flex-shrink: 0;
  width: 20px;
  font-size: var(--fs-h6);
  text-align: center;
  color: var(--color-secondary);
}

.quote-attach__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.quote-attach__title {
  color: var(--color-secondary);
}

.quote-attach__hint {
  color: var(--color-gray-500);
}

.quote-attach__action {
  color: var(--color-dark);
}

.quote-form__consent {
  margin-top: var(--space-28);
  font-family: var(--font-inter);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-gray-500);
}

.quote-form__link {
  text-decoration: underline;
  color: var(--color-secondary);
}

.quote-check {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-16);
  font-family: var(--font-inter);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-gray-700);
  cursor: pointer;
}

.quote-check__input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-xs);
  appearance: none;
  cursor: pointer;
}

/* Figma không có trạng thái chọn — ô vuông xanh ở giữa */
.quote-check__input:checked {
  padding: var(--space-3);
  background:
    linear-gradient(var(--color-secondary), var(--color-secondary)) content-box,
    var(--color-blue-50) padding-box;
  border-color: var(--color-secondary);
}

/* Nút 54px: chữ 26px + 14px trên/dưới */
.quote-form__submit {
  margin-top: var(--space-16);
  padding-top: var(--space-14);
  padding-bottom: var(--space-14);
}

.quote-form__secure {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-top: var(--space-16);
  font-family: var(--font-inter);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-gray-500);
}

/* ----- Sidebar ----- */
.quote-aside {
  display: flex;
  flex-direction: column;
  font-family: var(--font-inter);
}

.quote-service {
  overflow: hidden;
  background-color: var(--color-blue-50);
  border-radius: var(--radius-card);
}

.quote-service__image {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.quote-service__body {
  padding: var(--space-24);
}

.quote-service__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.quote-service__eyebrow .fa-solid {
  font-size: var(--fs-body-l);
}

.quote-service__title {
  margin-top: var(--space-13);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-quote-title);
  color: var(--color-dark);
}

.quote-service__desc {
  margin-top: var(--space-11);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-700);
}

.quote-service__back {
  display: block;
  width: fit-content;
  margin-top: var(--space-11);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-secondary);
}

.quote-steps {
  margin-top: var(--space-24);
  padding: var(--space-25) var(--space-24) var(--space-24);
  background-color: var(--color-dark);
  border-radius: var(--radius-card);
}

.quote-steps__title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  color: var(--color-white);
}

.quote-steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-22);
  margin-top: var(--space-21);
}

.quote-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.quote-steps__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-primary);
  border: 1px solid var(--color-step-ring);
  border-radius: var(--radius-full);
}

.quote-steps__name {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-quote-step);
  color: var(--color-white);
}

.quote-steps__desc {
  margin-top: var(--space-6);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-step-text);
}

.quote-hotline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space-24);
  padding-left: var(--space-8);
}

.quote-hotline__label {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-dark);
}

.quote-hotline__phone {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  margin-top: var(--space-13);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-quote-title);
  color: var(--color-secondary);
}

.quote-hotline__phone .fa-solid {
  width: 20px;
  font-size: var(--fs-h6);
}

.quote-hotline__zalo {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-12);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-secondary);
}

/* Tablet (không có Figma): form trên, cột hỗ trợ xuống dưới; lưới ô nhập co theo màn */
@media (max-width: 1279px) {
  .quote-request__body {
    grid-template-columns: 1fr;
  }

  .quote-form__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-24);
  }
}

/* Figma mobile (659:12410): không breadcrumb, form 1 cột 400, sidebar xếp dưới form */
@media (max-width: 767px) {
  .quote-request {
    padding: var(--space-40) 0 var(--section-py);
  }

  .quote-request__head {
    gap: var(--space-8);
  }

  .quote-request__desc {
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }

  .quote-request__body {
    gap: var(--quote-body-gap-mobile);
    margin-top: var(--quote-body-mt-mobile);
  }

  /* Figma mobile: tiêu đề nhóm 20px; ghi chú, nhãn, đồng ý, checkbox, bảo mật dùng Gilroy (desktop: Inter) */
  .quote-form__legend {
    margin-bottom: var(--space-12);
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .quote-form__group--divided {
    margin-top: var(--space-24);
    padding-top: var(--space-23);
  }

  .quote-form__note,
  .quote-field__label,
  .quote-attach,
  .quote-form__consent,
  .quote-check,
  .quote-form__secure {
    font-family: var(--font-primary);
  }

  .quote-form__note {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
  }

  .quote-form__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-24);
    margin-top: var(--quote-grid-mt-mobile);
  }

  /* Figma: nhóm 02 ghi chú → nhãn xa hơn nhóm 01 3px */
  .quote-form__group--divided .quote-form__grid {
    margin-top: var(--space-23);
  }

  .quote-field {
    gap: var(--space-10);
  }

  .quote-field__label {
    font-size: var(--fs-label-quote-mobile);
    font-weight: var(--fw-medium);
  }

  .quote-form__consent {
    margin-top: var(--quote-consent-mt-mobile);
    line-height: var(--lh-quote-consent-mobile);
  }

  .quote-form__link {
    text-decoration: none;
  }

  /* Figma: ô đính kèm cao 83 (chữ Gilroy thấp hơn Inter 1px) */
  .quote-attach {
    padding-bottom: var(--space-17);
  }

  .quote-check {
    margin-top: var(--space-14);
  }

  .quote-form__secure {
    margin-top: var(--space-17);
  }

  .quote-field__control--textarea {
    height: var(--quote-textarea-h-mobile);
  }

  .quote-form__submit {
    padding: 0 var(--space-20);
  }
}

/* ======================================================================
   LAPTOP (giai đoạn này: 1366 + 1280 — chưa làm mobile/tablet)
   Container giữ 1200px (vẫn còn ≥ 40px lề mỗi bên ở 1280) → chỉ sửa
   các chỗ đặt vị trí theo frame 1440 bị tràn/chồng khi màn hẹp lại.
   ====================================================================== */
@media (max-width: 1366px) {
  /* Footer: link "Chính sách dịch vụ và thiết bị" (223px) tràn cột 200px → lố mép container */
  .footer__col--wide:last-child {
    width: auto;
  }

  /* Sứ mệnh (Giới thiệu): khối chữ bám mép trái container thay vì left 118px cố định —
     ở 1440 cho ra đúng 118px như Figma, ở 1280 không bị ảnh bên phải che */
  .vision-mission__panel--mission .vision-mission__content {
    left: calc(100% - var(--container) / 2 - var(--space-2));
  }
}

@media (max-width: 1280px) {
  /* Gallery chi tiết dịch vụ: mũi tên nằm ngoài hàng thumb 1200px → tràn khỏi màn 1280.
     Thu hàng thumb + khoảng cách để cả hàng (mũi tên + thumb) nằm trong 1232px */
  .detail-gallery__nav {
    gap: var(--space-4);
  }

  .detail-gallery__thumbs {
    width: calc(var(--container) - 2 * var(--space-24));
  }
}