/* ==========================================================================
   PAGE: LASER FOTONA LANDING PAGE
   Scope: #fotona-landing  |  Prefix: fotona-
   Breakpoint chung: ≤ 991px (mobile/tablet)
   Ngoại lệ: Hero đổi ảnh desktop/mobile tại ≤ 767px (art direction)
   ========================================================================== */

/* ==========================================================================
   00. TOKENS & BASE
   ========================================================================== */
#fotona-landing {
  /* Màu */
  --fotona-gold-script: #b69655;
  --fotona-gold-light: #e3c871;
  --fotona-gold: #bf934e;
  --fotona-bronze: #7f6337;
  --fotona-cta-dark: #a88143;
  --fotona-cta-light: #d4ae70;
  --fotona-highlight: #e8d9a8;
  --fotona-bg: #f5f5f5;
  --fotona-white: #fff;
  --fotona-text: #000;
  --fotona-text-soft: #333;

  /* Gradient */
  --fotona-grad-text: linear-gradient(360deg, var(--fotona-gold-script) 0%, var(--fotona-gold-light) 100%);
  --fotona-grad-cta: linear-gradient(90deg, var(--fotona-cta-dark) 0%, var(--fotona-cta-light) 50%, var(--fotona-cta-dark) 100%);
  --fotona-grad-pill: linear-gradient(180deg, var(--fotona-gold) 0%, var(--fotona-bronze) 100%);

  /* Font — weight tối đa của LP là 500 (không dùng 600/700) */
  --fotona-font-display: "SVN-Famous", serif;
  --fotona-font-script: "UVN SangSong", serif;
  --fotona-font-body: "Geomanist", sans-serif;

  /* Hiệu ứng kính */
  --fotona-glass-bg: rgba(255, 255, 255, 0.5);
  --fotona-glass-border: 0.9px solid #fff;
  --fotona-glass-shadow: 0 0 12.42px 0 rgba(255, 255, 255, 0.6) inset,
    0 4.05px 9.18px 0 rgba(191, 147, 78, 0.39);

  /* Layout & motion */
  --fotona-container: 1300px;
  --fotona-container-wide: 1402px;
  --fotona-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  display: block;
  background: var(--fotona-bg);
  color: var(--fotona-text);
  font-family: var(--fotona-font-body);
  overflow-x: clip;
}

#fotona-landing *,
#fotona-landing *::before,
#fotona-landing *::after {
  box-sizing: border-box;
}

#fotona-landing img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Ẩn khỏi mắt nhưng vẫn đọc được bởi Google & trình đọc màn hình */
#fotona-landing .fotona-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#fotona-landing .fotona-container {
  width: 100%;
  max-width: var(--fotona-container);
  margin-inline: auto;
  padding-inline: 15px;
}

/* Container rộng 1402px (nội dung), dùng cho section có bố cục lớn */
#fotona-landing .fotona-container--wide {
  max-width: calc(var(--fotona-container-wide) + 30px);
}

/* ==========================================================================
   00. COMPONENT: TITLE LOCKUP (tiêu đề chữ ký của brand)
   Gồm 3 mảnh tuỳ chọn trong các __row:
   - __script : chữ viết tay UVN SangSong, màu vàng
   - __main   : chữ SVN-Famous, gradient vàng
   - __badge  : pill kính SVN-Famous viết hoa, màu bronze
   Kích thước chỉnh qua biến: --fotona-title-script / --fotona-title-main / --fotona-title-badge
   Khoảng cách giữa các hàng: --fotona-title-gap
   (mặc định = 21% cỡ chữ script → co giãn theo cỡ chữ, khớp Figma ở mọi màn hình)
   QUY TẮC: không dùng margin âm giữa các hàng; muốn sát/thoáng hơn chỉ chỉnh gap.
   ========================================================================== */
#fotona-landing .fotona-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--fotona-title-gap, calc(var(--fotona-title-script, 90px) * 0.21));
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

#fotona-landing .fotona-section-title__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

#fotona-landing .fotona-section-title__script {
  font-family: var(--fotona-font-script);
  font-size: var(--fotona-title-script, 90px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fotona-gold-script);
}

#fotona-landing .fotona-section-title__main {
  display: inline-block;
  padding-block: 0.06em; /* chừa chỗ cho dấu tiếng Việt khi dùng background-clip */
  font-family: var(--fotona-font-display);
  font-size: var(--fotona-title-main, 58px);
  font-weight: 400;
  line-height: 1.1;
  background: var(--fotona-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fotona-gold-script);
}

#fotona-landing .fotona-section-title__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.7em;
  padding: 0.14em 0.75em 0;
  font-family: var(--fotona-font-display);
  font-size: var(--fotona-title-badge, 32px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fotona-bronze);
  border: var(--fotona-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--fotona-glass-shadow);
}
@media screen and (min-width:1439px) {
	#fotona-landing .fotona-concerns .fotona-section-title__badge {
	margin-top: 2.2rem;
}
#fotona-landing .fotona-team .fotona-section-title__badge {
	margin-top: 2.5rem;
}
}

/* Hàng xếp chồng (vd: badge trên, chữ chính dưới) — khoảng cách nội bộ gọn hơn hàng script */
#fotona-landing .fotona-section-title__row--stack {
  flex-direction: column;
  gap: var(--fotona-title-stack-gap, 8px);
}

#fotona-landing .fotona-section-title__main {
  text-align: center;
}

/* Dòng dẫn nhỏ dưới tiêu đề */
#fotona-landing .fotona-section-lead {
  max-width: 900px;
  margin: 20px auto 0;
  font-family: var(--fotona-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--fotona-bronze);
}

#fotona-landing .fotona-nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   00. COMPONENT: BUTTON CTA
   - Nhịp "thở" dùng thuộc tính `scale`, vị trí/hover dùng `translate`
     → không bao giờ đè transform lẫn nhau (lỗi của LP CO2).
   - Vòng sáng lan toả nằm ở ::after, box-shadow của nút vẫn tự do cho hover.
   Biến tuỳ chỉnh: --fotona-btn-h / --fotona-btn-w / --fotona-btn-fs / --fotona-btn-px
   ========================================================================== */
#fotona-landing .fotona-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fotona-btn-h, 53px);
  width: var(--fotona-btn-w, auto);
  padding: 0 var(--fotona-btn-px, 30px);
  margin: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  font-family: var(--fotona-font-body);
  font-size: var(--fotona-btn-fs, 18px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: translate 0.35s var(--fotona-ease), box-shadow 0.35s var(--fotona-ease),
    color 0.35s var(--fotona-ease);
  animation: fotona-btn-breath 2.5s ease-in-out infinite;
}

/* Lớp gradient phủ khi hover */
#fotona-landing .fotona-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--fotona-grad-cta);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.35s var(--fotona-ease), background-position 0.6s var(--fotona-ease);
}

/* Vòng sáng lan toả */
#fotona-landing .fotona-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: fotona-btn-ring 2.5s ease-out infinite;
}

#fotona-landing .fotona-btn:hover {
  translate: 0 -3px;
}

#fotona-landing .fotona-btn:focus-visible {
  outline: 2px solid var(--fotona-bronze);
  outline-offset: 4px;
}

/* Biến thể: nền vàng gradient (chuẩn CTA hệ thống) */
#fotona-landing .fotona-btn--gold {
  color: var(--fotona-white);
  background: var(--fotona-grad-cta);
  background-size: 200% auto;
  border: 0.757px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 15px rgba(127, 99, 55, 0.3), inset 1px 1px 2px var(--fotona-highlight),
    inset -1px -1px 2px var(--fotona-highlight);
}

#fotona-landing .fotona-btn--gold::before {
  opacity: 1;
}

#fotona-landing .fotona-btn--gold:hover::before {
  background-position: right center;
}

#fotona-landing .fotona-btn--gold:hover {
  box-shadow: 0 15px 30px rgba(168, 129, 67, 0.55), inset 1px 1px 2px var(--fotona-highlight),
    inset -1px -1px 2px var(--fotona-highlight);
}

/* Biến thể: nền trắng, hover chuyển sang vàng gradient */
#fotona-landing .fotona-btn--light {
  color: var(--fotona-bronze);
  background: var(--fotona-white);
  box-shadow: 0 6px 18px rgba(127, 99, 55, 0.28), inset 0 -2px 0 rgba(191, 147, 78, 0.18);
}

#fotona-landing .fotona-btn--light:hover {
  color: var(--fotona-white);
  box-shadow: 0 14px 28px rgba(127, 99, 55, 0.45), inset 1px 1px 2px var(--fotona-highlight),
    inset -1px -1px 2px var(--fotona-highlight);
}

#fotona-landing .fotona-btn--light:hover::before {
  opacity: 1;
  background-position: right center;
}

/* Biến thể: nền vàng đặc #BF934E (theo Figma), hover chuyển gradient */
#fotona-landing .fotona-btn--solid {
  --fotona-btn-h: 58px;
  --fotona-btn-px: 30px;
  color: var(--fotona-white);
  background: var(--fotona-gold);
  border: 0.757px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 4px 0 rgba(191, 147, 78, 0.4), 0 0 7.571px 0 rgba(255, 255, 255, 0.41) inset;
}

#fotona-landing .fotona-btn--solid:hover {
  box-shadow: 0 14px 28px rgba(168, 129, 67, 0.5), 0 0 7.571px 0 rgba(255, 255, 255, 0.41) inset;
}

#fotona-landing .fotona-btn--solid:hover::before {
  opacity: 1;
  background-position: right center;
}

/* ==========================================================================
   00. COMPONENT: SCROLLBAR TUỲ BIẾN (đi kèm drag scroller trong JS)
   Độ rộng thumb chỉnh qua --fotona-thumb-w
   ========================================================================== */
