@charset "UTF-8";
/* LDP Sinh nhật 37 năm — Tháng 7/2026 */
.ldp-thang7-2026 {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  color: #1b296a;
  background: #0a1030; }

/* Block Start: Màn mở đầu — Hero (Figma node 2:796) */
.ldp-block-start {
  position: relative;
  z-index: 4;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  min-height: 480px;
  background: #0a1030;
  overflow: visible; }

.ldp-block-start__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; }

.ldp-block-start__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(10, 16, 48, 0) 0%, rgba(10, 16, 48, 0.08) 35%, rgba(10, 16, 48, 0.25) 65%, #0a1030 100%);
  pointer-events: none; }

/* Vệt nắng (Light Leak - Indigo-Orange) — Figma node 2:984, tràn từ hero xuống story */
.ldp-block-start__lightleak {
  position: absolute;
  top: 45%;
  left: 21%;
  width: clamp(720px, 79%, 1515px);
  height: auto;
  z-index: 1;
  mix-blend-mode: screen;
  pointer-events: none;
  /* 1. Giảm độ đậm: Bạn chỉnh số này từ 0.1 đến 0.9 (càng nhỏ càng ít) */
  opacity: 0.4 !important;
  /* 2. Thu nhỏ kích thước: Giảm % hoặc giá trị px xuống */
  width: clamp(500px, 50%, 1000px) !important;
  /* Đảm bảo nó không đè lên chữ (chữ đang có z-index: 10) */
  z-index: 1 !important; }

.ldp-block-start__img,
.ldp-block-start__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; }

.ldp-block-start__typo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; }

/* Mắt Việt — Figma: Anton 96px, #fffbf2, x50% y32% */
.ldp-block-start__brand {
  position: absolute;
  top: 32%;
  left: 50%;
  margin: 0;
  font-family: 'Anton', sans-serif;
  /* Đã thêm */
  font-weight: 400;
  /* Đã thêm */
  font-size: clamp(36px, 5vw, 96px);
  /* Đã thêm */
  line-height: 1;
  /* Đã thêm */
  letter-spacing: 0.01em;
  /* Đã thêm */
  color: #fffbf2;
  /* Đã thêm */ }

/* 37 NĂM — Figma: Anton 250px, #fdedd3, x50% y38.6% */
.ldp-block-start__title {
  position: absolute;
  top: 43%;
  left: 50%;
  margin: 0;
  font-family: 'Anton', sans-serif;
  /* Đã thêm */
  font-weight: 400;
  /* Đã thêm */
  font-size: clamp(96px, 13.02vw, 250px);
  /* Đã thêm */
  line-height: 1;
  /* Đã thêm */
  letter-spacing: 0.01em;
  /* Đã thêm */
  white-space: nowrap;
  color: #fdedd3;
  /* Đã thêm */ }

.ldp-block-start__scroll {
  position: absolute;
  left: 50%;
  bottom: 20%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid rgba(253, 237, 211, 0.55);
  border-radius: 50%;
  background: rgba(10, 16, 48, 0.35);
  color: #fdedd3;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateX(-50%);
  animation: ldp-block-start-scroll-bounce 1.6s ease-in-out infinite;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .ldp-block-start__scroll:hover, .ldp-block-start__scroll:focus-visible {
    background: rgba(253, 237, 211, 0.15);
    border-color: #fdedd3;
    color: #fffbf2;
    outline: none; }

.ldp-block-start__scroll-icon {
  display: block; }

@keyframes ldp-block-start-scroll-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1; }
  50% {
    transform: translateX(-50%) translateY(10px);
    opacity: 0.75; } }

@media (prefers-reduced-motion: reduce) {
  .ldp-block-start__scroll {
    animation: none; } }

/* Block Start — Câu chuyện 37 năm (Figma node 2:796, vùng story) */
.ldp-block-start-story {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: clamp(72px, 9vw, 180px) 20px clamp(72px, 8vw, 160px);
  background: #0a1030;
  text-align: center; }