#fotona-landing .fotona-scrollbar {
  position: relative;
  height: 20px; /* vùng bấm rộng, phần nhìn thấy mảnh ở giữa */
  cursor: pointer;
  touch-action: none;
}

#fotona-landing .fotona-scrollbar::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 5px;
  translate: 0 -50%;
  border-radius: 99px;
  background: var(--fotona-white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

#fotona-landing .fotona-scrollbar__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--fotona-thumb-w, 16%);
  height: 8px;
  margin-top: -4px;
  border-radius: 99px;
  background: var(--fotona-gold);
  cursor: grab;
  transition: height 0.2s var(--fotona-ease), margin-top 0.2s var(--fotona-ease);
  will-change: transform;
}

#fotona-landing .fotona-scrollbar:hover .fotona-scrollbar__thumb,
#fotona-landing .is-dragging .fotona-scrollbar__thumb {
  height: 10px;
  margin-top: -5px;
}

#fotona-landing .is-dragging .fotona-scrollbar__thumb {
  cursor: grabbing;
}

/* ==========================================================================
   00. COMPONENT: DRAG SCROLLER (vùng cuộn ngang, đi kèm createDragScroller trong JS)
   Markup: [data-fotona-scroller] > [data-scroller-viewport] > ... [data-scroller-item]
   ========================================================================== */
#fotona-landing [data-scroller-viewport] {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
}

#fotona-landing [data-scroller-viewport]::-webkit-scrollbar {
  display: none;
}

#fotona-landing [data-scroller-viewport]:focus-visible {
  box-shadow: 0 0 0 2px var(--fotona-gold);
  border-radius: 20px;
}

#fotona-landing .is-dragging [data-scroller-viewport] {
  cursor: grabbing;
  user-select: none;
}

@media (max-width: 991px) {
  #fotona-landing [data-scroller-viewport] {
    cursor: auto;
    scroll-snap-type: x mandatory;
  }

  /* JS đang điều khiển (kéo thumb) → tạm tắt snap để không giật */
  #fotona-landing .is-driving [data-scroller-viewport] {
    scroll-snap-type: none;
  }

  #fotona-landing [data-scroller-item] {
    scroll-snap-align: start;
  }
}

/* Không có gì để cuộn → ẩn thanh trượt */
#fotona-landing [data-fotona-scroller]:not(.is-scrollable) .fotona-scrollbar {
  visibility: hidden;
}

/* ==========================================================================
   00. COMPONENT: NÚT PREV / NEXT SLIDER (đi kèm createSnapSlider trong JS)
   Section tự quyết định hiển thị (display) và vị trí (top/left/right)
   ========================================================================== */
#fotona-landing .fotona-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  translate: 0 -50%;
  border: 1px solid rgba(191, 147, 78, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(127, 99, 55, 0.2), 0 0 3.8px 1.5px #fff inset;
  color: var(--fotona-gold);
  cursor: pointer;
  appearance: none;
  transition: scale 0.25s var(--fotona-ease), background-color 0.25s var(--fotona-ease), color 0.25s var(--fotona-ease);
}

#fotona-landing .fotona-nav:active {
  scale: 0.9;
  background-color: var(--fotona-gold);
  color: var(--fotona-white);
}

#fotona-landing .fotona-nav:focus-visible {
  outline: 2px solid var(--fotona-bronze);
  outline-offset: 3px;
}

/* ==========================================================================
   00. COMPONENT: YOUTUBE FACADE (video Shorts 9:16)
   ========================================================================== */
#fotona-landing .fotona-yt {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 20px;
  background: var(--fotona-gold);
  box-shadow: 0 10px 24px rgba(127, 99, 55, 0.2);
  isolation: isolate;
}

#fotona-landing .fotona-yt__facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

#fotona-landing .fotona-yt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--fotona-ease), scale 0.7s var(--fotona-ease);
}

#fotona-landing .fotona-yt__thumb.is-loaded {
  opacity: 1;
}

/* Lớp tối nhẹ phía dưới để nút play nổi bật */
#fotona-landing .fotona-yt__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

#fotona-landing .fotona-yt__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  translate: -50% -50%;
  padding-left: 4px;
  border-radius: 50%;
  border: 1.404px solid rgba(255, 255, 255, 0.6);
  background: rgba(191, 147, 78, 0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: var(--fotona-white);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  animation: fotona-yt-ring 2.2s ease-out infinite;
  transition: scale 0.35s var(--fotona-ease), background-color 0.35s var(--fotona-ease);
}

@media (hover: hover) {
  #fotona-landing .fotona-yt__facade:hover .fotona-yt__thumb {
    scale: 1.06;
  }

  #fotona-landing .fotona-yt__facade:hover .fotona-yt__play {
    scale: 1.12;
    background-color: rgba(191, 147, 78, 0.9);
  }
}

#fotona-landing .fotona-yt__facade:focus-visible {
  outline: 3px solid var(--fotona-bronze);
  outline-offset: -3px;
}

#fotona-landing .fotona-yt__player,
#fotona-landing .fotona-yt__player iframe,
#fotona-landing .fotona-yt iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
}

#fotona-landing .fotona-yt.is-playing .fotona-yt__facade {
  visibility: hidden;
}

@keyframes fotona-yt-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
  }
}

@keyframes fotona-btn-breath {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.04;
  }
}

@keyframes fotona-btn-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(191, 147, 78, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 14px rgba(191, 147, 78, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #fotona-landing .fotona-btn,
  #fotona-landing .fotona-btn::after,
  #fotona-landing .fotona-yt__play {
    animation: none;
  }
}

/* ==========================================================================
   01. SECTION: HERO BANNER
   - Banner là ảnh full-width; nút CTA đặt tuyệt đối theo % của ảnh.
   - Kích thước nút tính theo cqw (1cqw = 1% chiều rộng banner)
     → nút co giãn đúng tỉ lệ với ảnh ở mọi màn hình.
   - Cần chỉnh vị trí nút: sửa --fotona-hero-cta-x / --fotona-hero-cta-y.
   ========================================================================== */
#fotona-landing .fotona-hero {
  --fotona-hero-cta-x: 72.7%;
  --fotona-hero-cta-y: 85.5%;

  position: relative;
  background: #eedfc3; /* màu nền tạm trong lúc ảnh đang tải */
}

#fotona-landing .fotona-hero__media {
  position: relative;
  container-type: inline-size;
}

#fotona-landing .fotona-hero__picture,
#fotona-landing .fotona-hero__picture img {
  display: block;
  width: 100%;
}

#fotona-landing .fotona-hero__cta {
  position: absolute;
  z-index: 2;
  left: var(--fotona-hero-cta-x);
  top: var(--fotona-hero-cta-y);
  translate: -50% -50%;
}

#fotona-landing .fotona-hero__cta .fotona-btn {
  /* fallback vw cho trình duyệt cũ không hỗ trợ cqw */
  --fotona-btn-w: max(170px, 14.6vw);
  --fotona-btn-h: max(40px, 3.4vw);
  --fotona-btn-fs: max(13px, 1.05vw);
  --fotona-btn-px: 0px;
}

@supports (width: 1cqw) {
  #fotona-landing .fotona-hero__cta .fotona-btn {
    --fotona-btn-w: max(170px, 14.6cqw);
    --fotona-btn-h: max(40px, 3.4cqw);
    --fotona-btn-fs: max(13px, 1.05cqw);
  }
}

/* --- Mobile art direction (≤ 767px, khớp <source> trong <picture>) --- */
@media (max-width: 767px) {
  #fotona-landing .fotona-hero {
    --fotona-hero-cta-x: 50%;
    --fotona-hero-cta-y: 94.8%;
  }

  #fotona-landing .fotona-hero__cta .fotona-btn {
    --fotona-btn-w: 53.8vw;
    --fotona-btn-h: max(38px, 11.2vw);
    --fotona-btn-fs: max(13px, 3.8vw);
  }

  @supports (width: 1cqw) {
    #fotona-landing .fotona-hero__cta .fotona-btn {
      --fotona-btn-w: 53.8cqw;
      --fotona-btn-h: max(38px, 11.2cqw);
      --fotona-btn-fs: max(13px, 3.8cqw);
    }
  }
}

/* ==========================================================================
   02. SECTION: SIÊU CÔNG NGHỆ
   Desktop (theo Figma 1402 × 538):
   - Tiêu đề 893 × 207 dạt phải, cách mép phải panel ~69px
   - Panel vàng bo 60px; máy 612 × 870 neo đáy panel, lấn trái ~71px, trồi lên trên
   - Cột nội dung bắt đầu từ 44% chiều rộng panel
   Toàn bộ kích thước bố cục tính theo cqw của container (1cqw ≈ 14px ở 1402px)
   → giữ đúng tỉ lệ Figma khi màn hình nhỏ hơn 1402px.
   Mobile: Tiêu đề → Mô tả → Máy trên nền vòm vàng có lưới → Card ngang
   ========================================================================== */
#fotona-landing .fotona-tech {
  position: relative;
  isolation: isolate;
  padding: 40px 0 20px; /* rút gọn khoảng cách với section 03 */
  /* Vệt vàng góc trên-trái (sau đầu máy) theo Figma: Radial #EEB45A 41% → #BF934E 0%
     — tắt hẳn trước khi hết section, không bị cắt */
  background:
    radial-gradient(ellipse 32% 30% at 10% 8%, rgba(238, 180, 90, 0.41) 0%, rgba(191, 147, 78, 0) 100%),
    var(--fotona-bg);
  /* Chỉ cắt ngang; chiều dọc để ngôi sao sáng lan nhẹ lên mép dưới banner */
  overflow-x: clip;
  overflow-y: visible;
}

/* Ngôi sao blur góc phải (desktop) — ảnh cắt từ Figma, lấp lánh chậm.
   Chỉnh kích thước: --fotona-tech-star-w | vị trí: top / right */
#fotona-landing .fotona-tech__star {
  --fotona-tech-star-w: 380px;

  position: absolute;
  z-index: -1;
  top: -90px;
  right: -110px;
  display: block;
  width: var(--fotona-tech-star-w);
  pointer-events: none;
  user-select: none;
  animation: fotona-tech-twinkle 5s ease-in-out infinite;
}

#fotona-landing .fotona-tech__star img {
  width: 100%;
  height: auto;
}

@keyframes fotona-tech-twinkle {
  0%,
  100% {
    opacity: 0.8;
    scale: 0.94;
    rotate: 0deg;
  }
  50% {
    opacity: 1;
    scale: 1.05;
    rotate: 10deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fotona-landing .fotona-tech__star {
    animation: none;
  }
}

#fotona-landing .fotona-tech__container {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

/* --- Tiêu đề --- */
#fotona-landing .fotona-tech__title {
  --fotona-title-script: clamp(64px, 7.85cqw, 110px);
  --fotona-title-main: clamp(34px, 4.14cqw, 58px);
  --fotona-title-badge: clamp(18px, 2.28cqw, 32px);

  position: relative;
  z-index: 3;
  align-self: flex-end;
  justify-content: flex-end;
  width: min(893px, 63.7cqw);
  min-height: 23.7cqw; /* = 332px ở 1402: đủ chỗ cho phần máy trồi lên */
  margin-right: 4.9cqw;
  padding-bottom: 2.9cqw;
}

/* --- Stage: panel vàng + máy + nội dung --- */
#fotona-landing .fotona-tech__stage {
  position: relative;
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 22px;
  min-height: 538px;
  padding: 32px clamp(24px, 4.8cqw, 67px) 33px 0;
}

#fotona-landing .fotona-tech__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 60px;
  background: linear-gradient(180deg, #bf934e 15.87%, rgba(191, 147, 78, 0) 100%);
  pointer-events: none;
}

#fotona-landing .fotona-tech__machine {
  position: absolute;
  z-index: 2;
  left: -5.06cqw;
  bottom: 0;
  width: 43.65cqw; /* = 612px ở 1402 */
  pointer-events: none;
}

#fotona-landing .fotona-tech__machine img {
  width: 100%;
}

/* --- Mô tả --- */
#fotona-landing .fotona-tech__desc {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 10px;
  color: var(--fotona-white);
  font-size: 18px;
  line-height: 1.4;
}

#fotona-landing .fotona-tech__desc p {
  margin: 0;
}

#fotona-landing .fotona-tech__desc strong {
  font-weight: inherit; /* desktop không in đậm theo Figma */
}

/* --- Card công nghệ --- */
#fotona-landing .fotona-tech__cards {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.14cqw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-tech__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  transition: translate 0.4s var(--fotona-ease);
}

#fotona-landing .fotona-tech__card-media {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
 
}

#fotona-landing .fotona-tech__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--fotona-ease);
}

#fotona-landing .fotona-tech__card-text {
  flex: 1;
  margin: -2px 12px 0;
  padding: 14px 16px 16px;
  border-radius: 0 0 14px 14px;
  background: var(--fotona-white);
  box-shadow: 0 6px 16px rgba(127, 99, 55, 0.14);
  color: var(--fotona-bronze);
  font-size: 18px;
  line-height: 1.35;
  text-align: justify;
  hyphens: none;
}
/*
@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-tech__card:hover {
    translate: 0 -8px;
  }

  #fotona-landing .fotona-tech__card:hover .fotona-tech__card-media img {
    scale: 1.08;
  }
}

/* Laptop nhỏ (992–1199px): card hẹp → bỏ căn đều để tránh chữ bị giãn khoảng */
@media (min-width: 992px) and (max-width: 1199px) {
  #fotona-landing .fotona-tech__card-text {
    margin-inline: 8px;
    padding: 12px 12px 14px;
    font-size: 17px;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   02. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-tech {
    padding: 36px 0 44px;
  }

  /* Ngôi sao blur chỉ dùng trên desktop */
  #fotona-landing .fotona-tech__star {
    display: none;
  }

  #fotona-landing .fotona-tech__title {
    --fotona-title-script: clamp(56px, 16cqw, 84px);
    --fotona-title-main: clamp(34px, 9.5cqw, 50px);
    --fotona-title-badge: clamp(20px, 5.6cqw, 30px);

    align-self: center;
    width: 100%;
    min-height: 0;
    margin: 0 0 20px;
    padding: 0;
  }

  #fotona-landing .fotona-tech__title-row {
    flex-direction: column;
    gap: 8px;
  }

  #fotona-landing .fotona-tech__stage {
    /* Kích thước máy trên mobile — mọi thứ trong vòm tính theo biến này */
    --fotona-tech-mw: min(86cqw, 460px);

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0;
    width: 100%;
    max-width: 560px;
    min-height: 0;
    margin-inline: auto;
    padding: 0;
  }

  /* Mô tả lên trên, chữ tối trên nền sáng, in đậm FDA/CE */
  #fotona-landing .fotona-tech__desc {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 24px;
    color: var(--fotona-text-soft);
    text-align: justify;
  }

  #fotona-landing .fotona-tech__desc strong {
    font-weight: 500;
    color: var(--fotona-text);
  }

  /* Vòm vàng + lưới phía sau máy */
  #fotona-landing .fotona-tech__bg {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: calc(var(--fotona-tech-mw) * 1.05);
    height: calc(var(--fotona-tech-mw) * 1.3); /* ≈ 94% chiều cao máy */
    border-radius: 999px;
    background:
      var(--fotona-tech-grid, none) center top / 100% auto no-repeat,
      linear-gradient(180deg, #bf934e 15.87%, rgba(191, 147, 78, 0) 100%);
  }

  #fotona-landing .fotona-tech__machine {
    position: relative;
    left: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: var(--fotona-tech-mw);
  }

  /* Card ngang: ảnh trái, khung chữ trắng trượt ra sau ảnh */
  #fotona-landing .fotona-tech__cards {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 12px;
  }

  #fotona-landing .fotona-tech__card {
    display: grid;
    grid-template-columns: 44% minmax(0, 1fr);
    align-items: center;
  }

  #fotona-landing .fotona-tech__card-media {
    grid-column: 1;
    grid-row: 1;
    border-radius: 20px;
  }

  #fotona-landing .fotona-tech__card-text {
    grid-column: 1 / -1;
    grid-row: 1;
    flex: none;
    margin: 0;
    padding: 18px 16px 18px calc(44% + 16px);
    border-radius: 16px;
  }
}

/* ==========================================================================
   03. SECTION: HƠN 3000+ KHÁCH HÀNG
   Desktop 1920: 3 card 406px hiện cùng lúc, kéo/cuộn để xem 3 card còn lại
   Mobile: 1 card/màn, vuốt native + snap; video Shorts trượt ngang
   ========================================================================== */
#fotona-landing .fotona-results {
  position: relative;
  padding: 0 0 30px; /* rút gọn khoảng cách với section 02 (trên) và 04 (dưới) */
  /* Bỏ vệt vàng sát mép trên (nguyên nhân tạo đường cắt ngang với section 02); nền dùng màu chung của trang */
  background: transparent;
  overflow: clip;
}

#fotona-landing .fotona-results__container {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#fotona-landing .fotona-results__title {
  --fotona-title-script: clamp(56px, 6.9cqw, 90px);
  --fotona-title-main: clamp(34px, 4.8cqw, 62px);
  --fotona-title-badge: clamp(18px, 2.3cqw, 30px);
}

/* --- Slider before/after --- */
#fotona-landing .fotona-results__slider {
  width: 100%;
  max-width: 1264px; /* = 3 × 406 + 2 × 23 */
  margin-top: 56px;
}

#fotona-landing .fotona-results__track {
  display: flex;
  gap: 23px;
  width: max-content;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

#fotona-landing .fotona-results__card {
  flex: none;
  width: 406px;
  margin: 0;
}

#fotona-landing .fotona-results__media {
  position: relative;
}

#fotona-landing .fotona-results__media img {
  width: 100%;
  aspect-ratio: 406 / 304;
  object-fit: cover;
  border-radius: 20px;
  background: #e4e4e4;
  -webkit-user-drag: none;
  user-select: none;
}

/* Pill tên – tuổi (theo spec Figma) */
#fotona-landing .fotona-results__name {
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 204.575px;
  height: 59.297px;
  margin: 0;
  padding: 0 18px;
  translate: -50% -39%;
  border-radius: 18.96px;
  border: 1.404px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 30.8%, #fff 100%);
  backdrop-filter: blur(7.022px);
  -webkit-backdrop-filter: blur(7.022px);
  box-shadow: 0 6px 14px rgba(127, 99, 55, 0.16);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--fotona-bronze);
}

/* 2 ô trước / sau */
#fotona-landing .fotona-results__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin: 7px 17px 0;
}

#fotona-landing .fotona-results__note {
  min-height: 153.656px;
  padding: 36px 12px 14px 14px; /* chừa chỗ cho pill tên đè lên */
  border-radius: 18.96px;
  border: 1.404px solid rgba(255, 255, 255, 0.5);
  background: var(--fotona-gold);
  backdrop-filter: blur(7.022px);
  -webkit-backdrop-filter: blur(7.022px);
  color: var(--fotona-white);
}

#fotona-landing .fotona-results__note ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
}

#fotona-landing .fotona-results__note li {
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.3;
  color: inherit;
}

#fotona-landing .fotona-results__note li::marker {
  color: var(--fotona-white);
}

#fotona-landing .fotona-results__slider .fotona-scrollbar {
  --fotona-thumb-w: 16%;
  margin-top: 30px;
}

/* --- Video Shorts --- */
#fotona-landing .fotona-results__videos {
  width: 100%;
  margin-top: 50px;
}