/* Collage thumbnail nền */
.ldp-block-start-story__collage {
  position: absolute;
  top: -140px;
  left: 50%;
  width: 100%;
  max-width: 1920px;
  height: auto;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none; }

/* Vầng sáng blur xanh sau tiêu đề */
.ldp-block-start-story__blur {
  position: absolute;
  top: -180px;
  left: 50%;
  width: clamp(1100px, 95vw, 1900px);
  transform: translateX(-50%);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none; }

.ldp-block-start-story__content {
  position: relative;
  /* Quan trọng để z-index có hiệu lực */
  z-index: 10;
  /* Đảm bảo giá trị này cao hơn các lớp hiệu ứng nền */ }

/* Mắt Việt 37 NĂM — Figma: Anton 96px */
.ldp-block-start-story__heading,
.ldp-block-start-story__heading-brand,
.ldp-block-start-story__heading-years {
  /* 1. Loại bỏ mọi hiệu ứng gây mờ */
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  /* 2. Màu sắc nguyên bản, sắc nét */
  color: #FFFFFF !important;
  /* Hoặc mã màu nguyên bản bạn muốn */
  opacity: 1 !important;
  /* 3. Khôi phục định dạng font chuẩn */
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 5vw, 96px) !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  /* 4. Công nghệ làm mịn font của trình duyệt */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

.ldp-parallax-scene {
  position: absolute !important;
  inset: 0;
  pointer-events: none !important; }

/* Subtitle — Figma: Be Vietnam Pro 800, 40px, #fdedd3 */
.ldp-block-start-story__subtitle {
  margin: clamp(16px, 1.5vw, 28px) 0 0;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 2.08vw, 40px) !important;
  line-height: 1.3 !important;
  /* Loại bỏ bóng đổ gây mờ */
  text-shadow: none !important;
  color: #fdedd3 !important;
  /* Màu vàng nhạt nguyên bản */
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

/* Body — Figma: Be Vietnam Pro 400, 32px, rgba(255,255,255,.75) */
.ldp-block-start-story__body {
  margin: clamp(24px, 2.5vw, 48px) auto 0;
  max-width: 1165px;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.67vw, 32px) !important;
  line-height: 1.5 !important;
  /* Loại bỏ bóng đổ và độ trong suốt */
  text-shadow: none !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

.ldp-block-start-story__body p {
  margin: 0 0 0.5em; }

.ldp-block-start-story__body p:last-child {
  margin-bottom: 0; }

/* Block 1: Hero */
.ldp-t7-block-1 {
  position: relative;
  z-index: 3; }

.ldp-t7-block-1__scroll {
  height: 300vh;
  position: relative; }

.ldp-t7-block-1__scroll.is-reduced-motion {
  height: auto; }

.ldp-t7-block-1__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden; }

.ldp-t7-block-1__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; }

.ldp-t7-block-1__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; }

.ldp-t7-block-1__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(8, 12, 36, 0) 0%, rgba(8, 12, 36, 0.08) 45%, rgba(8, 12, 36, 0.22) 100%);
  pointer-events: none; }

/* Figma Desktop_Layout — Mắt Việt: x50% y32% | 37 NĂM: x50% y39%, box 739x367 */
.ldp-t7-block-1__typo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none; }

.ldp-t7-block-1__brand {
  position: absolute;
  top: 32%;
  left: 50%;
  margin: 0;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  font-family: "Anton", sans-serif; }

.ldp-t7-block-1__title {
  position: absolute;
  top: 60%;
  left: 50%;
  margin: 0;
  color: #FDEDD3;
  font-family: "Anton", sans-serif;
  display: flex;
  gap: 10%; }

.ldp-t7-block-1__title-num {
  display: block;
  font-size: 250px;
  font-weight: 800;
  line-height: 0.82; }

.ldp-t7-block-1__title-label {
  display: block;
  font-size: 250px;
  font-weight: 800;
  line-height: 0.82; }