#fotona-landing .fotona-results__videos-track {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

#fotona-landing .fotona-results__video {
  flex: none;
  width: 295px;
  margin: 0;
}

/* --- CTA --- */
#fotona-landing .fotona-results__cta {
  margin-top: 44px;
}

/* --------------------------------------------------------------------------
   03. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-results {
    padding: 40px 0 50px;
  }

  #fotona-landing .fotona-results__title {
    --fotona-title-script: clamp(56px, 16cqw, 84px);
    --fotona-title-main: clamp(32px, 10.3cqw, 52px);
    --fotona-title-badge: clamp(18px, 5.6cqw, 30px);
  }

  /* Figma mobile không có dòng dẫn */
  #fotona-landing .fotona-results__lead {
    display: none;
  }

  /* Slider tràn sát mép màn hình */
  #fotona-landing .fotona-results__slider {
    width: calc(100% + 30px);
    max-width: none;
    margin: 28px -15px 0;
  }

  #fotona-landing .fotona-results__viewport {
    scroll-padding-inline: 8px;
  }

  #fotona-landing .fotona-results__track {
    gap: 16px;
    padding-inline: 8px;
  }

  #fotona-landing .fotona-results__card {
    width: min(406px, calc(100vw - 16px));
  }

  #fotona-landing .fotona-results__note {
    min-height: 140px;
    padding: 34px 10px 12px 12px;
  }

  #fotona-landing .fotona-results__note li {
    font-size: 17px;
  }

  #fotona-landing .fotona-results__slider .fotona-scrollbar {
    --fotona-thumb-w: 45%;
    margin: 20px 25px 0;
  }

  /* Video: trượt ngang, lộ 1 phần video kế tiếp */
  #fotona-landing .fotona-results__videos {
    width: calc(100% + 30px);
    margin: 28px -15px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 25px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  #fotona-landing .fotona-results__videos::-webkit-scrollbar {
    display: none;
  }

  #fotona-landing .fotona-results__videos-track {
    justify-content: flex-start;
    gap: 16px;
    width: max-content;
    margin-inline: auto; /* đủ chỗ thì căn giữa, thiếu chỗ thì cuộn từ trái */
    padding: 0 25px 30px; /* chừa chỗ cho bóng đổ, tránh bị cắt */
  }

  #fotona-landing .fotona-results__video {
    width: min(295px, 70vw);
    scroll-snap-align: start;
  }

  #fotona-landing .fotona-yt__play {
    width: 58px;
    height: 58px;
  }

  #fotona-landing .fotona-results__cta {
    margin-top: 12px;
  }

  #fotona-landing .fotona-results__cta .fotona-btn {
    --fotona-btn-h: 52px;
    --fotona-btn-px: 26px;
    --fotona-btn-fs: 16px;
  }
}

/* ==========================================================================
   04. SECTION: GẠT BỎ NHỮNG NỖI LO DA XẤU
   Desktop: container 1116px, 4 card 255 × 439, card chẵn hạ thấp tạo nhịp so le
   Mobile: lưới 2 × 2, không so le, có dòng dẫn dưới tiêu đề
   ========================================================================== */
#fotona-landing .fotona-concerns {
  position: relative;
  padding: 0 0 90px; /* rút gọn khoảng cách với section 03 */
  /* Vệt vàng đáy đặt cao hơn mép dưới → tắt hẳn trước khi hết section, không tạo đường cắt với section 05 */
  background:
    radial-gradient(ellipse 50% 25% at 50% 70%, rgba(227, 200, 113, 0.22) 0%, rgba(227, 200, 113, 0) 100%),
    var(--fotona-bg);
  overflow: clip;
}

#fotona-landing .fotona-concerns__container {
  container-type: inline-size;
  max-width: calc(1116px + 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Tiêu đề: desktop script + badge cùng hàng --- */
#fotona-landing .fotona-concerns__title {
  --fotona-title-script: clamp(64px, 8.6cqw, 96px);
  --fotona-title-main: clamp(34px, 4.84cqw, 54px);
  --fotona-title-badge: clamp(18px, 2.7cqw, 30px);
}

#fotona-landing .fotona-concerns__title-row {
  gap: 10px;
}

/* Figma desktop không có dòng dẫn */
#fotona-landing .fotona-concerns__lead {
  display: none;
}

/* --- Danh sách card --- */
#fotona-landing .fotona-concerns__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 255px));
  justify-content: center;
  align-items: start;
  gap: 32px;
  width: 100%;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-concerns__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 439px;
  margin: 0;
  padding: 18px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.55) 100%);
  box-shadow:
    0 4px 10px rgba(191, 147, 78, 0.28),
    inset 0 -1px 0 rgba(191, 147, 78, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.6);
  text-align: center;
  transition: translate 0.45s var(--fotona-ease), box-shadow 0.45s var(--fotona-ease);
}

/* Nhịp so le: card thứ 2 và 4 hạ thấp */
#fotona-landing .fotona-concerns__card:nth-child(even) {
  margin-top: 67px;
}

#fotona-landing .fotona-concerns__media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}

#fotona-landing .fotona-concerns__media img {
  width: 100%;
  aspect-ratio: 218 / 235;
  object-fit: cover;
  transition: scale 0.7s var(--fotona-ease);
}

#fotona-landing .fotona-concerns__name {
  margin: 22px 0 0;
  padding: 0;
  font-family: var(--fotona-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance; /* chia dòng đều: "TRẺ HÓA & CHỐNG / LÃO HÓA" */
  color: var(--fotona-bronze);
}

#fotona-landing .fotona-concerns__desc {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #6b5a45;
}

@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-concerns__card:hover {
    translate: 0 -10px;
    box-shadow:
      0 18px 34px rgba(191, 147, 78, 0.38),
      inset 0 -1px 0 rgba(191, 147, 78, 0.5),
      inset 0 0 12px rgba(255, 255, 255, 0.6);
  }

  #fotona-landing .fotona-concerns__card:hover .fotona-concerns__media img {
    scale: 1.06;
  }
}

/* Laptop nhỏ: card co theo cột, giữ nhịp so le */
@media (min-width: 992px) and (max-width: 1199px) {
  #fotona-landing .fotona-concerns__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  #fotona-landing .fotona-concerns__card {
    padding: 14px 14px 18px;
  }
}

/* --------------------------------------------------------------------------
   04. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-concerns {
    padding: 4px 0 50px;
  }

  /* Tiêu đề 3 hàng: script → badge → chữ chính */
  #fotona-landing .fotona-concerns__title {
    --fotona-title-script: clamp(56px, 16cqw, 84px);
    --fotona-title-main: clamp(30px, 9.2cqw, 48px);
    --fotona-title-badge: clamp(18px, 6cqw, 30px);
    --fotona-title-gap: var(--fotona-title-stack-gap, 8px); /* badge → chữ chính */
  }

  #fotona-landing .fotona-concerns__title-row {
    flex-direction: column;
    gap: calc(var(--fotona-title-script) * 0.21); /* script → badge: giữ quy tắc 21% */
  }

  #fotona-landing .fotona-concerns__lead {
    display: block;
    max-width: 560px;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: var(--fotona-text-soft);
  }

  #fotona-landing .fotona-concerns__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    max-width: 560px;
    margin-top: 24px;
  }

  #fotona-landing .fotona-concerns__card,
  #fotona-landing .fotona-concerns__card:nth-child(even) {
    min-height: 0;
    margin-top: 0;
    padding: 12px 12px 18px;
    border-radius: 18px;
  }

  #fotona-landing .fotona-concerns__name {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.35;
  }

  #fotona-landing .fotona-concerns__desc {
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.45;
  }
}

/* ==========================================================================
   05. SECTION: HỆ THỐNG LASER ĐA ỨNG DỤNG
   Desktop (container 1402): ảnh mẫu cột trái tràn ra lề trái màn hình,
   tiêu đề + danh sách ở cột phải rộng 667px.
   Mobile: Tiêu đề → Ảnh mẫu (bố cục riêng) → Danh sách.
   Nền xám lụa: ảnh riêng desktop/mobile, trình duyệt chỉ tải ảnh đúng thiết bị.
   ========================================================================== */
#fotona-landing .fotona-multi {
  /* Độ dài vùng mờ ở mép trên & dưới nền (càng lớn càng mờ dài) */
  --fotona-multi-fade: clamp(70px, 7.5vw, 150px);

  position: relative;
  isolation: isolate;
  padding-top: 60px;
  background: transparent;
  overflow: clip;
}

/* Nền xám lụa tách ra lớp riêng → làm mờ dần 2 mép trên/dưới bằng mask,
   hoà vào nền section trước & sau giống Figma. Nội dung (ảnh mẫu, chữ) không bị mờ. */
#fotona-landing .fotona-multi::before {
  --_f: var(--fotona-multi-fade);

  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fotona-multi-bg-pc, none) center / cover no-repeat, #f1f1f1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--_f) * 0.4),
      #000 var(--_f),
      #000 calc(100% - var(--_f)),
      rgba(0, 0, 0, 0.35) calc(100% - var(--_f) * 0.4),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--_f) * 0.4),
      #000 var(--_f),
      #000 calc(100% - var(--_f)),
      rgba(0, 0, 0, 0.35) calc(100% - var(--_f) * 0.4),
      transparent 100%);
}

#fotona-landing .fotona-multi__container {
  container-type: inline-size;
  display: grid;
  /* cột trái / cột nội dung 667px / lề phải 44px (theo Figma ở 1402). Dùng % vì cqw không áp lên chính container */
  grid-template-columns: minmax(0, 1fr) 47.6% 3.14%;
  grid-template-rows: auto auto 1fr;
}

/* --- Ảnh mẫu: neo đáy section, lấn ra lề trái nhưng không tràn khỏi màn hình --- */
#fotona-landing .fotona-multi__media {
  --fotona-multi-gutter: calc((100vw - 100cqw) / 2);
  --fotona-multi-bleed: min(11.55cqw, var(--fotona-multi-gutter)); /* = 162px ở 1920 */

  position: relative;
  z-index: 0;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: end;
  display: block;
  width: calc(53.15cqw + var(--fotona-multi-bleed));
  margin-left: calc(var(--fotona-multi-bleed) * -1);
  /* Phần đáy ảnh mẫu là vùng mờ trống → cho tràn xuống & bị cắt, section ngắn lại ~140px ở 1402.
     Muốn cắt nhiều/ít hơn: chỉnh --fotona-multi-cut */
  margin-bottom: calc(var(--fotona-multi-cut, 10cqw) * -1);
  pointer-events: none;
}

#fotona-landing .fotona-multi__media img {
  width: 100%;
  height: auto;
}

/* --- Tiêu đề --- */
#fotona-landing .fotona-multi__title {
  --fotona-title-script: clamp(60px, 6.85cqw, 96px);
  --fotona-title-main: clamp(34px, 4.14cqw, 58px);
  --fotona-title-badge: clamp(18px, 2.14cqw, 30px);

  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  padding-top: 8px;
}

#fotona-landing .fotona-multi__title-row {
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 8px;
}

/* --- Danh sách lợi ích --- */
#fotona-landing .fotona-multi__list {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  margin: 36px clamp(12px, 1.8cqw, 25px) 40px clamp(12px, 2.35cqw, 33px);
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-multi__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 6.55cqw, 92px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  margin: 0;
  padding: 11px clamp(16px, 6.5cqw, 92px) 11px clamp(16px, 2.1cqw, 29px);
}

/* Đường kẻ vàng mờ 2 đầu giữa các mục */
#fotona-landing .fotona-multi__item + .fotona-multi__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(191, 147, 78, 0) 0%,
      rgba(191, 147, 78, 0.6) 18%,
      rgba(191, 147, 78, 0.6) 82%,
      rgba(191, 147, 78, 0) 100%);
}

#fotona-landing .fotona-multi__icon {
  width: 100%;
  height: auto;
  transition: scale 0.45s var(--fotona-ease), rotate 0.45s var(--fotona-ease);
}

#fotona-landing .fotona-multi__text {
  font-size: 18px;
  line-height: 1.5;
  color: #5b4a2e;
  transition: color 0.35s var(--fotona-ease), translate 0.35s var(--fotona-ease);
}

@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-multi__item:hover .fotona-multi__icon {
    scale: 1.12;
    rotate: -8deg;
  }

  #fotona-landing .fotona-multi__item:hover .fotona-multi__text {
    color: var(--fotona-gold);
    translate: 6px 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #fotona-landing .fotona-multi__text {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   05. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-multi {
    --fotona-multi-fade: 48px;

    padding: 4px 0 30px;
  }

  #fotona-landing .fotona-multi::before {
    background: var(--fotona-multi-bg-mb, none) center top / cover no-repeat, #f1f1f1;
  }

  #fotona-landing .fotona-multi__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: center;
  }

  #fotona-landing .fotona-multi__title {
    --fotona-title-script: clamp(56px, 15.5cqw, 84px);
    --fotona-title-main: clamp(34px, 9.8cqw, 52px);
    --fotona-title-badge: clamp(18px, 5.9cqw, 30px);

    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }

  #fotona-landing .fotona-multi__title-row {
    flex-direction: column;
  }

  /* Ảnh tràn sát mép màn hình, tối đa 560px ở tablet */
  #fotona-landing .fotona-multi__media {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
    width: min(calc(100% + 30px), 560px);
    margin: 10px -15px 0;
  }

  #fotona-landing .fotona-multi__list {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: 560px;
    margin: 0;
  }

  #fotona-landing .fotona-multi__item {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 15px;
    padding: 14px 4px 14px 16px;
  }

  #fotona-landing .fotona-multi__text {
    font-size: 18px;
    line-height: 1.45;
  }
}

/* ==========================================================================
   06. SECTION: KHUYẾN MÃI GIÁ TRẢI NGHIỆM
   - Banner là ảnh (desktop 1291 × 756 / mobile 429 × 789), không có tiêu đề HTML hiển thị
   - Ruy băng neo giữa mép trên banner; hộp quà lớn góc trái, hộp quà nhỏ góc phải
   - 2 vệt sáng vàng brand so le (trên-trái / dưới-phải) vẽ bằng CSS
   - CTA: desktop đặt trên ảnh theo % ; mobile nằm dưới ảnh
   Mọi vị trí tính theo % / cqw của khung banner → giữ đúng tỉ lệ ở mọi màn hình
   ========================================================================== */
#fotona-landing .fotona-offer {
  position: relative;
  isolation: isolate;
  padding: 110px 0 50px; /* đủ chỗ cho ruy băng + hộp quà; đáy liền mạch với section 07 như Figma */
  background: var(--fotona-bg);
  /* Chỉ cắt ngang (chống tràn màn hình); chiều dọc để vệt sáng vàng lan tự nhiên xuống section 07 */
  overflow-x: clip;
  overflow-y: visible;
}

/* 2 vệt sáng vàng so le */
#fotona-landing .fotona-offer::before,
#fotona-landing .fotona-offer::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 46vw;
  max-width: 880px;
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 174, 112, 0.55), rgba(212, 174, 112, 0));
  filter: blur(40px);
  pointer-events: none;
}

#fotona-landing .fotona-offer::before {
  top: 2%;
  left: -6%;
}

/* Vệt sáng dưới-phải lan xuống sau tiêu đề "Đội ngũ" (section 07) */
#fotona-landing .fotona-offer::after {
  right: -6%;
  bottom: -28%;
}

/* --- Khung banner --- */
#fotona-landing .fotona-offer__stage {
  --fotona-offer-cta-x: 70.6%;
  --fotona-offer-cta-y: 85.4%;

  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1291px;
  margin-inline: auto;
}

#fotona-landing .fotona-offer__banner {
  position: relative;
  z-index: 1;
  display: block;
}

#fotona-landing .fotona-offer__banner img {
  width: 100%;
  height: auto;
}

/* --- Trang trí: ruy băng + hộp quà --- */
#fotona-landing .fotona-offer__deco {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

#fotona-landing .fotona-offer__bow {
  z-index: 2;
  left: 50%;
  bottom: 100%;
  width: 24%;
  translate: -50% 10%; /* chân nơ chạm mép trên banner */
}

#fotona-landing .fotona-offer__gift--lg {
  z-index: 0;
  left: -9.4%;
  top: -13.4%;
  width: 17%;
  animation: fotona-gift-float 6s ease-in-out infinite;
}

#fotona-landing .fotona-offer__gift--sm {
  z-index: 3;
  left: 92.8%;
  top: 80.6%;
  width: 15.7%;
  animation: fotona-gift-float 5s ease-in-out -2s infinite reverse;
}

@keyframes fotona-gift-float {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -14px;
    rotate: -5deg;
  }
}

/* --- CTA nằm trên ảnh (desktop) --- */
#fotona-landing .fotona-offer__cta {
  position: absolute;
  z-index: 4;
  left: var(--fotona-offer-cta-x);
  top: var(--fotona-offer-cta-y);
  translate: -50% -50%;
}

#fotona-landing .fotona-offer__cta .fotona-btn {
  /* = 58px cao / chữ ~17px ở banner 1291px; nhỏ nhất vẫn đủ bấm */
  --fotona-btn-h: max(40px, 4.5cqw);
  --fotona-btn-fs: max(12px, 1.3cqw);
  --fotona-btn-px: max(16px, 2.3cqw);
}

@media (prefers-reduced-motion: reduce) {
  #fotona-landing .fotona-offer__gift {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   06. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-offer {
    padding: 80px 0 50px;
  }

  #fotona-landing .fotona-offer::before,
  #fotona-landing .fotona-offer::after {
    width: 110vw;
    filter: blur(30px);
  }

  #fotona-landing .fotona-offer::before {
    top: 12%;
    left: -40%;
  }

  #fotona-landing .fotona-offer::after {
    right: -40%;
    bottom: 8%;
  }

  /* Banner tràn sát mép màn hình (ảnh đã có lề trong suốt), tối đa 480px ở tablet */
  #fotona-landing .fotona-offer__container {
    padding-inline: 0;
  }

  #fotona-landing .fotona-offer__stage {
    width: min(100%, 480px);
  }

  #fotona-landing .fotona-offer__bow {
    width: 39%;
  }

  #fotona-landing .fotona-offer__gift--lg {
    z-index: 3;
    left: -4%;
    top: 21.5%;
    width: 16%;
  }

  #fotona-landing .fotona-offer__gift--sm {
    left: 88%;
    top: 76%;
    width: 15%;
  }

  /* CTA chuyển xuống dưới ảnh */
  #fotona-landing .fotona-offer__cta {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    margin-top: 14px;
    text-align: center;
  }

  #fotona-landing .fotona-offer__cta .fotona-btn {
    --fotona-btn-h: 48px;
    --fotona-btn-fs: 16px;
    --fotona-btn-px: 28px;
  }
}

/* ==========================================================================
   07. SECTION: ĐỘI NGŨ BÁC SĨ & KỸ THUẬT VIÊN
   Desktop: 3 cột bác sĩ (ảnh 370 × 392) trên nền pattern lục giác,
            chứng chỉ hiện 5 hình + kéo thanh trượt xem hình 6
   Mobile : slider 1 bác sĩ/màn, nút prev/next canh giữa ảnh;
            chứng chỉ hiện 2,5 hình, vuốt ngang
   ========================================================================== */