.ldp-t7-block-1__scroll.is-reduced-motion .ldp-t7-block-1__sticky {
  position: relative;
  height: auto;
  min-height: 100vh; }

/* Flying "37 NĂM" — đồng bộ typography Block 1 */
.ldp-t7-flying-years {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  width: 39%;
  margin: 0;
  padding: 0;
  color: #ffffff;
  pointer-events: none;
  white-space: nowrap; }

.ldp-t7-flying-years.is-active {
  display: flex; }

.ldp-t7-flying-years__num {
  display: block;
  font-size: 240px;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.04em; }

.ldp-t7-flying-years__label {
  display: block;
  margin-top: -8px;
  font-size: 200px;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.02em; }

/* Block 2: Câu chuyện 37 năm */
.ldp-t7-block-2 {
  position: relative;
  z-index: 1;
  padding: 120px 0 100px;
  color: #ffffff;
  overflow: hidden; }

.ldp-t7-block-2__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(180deg, #1a2f8f 0%, #0a1030 40%, #060b22 100%); }

.ldp-t7-block-2__collage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0; }

.ldp-t7-block-2.is-story-visible .ldp-t7-block-2__collage {
  opacity: 1; }

.ldp-t7-block-2__collage-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115%;
  height: 115%;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%); }

.ldp-t7-block-2__content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  pointer-events: none; }

.ldp-t7-block-2__content a,
.ldp-t7-block-2__content button {
  pointer-events: auto; }

.ldp-t7-block-2__heading {
  margin: 0 0 28px;
  font-size: 72px;
  font-weight: 800;
  line-height: 1.05; }