#fotona-landing .fotona-team {
  position: relative;
  padding: 50px 0 20px; /* đầu: liền mạch với section 06; đáy: rút gọn với section 08 */
  /* Nền trong suốt: để vệt sáng vàng của section 06 hiện xuyên qua, không bị cắt ngang */
  background: transparent;
  overflow: clip;
}

#fotona-landing .fotona-team__container {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Tiêu đề: desktop script + badge cùng hàng --- */
#fotona-landing .fotona-team__title {
  --fotona-title-script: clamp(60px, 7.1cqw, 90px);
  --fotona-title-main: clamp(34px, 4.57cqw, 58px);
  --fotona-title-badge: clamp(18px, 2.2cqw, 28px);
  /* Desktop: hàng "Đội ngũ | badge" → "tận tâm…" sát hơn (10% cỡ chữ script thay vì 21%) */
  --fotona-title-gap: calc(var(--fotona-title-script) * 0.1);
}

#fotona-landing .fotona-team__title-row {
  gap: 10px;
}

/* --- Khối bác sĩ --- */
#fotona-landing .fotona-team__doctors {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 40px;
}

/* Pattern lục giác phía sau (chỉ desktop) */
#fotona-landing .fotona-team__doctors::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100vw;
  max-width: 1920px;
  height: 130%;
  translate: -50% -50%;
  background: center / contain no-repeat;
  pointer-events: none;
}

/* Khai báo ảnh trong media desktop → mobile chắc chắn không tải */
@media (min-width: 992px) {
  #fotona-landing .fotona-team__doctors::before {
    background-image: var(--fotona-team-pattern, none);
  }
}

#fotona-landing .fotona-team__viewport {
  position: relative;
}

#fotona-landing .fotona-team__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-team__doctor {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

#fotona-landing .fotona-team__photo {
  width: min(370px, 100%);
  margin: 0;
}

#fotona-landing .fotona-team__photo img {
  width: 100%;
  aspect-ratio: 370 / 392;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
  transition: scale 0.6s var(--fotona-ease);
  transform-origin: center bottom;
}

/* Kính mờ dùng chung cho ô tên + ô mô tả (spec Figma) */
#fotona-landing .fotona-team__head,
#fotona-landing .fotona-team__bio {
  border-radius: 29.303px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
  box-shadow: 0 0 3.802px 1.521px #fff inset;
  backdrop-filter: blur(3.802px);
  -webkit-backdrop-filter: blur(3.802px);
}

#fotona-landing .fotona-team__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 0 3.802px 1.521px #fff inset, 0 6px 18px rgba(191, 147, 78, 0.12);
}

#fotona-landing .fotona-team__name {
  margin: 0;
  padding: 0;
  font-family: var(--fotona-font-display);
  font-size: clamp(22px, 2.2cqw, 28px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

#fotona-landing .fotona-team__prefix {
  color: var(--fotona-text-soft);
}

#fotona-landing .fotona-team__fullname {
  background: var(--fotona-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fotona-gold-script);
  padding-block: 0.06em;
}

#fotona-landing .fotona-team__spec {
  margin: 0;
  padding: 3px 12px;
  border: 1px solid rgba(191, 147, 78, 0.35);
  border-radius: 999px;
  background: var(--fotona-white);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fotona-text-soft);
}

#fotona-landing .fotona-team__bio {
  flex: 1;
  width: calc(100% - 48px);
  margin-top: 12px;
  padding: 28px 22px 24px;
}

#fotona-landing .fotona-team__bio ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
}

#fotona-landing .fotona-team__bio li {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--fotona-text-soft);
}

#fotona-landing .fotona-team__bio li::marker {
  color: var(--fotona-gold);
}

@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-team__doctor:hover .fotona-team__photo img {
    scale: 1.05;
  }
}

/* Nút prev/next: chỉ dùng trên mobile */
#fotona-landing .fotona-team__nav {
  display: none;
}

/* --- Chứng chỉ --- */
#fotona-landing .fotona-team__certs {
  width: 100%;
  margin-top: 56px;
}

#fotona-landing .fotona-team__certs-track {
  display: flex;
  gap: 26px;
  width: max-content;
  margin: 0;
  padding: 8px 0 14px;
  list-style: none;
}

#fotona-landing .fotona-team__cert {
  flex: none;
  width: 200px;
  margin: 0;
}

#fotona-landing .fotona-team__cert-link {
  display: grid;
  place-items: center;
  aspect-ratio: 200 / 130;
  border-radius: 6px;
  cursor: zoom-in;
  -webkit-user-drag: none;
}

#fotona-landing .is-dragging .fotona-team__cert-link {
  cursor: grabbing;
}

#fotona-landing .fotona-team__cert-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
  user-select: none;
  -webkit-user-drag: none;
  transition: scale 0.4s var(--fotona-ease), filter 0.4s var(--fotona-ease);
}

@media (hover: hover) {
  #fotona-landing .fotona-team__cert-link:hover img {
    scale: 1.06;
    filter: drop-shadow(0 10px 20px rgba(127, 99, 55, 0.28));
  }
}

#fotona-landing .fotona-team__cert-link:focus-visible {
  outline: 2px solid var(--fotona-gold);
  outline-offset: 3px;
}

#fotona-landing .fotona-team__certs .fotona-scrollbar {
  --fotona-thumb-w: 47%;
  max-width: 1045px;
  margin: 24px auto 0;
}

/* --- CTA --- */
#fotona-landing .fotona-team__cta {
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   07. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-team {
    padding: 4px 0 50px;
  }

  /* Tiêu đề 3 hàng: script → badge → chữ chính */
  #fotona-landing .fotona-team__title {
    --fotona-title-script: clamp(56px, 16cqw, 84px);
    --fotona-title-main: clamp(26px, 7.6cqw, 44px);
    --fotona-title-badge: clamp(18px, 6.2cqw, 30px);
    --fotona-title-gap: var(--fotona-title-stack-gap, 8px);
  }

  #fotona-landing .fotona-team__title-row {
    flex-direction: column;
    gap: calc(var(--fotona-title-script) * 0.21);
  }

  #fotona-landing .fotona-team__lead {
    max-width: 560px;
    margin-top: 16px;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: var(--fotona-text-soft);
  }

  /* Slider bác sĩ */
  #fotona-landing .fotona-team__doctors {
    --fotona-team-photo-w: min(300px, 76cqw);

    max-width: 460px;
    margin-top: 24px;
  }

  #fotona-landing .fotona-team__doctors::before {
    content: none; /* mobile không dùng pattern */
  }

  #fotona-landing .fotona-team__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #fotona-landing .fotona-team__viewport::-webkit-scrollbar {
    display: none;
  }

  #fotona-landing .fotona-team__track {
    display: flex;
    gap: 0;
  }

  #fotona-landing .fotona-team__doctor {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #fotona-landing .fotona-team__photo {
    width: var(--fotona-team-photo-w);
  }

  #fotona-landing .fotona-team__head {
    padding: 12px 12px 10px;
  }

  #fotona-landing .fotona-team__name {
    font-size: clamp(22px, 6.6cqw, 28px);
  }

  #fotona-landing .fotona-team__spec {
    font-size: 17px;
  }

  #fotona-landing .fotona-team__bio {
    flex: none;
    width: calc(100% - 36px);
    margin-top: 10px;
    padding: 20px 18px 20px;
  }

  #fotona-landing .fotona-team__bio ul {
    gap: 12px;
  }

  #fotona-landing .fotona-team__bio li {
    font-size: 17px;
  }

  /* Nút prev/next (component .fotona-nav) canh giữa theo chiều cao ảnh bác sĩ */
  #fotona-landing .fotona-team__nav {
    display: grid;
    top: calc(var(--fotona-team-photo-w) * 392 / 370 / 2);
  }

  #fotona-landing .fotona-team__nav--prev {
    left: 4px;
  }

  #fotona-landing .fotona-team__nav--next {
    right: 4px;
  }

  /* Chứng chỉ: 2,5 hình / màn, tràn sát mép */
  #fotona-landing .fotona-team__certs {
    width: calc(100% + 30px);
    margin: 28px -15px 0;
  }

  #fotona-landing .fotona-team__certs-viewport {
    scroll-padding-inline: 15px;
  }

  #fotona-landing .fotona-team__certs-track {
    gap: 12px;
    padding-inline: 15px;
  }

  #fotona-landing .fotona-team__cert {
    width: calc((100vw - 39px) / 2.5);
  }

  #fotona-landing .fotona-team__certs .fotona-scrollbar {
    margin: 16px 25px 0;
  }

  #fotona-landing .fotona-team__cta {
    margin-top: 32px;
  }

  #fotona-landing .fotona-team__cta .fotona-btn {
    --fotona-btn-h: 52px;
    --fotona-btn-px: 26px;
    --fotona-btn-fs: 16px;
  }
}

/* ==========================================================================
   08. SECTION: TẠI SAO CHỌN LASER FOTONA TẠI LINH ANH
   Lưới desktop (3 cột):            Lưới mobile (2 cột):
   ┌────────┬─────────────────┐     ┌─────────────────┐
   │doctors │ license (ngang) │     │ doctors (ngang) │
   ├────────┼────────┬────────┤     ├────────┬────────┤
   │ visia  │  tech  │  room  │     │license │ visia  │
   └────────┴────────┴────────┘     │ (dọc)  ├────────┤
                                    │        │  tech  │
                                    ├────────┴────────┤
                                    │  room (ngang)   │
                                    └─────────────────┘
   Desktop có 2 vệt sáng chìm 2 bên (ảnh nền, mobile không tải)
   ========================================================================== */
#fotona-landing .fotona-why {
  position: relative;
  isolation: isolate;
  padding: 0 0 80px; /* rút gọn khoảng cách với section 07 */
  background: var(--fotona-bg);
  overflow: clip;
}

#fotona-landing .fotona-why::before,
#fotona-landing .fotona-why::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: min(26vw, 500px);
  height: 100%;
  translate: 0 -50%;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

#fotona-landing .fotona-why::before {
  left: 0;
  background-position: left center;
}

#fotona-landing .fotona-why::after {
  right: 0;
  background-position: right center;
}

/* Khai báo ảnh trong media desktop → mobile chắc chắn không tải */
@media (min-width: 992px) {
  #fotona-landing .fotona-why::before {
    background-image: var(--fotona-why-light-l, none);
  }

  #fotona-landing .fotona-why::after {
    background-image: var(--fotona-why-light-r, none);
  }
}

#fotona-landing .fotona-why__container {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Tiêu đề --- */
#fotona-landing .fotona-why__title {
  --fotona-title-script: clamp(60px, 7.56cqw, 96px);
  --fotona-title-main: clamp(34px, 4.9cqw, 62px);
  --fotona-title-badge: clamp(18px, 2.5cqw, 32px);
}

#fotona-landing .fotona-why__title-row {
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 8px;
}

/* --- Lưới --- */
#fotona-landing .fotona-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "doctors license license"
    "visia   tech    room";
  gap: 25px;
  width: 100%;
  max-width: 1070px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-why__card--doctors { grid-area: doctors; }
#fotona-landing .fotona-why__card--license { grid-area: license; }
#fotona-landing .fotona-why__card--visia   { grid-area: visia; }
#fotona-landing .fotona-why__card--tech    { grid-area: tech; }
#fotona-landing .fotona-why__card--room    { grid-area: room; }

#fotona-landing .fotona-why__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 22px;
  border-radius: 25px;
  background: #e8e8e8;
  transition: translate 0.45s var(--fotona-ease), box-shadow 0.45s var(--fotona-ease);
}

#fotona-landing .fotona-why__media {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--fotona-white);
}

#fotona-landing .fotona-why__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 283 / 217;
  object-fit: cover;
  transition: scale 0.7s var(--fotona-ease);
}

#fotona-landing .fotona-why__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
  color: #6b5a45;
}

/* Ô giấy phép (desktop): chữ trái – ảnh phải */
#fotona-landing .fotona-why__card--license {
  display: grid;
  grid-template-columns: minmax(0, 239fr) minmax(0, 383fr);
  align-items: center;
  column-gap: 44px;
  padding-left: 34px;
}

#fotona-landing .fotona-why__card--license .fotona-why__text {
  order: -1;
}

#fotona-landing .fotona-why__card--license .fotona-why__media img {
  aspect-ratio: 383 / 305;
}

@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-why__card:hover {
    translate: 0 -8px;
    box-shadow: 0 16px 30px rgba(127, 99, 55, 0.18);
  }

  #fotona-landing .fotona-why__card:hover .fotona-why__media img {
    scale: 1.05;
  }
}

/* --------------------------------------------------------------------------
   08. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-why {
    padding: 4px 0 50px;
  }

  /* Mobile không dùng vệt sáng → không tải ảnh */
  #fotona-landing .fotona-why::before,
  #fotona-landing .fotona-why::after {
    content: none;
  }

  #fotona-landing .fotona-why__title {
    --fotona-title-script: clamp(56px, 16cqw, 84px);
    --fotona-title-main: clamp(28px, 8.2cqw, 46px);
    --fotona-title-badge: clamp(18px, 5.6cqw, 30px);
  }

  #fotona-landing .fotona-why__title-row {
    flex-direction: column;
  }

  #fotona-landing .fotona-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "doctors doctors"
      "license visia"
      "license tech"
      "room    room";
    gap: 13px;
    max-width: 560px;
    margin-top: 24px;
  }

  #fotona-landing .fotona-why__card {
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
  }

  #fotona-landing .fotona-why__media {
    border-radius: 16px;
  }

  #fotona-landing .fotona-why__text {
    font-size: 17px;
    line-height: 1.5;
  }

  /* Ô ngang: ảnh trái – chữ phải (doctors), chữ trái – ảnh phải (room) */
  #fotona-landing .fotona-why__card--doctors,
  #fotona-landing .fotona-why__card--room {
    display: grid;
    align-items: center;
    column-gap: 14px;
  }

  #fotona-landing .fotona-why__card--doctors {
    grid-template-columns: 43% minmax(0, 1fr);
  }

  #fotona-landing .fotona-why__card--doctors .fotona-why__media img {
    aspect-ratio: 1;
  }

  #fotona-landing .fotona-why__card--room {
    grid-template-columns: minmax(0, 1fr) 50%;
    padding-left: 16px;
  }

  #fotona-landing .fotona-why__card--room .fotona-why__text {
    order: -1;
  }

  #fotona-landing .fotona-why__card--room .fotona-why__media img {
    aspect-ratio: 192 / 158;
  }

  /* Ô giấy phép: ảnh dọc trên, chữ dưới */
  #fotona-landing .fotona-why__card--license {
    display: flex;
    align-items: stretch;
    padding-left: 12px;
  }

  #fotona-landing .fotona-why__card--license .fotona-why__text {
    order: 0;
  }

  #fotona-landing .fotona-why__card--license .fotona-why__media img {
    aspect-ratio: 167 / 277;
  }

  /* Ô nhỏ cột phải: ảnh dẹt phía trên */
  #fotona-landing .fotona-why__card--visia .fotona-why__media img,
  #fotona-landing .fotona-why__card--tech .fotona-why__media img {
    aspect-ratio: 168 / 89;
  }

  /* Ảnh thiết bị có logo FDA/CE: hiện trọn ảnh, không cắt */
  #fotona-landing .fotona-why__card--tech .fotona-why__media img {
    object-fit: contain;
  }
}

/* ==========================================================================
   09. SECTION: QUY TRÌNH THỰC HIỆN LASER FOTONA
   Desktop: "sân khấu" tỉ lệ đúng khung Figma 1920 × 1121.
     - Ảnh mẫu 1256 × 981 bên trái
     - Tiêu đề canh giữa cụm 6 bước, 6 bước xếp vòng cung quanh tiêu đề
     - Mọi toạ độ tính theo cqw (1cqw = 19.2px ở 1920) → giữ nguyên bố cục khi màn nhỏ hơn
   Mobile: Tiêu đề → lưới 2 cột × 3 hàng; không có ảnh mẫu.
   ========================================================================== */
#fotona-landing .fotona-process {
  position: relative;
  background: var(--fotona-process-bg-pc, none) center / cover no-repeat, #f3f1ee;
  overflow: clip;
}

#fotona-landing .fotona-process__stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1121;
  margin-inline: auto;
}

/* --- Ảnh mẫu --- */
#fotona-landing .fotona-process__model {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0.6cqw;
  width: 65.42cqw; /* = 1256px ở 1920 */
  pointer-events: none;
}

#fotona-landing .fotona-process__model img {
  width: 100%;
  height: auto;
}

/* --- Tiêu đề: tâm đặt tại (1228, 573) của khung Figma --- */
#fotona-landing .fotona-process__title {
  --fotona-title-script: clamp(56px, 4.8cqw, 92px);
  --fotona-title-main: clamp(30px, 3.23cqw, 62px);
  --fotona-title-badge: clamp(16px, 1.56cqw, 30px);

  position: absolute;
  z-index: 2;
  left: 63.96cqw;
  top: 29.84cqw;
  width: max-content;
  translate: -50% -50%;
}

/* --- 6 bước --- */
#fotona-landing .fotona-process__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-process__step {
  position: absolute;
  z-index: 1;
  left: var(--fotona-step-x);
  top: var(--fotona-step-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 11.5cqw;
  margin: 0;
  translate: -50% 0;
}

/* Toạ độ tâm ngang (x) và mép trên ảnh (y) theo Figma */
#fotona-landing .fotona-process__step:nth-child(1) { --fotona-step-x: 59.11cqw; --fotona-step-y: 5.26cqw; }
#fotona-landing .fotona-process__step:nth-child(2) { --fotona-step-x: 71.56cqw; --fotona-step-y: 5.68cqw; }
#fotona-landing .fotona-process__step:nth-child(3) { --fotona-step-x: 81.98cqw; --fotona-step-y: 15.36cqw; }
#fotona-landing .fotona-process__step:nth-child(4) { --fotona-step-x: 81.98cqw; --fotona-step-y: 31.2cqw; }
#fotona-landing .fotona-process__step:nth-child(5) { --fotona-step-x: 71.56cqw; --fotona-step-y: 41.98cqw; }
#fotona-landing .fotona-process__step:nth-child(6) { --fotona-step-x: 59.06cqw; --fotona-step-y: 42.4cqw; }

#fotona-landing .fotona-process__media {
  width: 9.06cqw; /* = 174px ở 1920 */
  margin: 0;
  padding: max(3px, 0.31cqw);
  border-radius: max(10px, 0.83cqw);
  background: var(--fotona-white);
  box-shadow: 0 6px 18px rgba(127, 99, 55, 0.12);
  transition: translate 0.45s var(--fotona-ease), box-shadow 0.45s var(--fotona-ease);
}

#fotona-landing .fotona-process__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: max(7px, 0.55cqw);
}

#fotona-landing .fotona-process__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: max(8px, 0.9cqw) 0 0;
  font-size: clamp(12px, 0.84cqw, 16px);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

#fotona-landing .fotona-process__num {
  font-weight: 500;
  color: var(--fotona-bronze);
}

#fotona-landing .fotona-process__desc {
  color: #6b5a45;
}

@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-process__step:hover .fotona-process__media {
    translate: 0 -8px;
    box-shadow: 0 16px 30px rgba(127, 99, 55, 0.25);
  }
}