.ldp-t7-block-2__heading-brand {
  opacity: 0;
  color: #ffffff; }

.ldp-t7-block-2__heading-brand.is-visible {
  opacity: 1; }

.ldp-t7-block-2__heading-years {
  display: inline-block;
  opacity: 0;
  color: #ffffff; }

.ldp-t7-block-2__heading-years.is-visible {
  opacity: 1; }

.ldp-t7-block-2__years-num,
.ldp-t7-block-2__years-label {
  display: inline-block; }

.ldp-t7-block-2__subtitle {
  margin: 0 0 32px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  opacity: 0; }

.ldp-t7-block-2__body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0; }

.ldp-t7-block-2__body p {
  margin: 0 0 20px; }

.ldp-t7-block-2__body p:last-child {
  margin-bottom: 0; }

/* Block 3: Chuỗi Ưu Đãi Tri Ân Khách Hàng */
.ldp-t7-block-3 {
  position: relative;
  z-index: 2;
  padding: 135px 0 100px;
  background: #f3f5f9;
  overflow: hidden; }

.ldp-t7-block-3__blur {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1500px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none; }

.ldp-t7-c3 {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px; }

.ldp-t7-c3__heading {
  margin: 0 0 56px;
  text-align: center;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em; }

.ldp-t7-c3__heading-1 {
  display: block;
  font-size: 64px;
  color: #fff; }

.ldp-t7-c3__heading-2 {
  display: block;
  font-size: 64px;
  color: #2b46b5; }

.ldp-t7-c3__board {
  position: relative;
  border-radius: 28px;
  box-shadow: 0px 56px 154.8px 0px rgba(0, 66, 194, 0.7);
  /*
    background: $c3-navy;
	  padding: 104px 36px 40px;
  */ }
  .ldp-t7-c3__board:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20%;
    transform: translateX(-50%);
    width: 80%;
    height: 20%;
    background: url("https://cdn.hstatic.net/files/200000689681/file/pattern.png");
    background-size: auto;
    z-index: 2; }
  .ldp-t7-c3__board:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -35%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: url("https://cdn.hstatic.net/files/200000689681/file/blur_middle.png") no-repeat;
    z-index: 1; }

.ldp-t7-c3__flags:before {
  content: "";
  position: absolute;
  top: -6%;
  left: 24px;
  right: 24px;
  height: 347px;
  width: 50%;
  background-image: url(https://cdn.hstatic.net/files/200000689681/file/flag_birthday.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: auto 90%;
  z-index: 5;
  pointer-events: none; }

.ldp-t7-c3__flags:after {
  content: "";
  position: absolute;
  top: -6%;
  left: unset;
  right: 24px;
  height: 347px;
  width: 50%;
  background-image: url(https://cdn.hstatic.net/files/200000689681/file/flag_birthday.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 90%;
  z-index: 5;
  pointer-events: none; }

.ldp-t7-c3__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 104px 36px 40px;
  background: #14204c;
  border-radius: 28px; }

.ldp-t7-c3-card {
  flex: 1 1 0;
  min-width: 0;
  height: 500px;
  perspective: 1800px; }

.ldp-t7-c3-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d; }

.ldp-t7-c3-card.is-flipped .ldp-t7-c3-card__inner {
  transform: rotateY(180deg); }

.ldp-t7-c3-card__face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  background-image: url("https://cdn.hstatic.net/files/200000689681/file/bg_1_flip.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  backface-visibility: hidden; }

.ldp-t7-c3-card__back {
  transform: rotateY(180deg); }

.ldp-t7-c3-card__toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fcecd1;
  color: #14204c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; }

.ldp-t7-c3-card__toggle-icon {
  font-size: 40px;
  font-weight: 700; }

.ldp-t7-c3-card__time {
  margin-bottom: 8px; }

.ldp-t7-c3-card__time-label {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: #14204c;
  margin-bottom: 10px; }

.ldp-t7-c3-card__time-date {
  display: block;
  font-size: 19px;
  font-weight: 400;
  color: #14204c; }

.ldp-t7-c3-card__title {
  margin: 26px 0 16px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  color: #14204c; }

.ldp-t7-c3-card__title--sm {
  font-size: 32px;
  margin: 18px 0 12px; }

.ldp-t7-c3-card__desc {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #14204c; }

.ldp-t7-c3-card__offers {
  margin: 0 0 10px;
  padding-left: 18px;
  list-style: disc; }

.ldp-t7-c3-card__offers li {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #14204c; }

.ldp-t7-c3-card__note {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  color: #14204c; }

.ldp-t7-c3-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  background: #14204c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none; }

.ldp-t7-c3-card__btn:hover {
  color: #ffffff;
  background: #1c2c63; }

/* Block 4: VisionCare+ & Công nghệ AI — Figma node 6:706 */
.ldp-t7-block-4 {
  position: relative;
  z-index: 2;
  padding: 0 0 120px;
  background: #fffbf2;
  overflow: hidden; }

.ldp-t7-b4 {
  position: relative;
  z-index: 1;
  max-width: 1412px;
  margin: 0 auto;
  padding: 0 40px; }

.ldp-t7-b3n__intro {
  position: relative;
  max-width: 1180px;
  margin: 13.7% auto 0;
  text-align: center; }
  .ldp-t7-b3n__intro .ldp-t7-b3n__heading {
    margin: 0;
    font-size: clamp(34px, 5vw, 75px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.01em; }
  .ldp-t7-b3n__intro .ldp-t7-b3n__heading span {
    display: block;
    background: linear-gradient(90deg, #002870 2%, #064cca 68%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; }

/* Quầng sáng xanh sau tiêu đề (Figma: blur 6:709) */
.ldp-t7-b3n__intro::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 760px;
  max-width: 90%;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #2b67ce 0%, rgba(43, 103, 206, 0) 94%);
  filter: blur(56px);
  pointer-events: none;
  z-index: 0; }

.ldp-t7-b3n__intro::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 760px;
  max-width: 90%;
  height: 460px;
  transform: translateX(-50%);
  background: url("https://cdn.hstatic.net/files/200000689681/file/pattern.png"); }

.ldp-t7-b3n__intro > * {
  position: relative;
  z-index: 1; }

.ldp-t7-b3n__eyebrow {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.32;
  color: #fffbf2; }

.ldp-t7-b3n__logo {
  display: block;
  width: 100%;
  max-width: 508px;
  height: auto;
  margin: 24px auto 0; }

.ldp-t7-b3n__body {
  max-width: 922px;
  margin: 36px auto 0;
  text-align: justify;
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 300;
  line-height: 1.32;
  color: #002a76; }

.ldp-t7-b3n__body p {
  margin: 0 0 20px; }

.ldp-t7-b3n__body strong {
  font-weight: 800; }

.ldp-t7-b3n__body p:last-child {
  margin-bottom: 0; }

/* Slide thông tin (Figma: cụm thông tin 6:783) */
.ldp-t7-b4-slide {
  position: relative;
  max-width: 1332px;
  margin: clamp(48px, 5vw, 80px) auto 0; }

.ldp-t7-b4-slide__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1332 / 729;
  border-radius: clamp(24px, 4vw, 60px);
  overflow: hidden; }

.ldp-t7-b4-slide__stage {
  position: absolute;
  inset: 0; }

.ldp-t7-b4-slide__bg {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease; }

.ldp-t7-b4-slide__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.ldp-t7-b4-slide__bg.is-active {
  opacity: 1; }

.ldp-t7-b4-slide__nav {
  position: absolute;
  left: 2.8%;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
  transform: translateY(-50%); }

.ldp-t7-b4-slide__arrow {
  display: grid;
  place-items: center;
  width: clamp(32px, 3.6vw, 48px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.25s ease; }

.ldp-t7-b4-slide__arrow:hover {
  background: #0b1e63; }

.ldp-t7-b4-slide__arrow svg {
  width: 48%;
  height: 48%; }

.ldp-t7-b4-slide__pills {
  position: absolute;
  left: 10.3%;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.5vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%); }

.ldp-t7-b4-slide__item {
  display: block; }

.ldp-t7-b4-slide__pill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(8px, 1.05vw, 12px) clamp(16px, 2vw, 28px) clamp(8px, 1.05vw, 12px) clamp(7px, 0.9vw, 12px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.25s ease, border-radius 0.25s ease; }

.ldp-t7-b4-slide__pill:hover {
  background: rgba(255, 255, 255, 0.42); }

.ldp-t7-b4-slide__pill-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 18px); }

.ldp-t7-b4-slide__pill-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(28px, 3.3vw, 43px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff; }

.ldp-t7-b4-slide__pill-ico svg {
  width: 56%;
  height: 56%;
  stroke: #064cca;
  transition: transform 0.25s ease; }

.ldp-t7-b4-slide__pill-text {
  font-size: clamp(15px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap; }

.ldp-t7-b4-slide__pill-body {
  display: none;
  margin-top: clamp(8px, 1vw, 14px);
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 500;
  line-height: 1.32;
  color: #003ec1;
  text-align: justify; }

.ldp-t7-b4-slide__pill.is-active {
  width: clamp(300px, 39vw, 517px);
  border-radius: clamp(18px, 2.5vw, 34px); }

.ldp-t7-b4-slide__pill.is-active .ldp-t7-b4-slide__pill-text {
  white-space: normal; }

.ldp-t7-b4-slide__pill.is-active .ldp-t7-b4-slide__pill-body {
  display: block; }

.ldp-t7-b4-slide__link {
  color: #003ec1;
  font-weight: 700;
  text-decoration: underline; }

.ldp-t7-b4-slide__link:hover {
  color: #064cca; }

.ldp-t7-b4-slide__close {
  display: none; }

.ldp-t7-b4-slide__pill.is-active .ldp-t7-b4-slide__pill-ico svg {
  transform: rotate(45deg); }

/* Block 5: Trải nghiệm VisionCare+ tại cửa hàng */
.ldp-t7-block-5 {
  position: relative;
  z-index: 2;
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #0c1538 0%, #131f4a 60%, #0a1030 100%);
  overflow: hidden; }

.ldp-t7-b5__blur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7; }

.ldp-t7-b5 {
  position: relative;
  z-index: 1;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px; }

.ldp-t7-b5__card {
  position: relative;
  background: #ffffff;
  border-radius: 28px;
  padding: 56px 56px 60px; }

.ldp-t7-b5__title {
  margin: 0 0 44px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: #14204c; }

.ldp-t7-b5__grid {
  display: flex;
  gap: 48px;
  align-items: stretch; }

.ldp-t7-b5__left {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column; }

.ldp-t7-b5__field {
  margin-bottom: 18px; }

.ldp-t7-b5__label {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #14204c; }

.ldp-t7-b5__select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 44px 0 16px;
  border: 1px solid #cfd4e2;
  border-radius: 8px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2314204c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  font-size: 16px;
  color: #14204c;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer; }

.ldp-t7-b5__list {
  margin: 8px 0 24px;
  max-height: 270px;
  padding-right: 14px;
  overflow-y: auto; }

.ldp-t7-b5__list::-webkit-scrollbar {
  width: 6px; }

.ldp-t7-b5__list::-webkit-scrollbar-track {
  background: #e6e8f0;
  border-radius: 999px; }

.ldp-t7-b5__list::-webkit-scrollbar-thumb {
  background: #14204c;
  border-radius: 999px; }

.ldp-t7-b5__store {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #eceef4; }

.ldp-t7-b5__store:first-child {
  padding-top: 4px; }

.ldp-t7-b5__store-pin {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #14204c; }

.ldp-t7-b5__store-info {
  min-width: 0; }

.ldp-t7-b5__store-name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #14204c; }

.ldp-t7-b5__store-info p {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.5;
  color: #4a4f63; }

.ldp-t7-b5__btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 28px;
  border-radius: 999px;
  background: #14204c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none; }

.ldp-t7-b5__btn:hover, .ldp-t7-b5__btn:focus, .ldp-t7-b5__btn:active {
  color: #ffffff;
  background: #1c2c63; }

.ldp-t7-b5__btn-arrow {
  display: inline-flex; }

.ldp-t7-b5__right {
  flex: 1 1 42%;
  display: flex;
  align-items: center;
  justify-content: center; }

.ldp-t7-b5__phone {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto; }

.ldp-t7-b5__phone-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  min-height: 420px;
  border: 2px dashed #cfd4e2;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #9aa0b4; }

/* Popup đặt lịch (Figma node 6:969) */
.ldp-t7-b5-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px; }

.ldp-t7-b5-modal.is-open {
  display: flex; }

.ldp-t7-b5-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 17, 54, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); }

.ldp-t7-b5-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 519px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 48px 44px;
  border-radius: 42px;
  background: #fffbf2;
  box-shadow: 0 40px 120px rgba(0, 17, 54, 0.45); }

.ldp-t7-b5-modal__close {
  position: absolute;
  top: 22px;
  right: 26px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #001136;
  cursor: pointer;
  transition: background 0.2s ease; }

.ldp-t7-b5-modal__close:hover {
  background: rgba(0, 17, 54, 0.08); }

.ldp-t7-b5-modal__close svg {
  width: 22px;
  height: 22px; }

.ldp-t7-b5-modal__title {
  margin: 0 0 28px;
  text-align: center;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 700;
  line-height: 1.16;
  text-transform: uppercase;
  color: #001136; }

.ldp-t7-b5-modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px; }

.ldp-t7-b5-modal__input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #001136;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  color: #0b1e63; }

.ldp-t7-b5-modal__input::placeholder {
  color: #0b1e63;
  opacity: 0.85; }

.ldp-t7-b5-modal__input:focus {
  outline: none;
  border-color: #064cca;
  box-shadow: 0 0 0 3px rgba(6, 76, 202, 0.15); }

.ldp-t7-b5-modal__textarea {
  height: auto;
  min-height: 116px;
  padding: 14px 18px;
  resize: vertical; }

.ldp-t7-b5-modal__submit {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 15px;
  background: #001136;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease; }

.ldp-t7-b5-modal__submit:hover {
  background: #0b1e63; }

.ldp-t7-b5-modal__submit-arrow {
  display: inline-flex; }

.ldp-t7-b5-modal__submit-arrow svg {
  width: 28px;
  height: 28px; }

/* Tablet */
@media (max-width: 991px) {
  .ldp-t7-block-1__brand {
    font-size: 36px; }
  .ldp-t7-block-1__title-num,
  .ldp-t7-flying-years__num {
    font-size: 160px; }
  .ldp-t7-block-1__title-label,
  .ldp-t7-flying-years__label {
    font-size: 130px; }
  .ldp-t7-block-1__title {
    width: 45%; }
  .ldp-t7-block-2__heading {
    font-size: 56px; }
  .ldp-t7-block-2__subtitle {
    font-size: 22px; }
  .ldp-t7-c3__heading-1,
  .ldp-t7-c3__heading-2 {
    font-size: 48px; }
  .ldp-t7-c3-card {
    flex: 1 1 calc(50% - 12px); }
  .ldp-t7-block-4 {
    padding: 0 0 90px; }
  .ldp-t7-b5__card {
    padding: 44px 36px 48px; }
  .ldp-t7-b5__title {
    font-size: 32px;
    margin-bottom: 36px; }
  .ldp-t7-b5__grid {
    gap: 32px; }
  .ldp-t7-b5__phone,
  .ldp-t7-b5__phone-placeholder {
    max-width: 280px; } }

/* Mobile */
@media (max-width: 767px) {
  .ldp-block-start {
    aspect-ratio: 3 / 4;
    min-height: 70vh; }
  .ldp-block-start__lightleak {
    display: none; }
  .ldp-block-start__img, .ldp-block-start__video {
    object-position: center left; }
  .ldp-block-start__brand {
    top: 17%;
    left: 29px;
    font-size: 32px;
    color: #CCA570; }
  .ldp-block-start__title {
    top: 25%;
    left: 29px;
    font-size: 68px;
    color: #445062; }
  .ldp-block-start__scroll {
    bottom: 20px;
    width: 44px;
    height: 44px; }
  .ldp-block-start-story {
    padding: 56px 18px; }
  .ldp-block-start-story__heading {
    font-size: 40px; }
  .ldp-block-start-story__subtitle {
    font-size: 20px; }
  .ldp-block-start-story__body {
    font-size: 16px; }
  .ldp-t7-block-1__scroll {
    height: 260vh; }
  .ldp-t7-block-1__brand {
    top: 28%;
    left: auto;
    right: 20px;
    font-size: 24px; }
  .ldp-t7-block-1__title {
    top: 34%;
    left: auto;
    right: 20px;
    width: auto; }
  .ldp-t7-block-1__title-num,
  .ldp-t7-flying-years__num {
    font-size: 88px; }
  .ldp-t7-block-1__title-label,
  .ldp-t7-flying-years__label {
    font-size: 72px; }
  .ldp-t7-flying-years {
    width: auto;
    align-items: flex-end; }
  .ldp-t7-block-2 {
    margin-top: -80vh;
    padding: 140px 0 80px; }
  .ldp-t7-block-2__content {
    padding: 0 20px; }
  .ldp-t7-block-2__heading {
    font-size: 36px; }
  .ldp-t7-block-2__subtitle {
    font-size: 18px;
    margin-bottom: 24px; }
  .ldp-t7-block-2__body {
    font-size: 15px; }
  .ldp-t7-block-2__collage-img {
    width: 130%;
    height: 130%; }
  .ldp-t7-block-3 {
    padding: 60px 0 222px; }
  .ldp-t7-c3 {
    padding: 0 16px; }
  .ldp-t7-c3__heading {
    margin-bottom: 36px; }
  .ldp-t7-c3__heading-1,
  .ldp-t7-c3__heading-2 {
    font-size: 34px; }
  .ldp-t7-c3__board {
    border-radius: 20px; }
  .ldp-t7-c3__cards {
    padding: 78px 18px 24px;
    border-radius: 20px; }
  .ldp-t7-c3__flags {
    top: -16px;
    left: 14px;
    right: 14px;
    height: 78px; }
  .ldp-t7-block-3__blur {
    width: 760px; }
  .ldp-t7-c3-card {
    flex: 1 1 100%;
    height: 520px; }
  .ldp-t7-c3-card__title {
    font-size: 34px; }
  .ldp-t7-block-4 {
    padding: 60px 0; }
  .ldp-t7-b4 {
    padding: 0 20px; }
  .ldp-t7-b4__logo {
    max-width: 280px;
    margin-top: 20px; }
  .ldp-t7-b4__body {
    text-align: left;
    margin-top: 28px; }
  /* Mobile slide: ảnh dọc + panel nội dung overlay ở đáy (Figma 6:1486) */
  .ldp-t7-b4-slide {
    margin-top: 36px;
    max-width: 360px; }
  .ldp-t7-b4-slide__frame {
    aspect-ratio: 316 / 380;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 22px; }
  /* Mũi tên: chỉ hiện "next" ở góc phải dưới, dạng › */
  .ldp-t7-b4-slide__nav {
    left: auto;
    right: 12px;
    top: auto;
    bottom: 18px;
    z-index: 4;
    transform: none; }
  .ldp-t7-b4-slide__nav [data-slide-dir="prev"] {
    display: none; }
  .ldp-t7-b4-slide__arrow {
    width: 32px;
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); }
  .ldp-t7-b4-slide__arrow:hover {
    background: rgba(255, 255, 255, 0.45); }
  .ldp-t7-b4-slide__arrow svg {
    transform: rotate(-90deg); }
  /* Nút đóng × góc trên phải, chỉ hiện khi đang mở 1 mốc */
  .ldp-t7-b4-slide__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: none;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); }
  .ldp-t7-b4-slide__close svg {
    width: 48%;
    height: 48%; }
  .ldp-t7-b4-slide.is-open .ldp-t7-b4-slide__close {
    display: grid; }
  /* Pills -> panel nội dung overlay ở đáy (canh trái, chừa phải cho mũi tên) */
  .ldp-t7-b4-slide__pills {
    position: absolute;
    left: 14px;
    right: 56px;
    bottom: 16px;
    top: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: stretch;
    transform: none;
    pointer-events: none; }
  .ldp-t7-b4-slide__pill {
    display: none;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none; }
  .ldp-t7-b4-slide__pill.is-active {
    display: flex;
    width: 100%;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.28); }
  .ldp-t7-b4-slide__pill-ico {
    display: none; }
  .ldp-t7-b4-slide__pill-text {
    font-size: 15px;
    color: #ffffff;
    white-space: normal;
    text-shadow: 0 1px 4px rgba(0, 17, 54, 0.45); }
  .ldp-t7-b4-slide__pill-body {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 17, 54, 0.45); }
  .ldp-t7-b4-slide__link {
    color: #ffffff; }
  .ldp-t7-b5 {
    padding: 0 16px; }
  .ldp-t7-b5__card {
    padding: 32px 20px 36px;
    border-radius: 20px; }
  .ldp-t7-b5__title {
    font-size: 24px;
    margin-bottom: 28px; }
  .ldp-t7-b5__grid {
    flex-direction: column-reverse;
    gap: 28px; }
  .ldp-t7-b5__phone,
  .ldp-t7-b5__phone-placeholder {
    max-width: 240px;
    margin: 0 auto; }
  .ldp-t7-b5__phone-placeholder {
    min-height: 320px; }
  .ldp-t7-b5__btn {
    align-self: stretch;
    justify-content: center; }
  .ldp-t7-b5-modal {
    padding: 16px; }
  .ldp-t7-b5-modal__dialog {
    padding: 40px 22px 28px;
    border-radius: 28px; }
  .ldp-t7-b5-modal__close {
    top: 14px;
    right: 16px; }
  .ldp-t7-b5-modal__input {
    font-size: 16px; } }

#fireworks-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease; }

#fireworks-canvas.active {
  opacity: 1; }