/* --------------------------------------------------------------------------
   09. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-process {
    padding: 4px 0 50px;
    background: var(--fotona-process-bg-mb, none) center top / cover no-repeat, #f3f1ee;
  }

  #fotona-landing .fotona-process__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
    padding-inline: 15px;
  }

  #fotona-landing .fotona-process__model {
    display: none;
  }

  #fotona-landing .fotona-process__title {
    --fotona-title-script: clamp(56px, 16cqw, 84px);
    --fotona-title-main: clamp(30px, 8.6cqw, 46px);
    --fotona-title-badge: clamp(16px, 5.4cqw, 28px);

    position: static;
    width: auto;
    translate: none;
  }

  #fotona-landing .fotona-process__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 13px;
    width: 100%;
    max-width: 480px;
    margin-top: 24px;
    padding-inline: 8px;
  }

  #fotona-landing .fotona-process__step {
    position: static;
    width: auto;
    translate: none;
  }

  #fotona-landing .fotona-process__media {
    width: 100%;
    padding: 4px;
    border-radius: 16px;
  }

  #fotona-landing .fotona-process__media img {
    border-radius: 12px;
  }

  #fotona-landing .fotona-process__label {
    margin-top: 10px;
    font-size: 17px;
  }

  #fotona-landing .fotona-process__num {
    font-size: 18px;
  }
}

/* ==========================================================================
   10. SECTION: BÁO CHÍ NÓI VỀ LINH ANH + GIẢI THƯỞNG
   Desktop: 4 bài báo 330 × 612 (link tab mới, nofollow); 4 giải thưởng trên bục
   Mobile : slider 1 bài + nút prev/next; giải thưởng chạy marquee
   Khối giải thưởng clone từ LP Laser CO2 (.nam-press__bottom / .npr-awards)
   ========================================================================== */
#fotona-landing .fotona-press {
  position: relative;
  padding: 60px 0 0;
  background: var(--fotona-bg);
  /* Không clip: ảnh bục tràn xuống dưới giống LP CO2 (bottom: -300px) */
}

#fotona-landing .fotona-press__container {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#fotona-landing .fotona-press__title {
  --fotona-title-script: clamp(60px, 5.7cqw, 80px);
  --fotona-title-badge: clamp(18px, 1.72cqw, 24px);
}

#fotona-landing .fotona-press__lead {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 400;
  color: #6b5a45;
}

/* --- Bài báo --- */
#fotona-landing .fotona-press__articles {
  position: relative;
  width: 100%;
  max-width: 1371px; /* = 4 × 330 + 3 × 17 */
  margin-top: 48px;
}

#fotona-landing .fotona-press__viewport {
  position: relative;
}

#fotona-landing .fotona-press__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
}

#fotona-landing .fotona-press__item {
  margin: 0;
}

#fotona-landing .fotona-press__link {
  display: block;
  border-radius: 24px;
  transition: translate 0.45s var(--fotona-ease), filter 0.45s var(--fotona-ease);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.08));
}

#fotona-landing .fotona-press__link img {
  width: 100%;
  height: auto;
  aspect-ratio: 330 / 612;
  object-fit: contain;
}

#fotona-landing .fotona-press__link:focus-visible {
  outline: 2px solid var(--fotona-gold);
  outline-offset: 4px;
}

@media (hover: hover) and (min-width: 992px) {
  #fotona-landing .fotona-press__link:hover {
    translate: 0 -10px;
    filter: drop-shadow(0 20px 30px rgba(127, 99, 55, 0.28));
  }
}

#fotona-landing .fotona-press__nav {
  display: none; /* chỉ dùng trên mobile */
}

/* --- Giải thưởng (clone LP CO2) --- */
#fotona-landing .fotona-press__awards-wrap {
  position: relative;
  margin-top: 70px;
  padding-bottom: 40px;
}

#fotona-landing .fotona-press__podium {
  position: absolute;
  z-index: 4; /* nổi trên nền section kế tiếp như LP CO2 */
  bottom: -300px;
  left: 50%;
  width: 1920px;
  max-width: 100%;
  translate: -50% 0;
  pointer-events: none;
}

#fotona-landing .fotona-press__podium img {
  width: 100%;
  height: auto;
}

#fotona-landing .fotona-press__awards-container {
  position: relative;
  z-index: 10;
}

#fotona-landing .fotona-press__awards {
  display: flex;
  justify-content: center;
}

#fotona-landing .fotona-press__awards-track {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#fotona-landing .fotona-press__awards-group {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

#fotona-landing .fotona-press__awards-group--clone {
  display: none;
}

#fotona-landing .fotona-press__award {
  margin: 0;
  padding: 0 15px;
}

#fotona-landing .fotona-press__award img {
  width: auto;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   10. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-press {
    padding-top: 40px;
  }

  #fotona-landing .fotona-press__title {
    --fotona-title-script: clamp(56px, 16cqw, 80px);
    --fotona-title-badge: clamp(18px, 5.4cqw, 26px);
  }

  #fotona-landing .fotona-press__lead {
    max-width: 380px;
    margin-top: 14px;
  }

  /* Slider bài báo */
  #fotona-landing .fotona-press__articles {
    max-width: 460px;
    margin-top: 24px;
  }

  #fotona-landing .fotona-press__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #fotona-landing .fotona-press__viewport::-webkit-scrollbar {
    display: none;
  }

  #fotona-landing .fotona-press__track {
    display: flex;
    gap: 0;
  }

  #fotona-landing .fotona-press__item {
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #fotona-landing .fotona-press__link {
    width: min(300px, 68vw);
  }

  #fotona-landing .fotona-press__nav {
    display: grid;
  }

  #fotona-landing .fotona-press__nav--prev {
    left: 4px;
  }

  #fotona-landing .fotona-press__nav--next {
    right: 4px;
  }

  /* Giải thưởng: marquee */
  #fotona-landing .fotona-press__awards-wrap {
    margin-top: 36px;
    padding-bottom: 50px;
  }

  #fotona-landing .fotona-press__podium {
    display: none;
  }

  #fotona-landing .fotona-press__awards-container {
    padding-inline: 0;
  }

  #fotona-landing .fotona-press__awards {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }

  #fotona-landing .fotona-press__awards-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: fotona-press-marquee 16s linear infinite;
  }

  #fotona-landing .fotona-press__awards-group,
  #fotona-landing .fotona-press__awards-group--clone {
    display: flex;
    flex: 0 0 auto;
    gap: 15px;
    padding-right: 15px;
  }

  #fotona-landing .fotona-press__award {
    padding: 0;
  }

  #fotona-landing .fotona-press__award img {
    height: 300px;
    max-height: none;
  }

  @keyframes fotona-press-marquee {
    from {
      translate: 0 0;
    }
    to {
      translate: -50% 0;
    }
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  #fotona-landing .fotona-press__awards {
    overflow-x: auto;
  }

  #fotona-landing .fotona-press__awards-track {
    animation: none;
  }
}

/* ==========================================================================
   11. SECTION: ĐỐI TÁC CỦA LINH ANH (clone từ LP Laser CO2: .partners / .marquee)
   Cải tiến so với bản CO2:
   - Bản CO2 nhân 3 lần danh sách rồi trượt -50% → điểm nối lệch nửa nhóm, logo bị giật.
     Ở đây dùng 2 nhóm giống hệt, mỗi nhóm có khoảng đệm cuối = gap → trượt -50% khớp tuyệt đối.
   - Rê chuột vào dừng chạy; người dùng bật "giảm chuyển động" thì chuyển sang vuốt tay.
   ========================================================================== */
#fotona-landing .fotona-partners {
  --fotona-partners-gap: 48px;
  --fotona-partners-item-w: 180px;
  --fotona-partners-duration: 30s;

  padding: 50px 0 60px;
  background: var(--fotona-bg);
  overflow: hidden;
}

#fotona-landing .fotona-partners__container {
  container-type: inline-size;
  display: flex;
  justify-content: center;
}

#fotona-landing .fotona-partners__title {
  --fotona-title-script: clamp(56px, 7.1cqw, 90px);
  --fotona-title-main: clamp(34px, 4.4cqw, 56px);
}

/* --- Marquee --- */
#fotona-landing .fotona-partners__marquee {
  position: relative;
  display: flex;
  margin-top: 40px;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

#fotona-landing .fotona-partners__track {
  display: flex;
  flex: none;
  width: max-content;
  animation: fotona-partners-marquee var(--fotona-partners-duration) linear infinite;
}

@media (hover: hover) {
  #fotona-landing .fotona-partners__marquee:hover .fotona-partners__track {
    animation-play-state: paused;
  }
}

#fotona-landing .fotona-partners__group {
  display: flex;
  flex: none;
  gap: var(--fotona-partners-gap);
  margin: 0;
  padding: 16px var(--fotona-partners-gap) 16px 0; /* đệm cuối = gap → nối vòng liền mạch */
  list-style: none;
}

#fotona-landing .fotona-partners__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--fotona-partners-item-w);
  height: 80px;
  margin: 0;
}

#fotona-landing .fotona-partners__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  transition: scale 0.3s var(--fotona-ease);
}

#fotona-landing .fotona-partners__item:hover img {
  scale: 1.08;
}

@keyframes fotona-partners-marquee {
  from {
    translate: 0 0;
  }
  to {
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fotona-landing .fotona-partners__marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }

  #fotona-landing .fotona-partners__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   11. MOBILE / TABLET (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #fotona-landing .fotona-partners {
    --fotona-partners-gap: 32px;
    --fotona-partners-item-w: 120px;
    --fotona-partners-duration: 20s;

    padding: 40px 0 44px;
  }

  #fotona-landing .fotona-partners__title {
    --fotona-title-script: clamp(52px, 16cqw, 64px);
    --fotona-title-main: clamp(32px, 10.3cqw, 44px);
  }

  #fotona-landing .fotona-partners__marquee {
    margin-top: 24px;
  }
}