/* ==========================================================================
   FUJIWA – LANDING PAGE BÌNH 18L (CỦ CHI – HÓC MÔN)
   Tailwind CDN lo phần layout/utility. File này chứa:
     1. Biến & nền tảng
     2. Tiện ích trọng lượng chữ
     3. Nền từng section  ← ĐỔI ĐƯỜNG DẪN ẢNH Ở ĐÂY
     4. Header & điều hướng
     5. Nút bấm (CTA)
     6. Badge / pill / chip
     7. Hero
     8. Đồng hồ pH + card lợi ích
     9. Section khu vực
    10. Chứng nhận / triển lãm / đối tác
    11. Quy trình 4 bước
    12. Form báo giá
    13. Footer & sticky CTA
    14. Hiệu ứng xuất hiện khi cuộn
   ========================================================================== */

/* ----------------------------------------------------------------
   0. FONT — SVN-Poppins (Poppins bản có dấu tiếng Việt), tự host
   File nằm trong assets/fonts/. Muốn thêm weight khác thì copy file
   .woff2 vào đó rồi thêm một khối @font-face y hệt bên dưới.
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'SVN-Poppins';
  src: url('../fonts/SVN-Poppins-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Poppins';
  src: url('../fonts/SVN-Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Poppins';
  src: url('../fonts/SVN-Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Poppins';
  src: url('../fonts/SVN-Poppins-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Poppins';
  src: url('../fonts/SVN-Poppins-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------
   1. BIẾN & NỀN TẢNG
   ---------------------------------------------------------------- */
:root {
  --fj-blue:  #1450D4;
  --fj-sky:   #2E7BF6;
  --fj-deep:  #0B3AA0;
  --fj-navy:  #0E2A5C;
  --fj-cyan:  #3FE0F0;
  --fj-red:   #E8232A;
  --fj-ice:   #EAF3FC;

  --header-h: 4rem;          /* 64px – mobile  */
  --ease:     cubic-bezier(.22, .68, .32, 1);
}
@media (min-width: 1024px) { :root { --header-h: 5rem; } }  /* 80px – desktop */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);  /* chừa chỗ cho header sticky */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { overflow-x: hidden; background: #fff; }

img { max-width: 100%; height: auto; }

/* Ẩn ảnh vỡ để bố cục không bị lệch khi bạn chưa gắn đủ asset */
img:not([src]), img[src=""] { visibility: hidden; }

/* Ô giữ chỗ: khi file ảnh chưa được gắn vào assets/images/, phần tử vẫn
   giữ đúng kích thước và hiện một mảng màu nhạt thay vì icon ảnh vỡ.
   Có ảnh thật thì ảnh sẽ đè lên nền này. */
.benefit-card__img,
.cert-item__img,
.expo-item img,
.partner-item img {
  background: repeating-linear-gradient(
    -45deg,
    #E3ECF9 0 10px,
    #D7E4F6 10px 20px
  );
  color: rgba(14, 42, 92, .45);
  font-size: .68rem;
  font-weight: 600;
}

::selection { background: var(--fj-blue); color: #fff; }

/* Link "bỏ qua tới nội dung" cho trình đọc màn hình */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fj-blue); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Viền focus thống nhất cho bàn phím */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--fj-cyan);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   2. TIỆN ÍCH TRỌNG LƯỢNG CHỮ (khớp với Be Vietnam Pro)
   ---------------------------------------------------------------- */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* ----------------------------------------------------------------
   3. NỀN TỪNG SECTION
   >>> THAY ĐƯỜNG DẪN ẢNH LOCAL CỦA BẠN Ở KHỐI NÀY <<<
   Xuất từ các layer BG: TRANG*.BG.png → .jpg cho nhẹ
   ---------------------------------------------------------------- */
.section { position: relative; isolation: isolate; }

.section__bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section--ice   { background: var(--fj-ice); }
.section--light { background: #F7FBFF; }
.section--blue  { background: linear-gradient(120deg, var(--fj-deep) 0%, var(--fj-blue) 55%, var(--fj-sky) 100%); }

/* Các file BG đã được làm mờ/tint sẵn từ thiết kế gốc nên dùng ở opacity 1,
   không chồng thêm lớp phủ nào nữa. */

/* TRANG2.BG – núi Phú Sĩ + hoa anh đào (đã fade trắng) */
.section__bg--sec2 { background-image: url("../images/sec2-bg.jpg"); }
/* TRANG3.BG – nhà máy nhìn từ trên cao (đã phủ xanh) */
.section__bg--sec3 { background-image: url("../images/sec3-bg.jpg"); }
/* TRANG4.BG – chùa Nhật (đã fade trắng) */
.section__bg--sec4 { background-image: url("../images/sec4-bg.jpg"); }
/* TRANG5.BG – gradient xanh */
.section__bg--sec5 { background-image: url("../images/sec5-bg.jpg"); }
/* TRANG6.BG – núi Phú Sĩ neo ở đáy section */
.section__bg--sec6 {
  background-image: url("../images/sec6-bg.jpg");
  background-size: 100% auto;
  background-position: bottom center;
}

/* ----------------------------------------------------------------
   4. HEADER & ĐIỀU HƯỚNG
   ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled {
  background: #fff;
  box-shadow: 0 6px 24px -10px rgba(11, 58, 160, .28);
}

.nav-link {
  position: relative;
  font-size: .975rem; font-weight: 600; color: var(--fj-navy);
  transition: color .25s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; border-radius: 2px; background: var(--fj-blue);
  transition: width .3s var(--ease);
}
.nav-link:hover { color: var(--fj-blue); }
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }
.nav-link.is-active { color: var(--fj-blue); }

/* Nút hamburger */
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; border-radius: .6rem;
}
.menu-toggle span {
  display: block; height: 2.5px; width: 100%; border-radius: 2px;
  background: var(--fj-navy);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Panel menu mobile */
.mobile-menu {
  display: grid; gap: .25rem;
  overflow: hidden;
  max-height: 0;
  padding: 0 1.25rem;
  border-top: 1px solid transparent;
  background: #fff;
  transition: max-height .38s var(--ease), padding .38s var(--ease);
}
.mobile-menu.is-open {
  max-height: 24rem;
  padding: .75rem 1.25rem 1.25rem;
  border-top-color: rgba(20, 80, 212, .12);
}
.mobile-link {
  padding: .8rem .25rem;
  font-size: 1rem; font-weight: 600; color: var(--fj-navy);
  border-bottom: 1px solid rgba(20, 80, 212, .1);
}
.mobile-link:active { color: var(--fj-blue); }

/* ----------------------------------------------------------------
   5. NÚT BẤM (CTA)
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-size: .975rem; font-weight: 700; line-height: 1;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-sm { padding: .65rem 1.25rem; font-size: .875rem; }

/* Đỏ – CTA tương phản cao */
.btn-red {
  background: var(--fj-red); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(232, 35, 42, .55);
}
.btn-red:hover {
  background: #cf1d24;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(232, 35, 42, .6);
}

/* Viền kính – dùng trên hero */
.btn-hero {
  padding: .95rem 1.7rem;
  font-size: 1.02rem; font-weight: 700; color: #fff;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
}
.btn-hero:hover {
  background: #fff; color: var(--fj-blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .35);
}
.btn-hero__arrow {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--fj-blue); color: #fff;
  transition: transform .3s var(--ease), background-color .25s var(--ease);
}
.btn-hero__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-hero:hover .btn-hero__arrow { transform: translateX(4px); }

/* Nút gửi form */
.btn-submit {
  position: relative;
  padding: 1.05rem 1.5rem;
  background: #fff; color: var(--fj-blue);
  font-size: 1.05rem; font-weight: 800;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .35);
}
.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(0, 0, 0, .45);
  background: #F0F6FF;
}
.btn-submit:disabled { opacity: .72; cursor: not-allowed; }

.btn-submit__spinner { display: none; width: 20px; height: 20px; }
.btn-submit.is-loading .btn-submit__spinner {
  display: block;
  border: 2.5px solid rgba(20, 80, 212, .25);
  border-top-color: var(--fj-blue);
  border-radius: 999px;
  animation: fj-spin .7s linear infinite;
}
@keyframes fj-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
   6. BADGE / PILL / CHIP
   ---------------------------------------------------------------- */
/* Badge kính trên hero */
.badge-glass {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  font-size: .8rem; font-weight: 700; color: #fff;
}
.badge-glass__dot {
  width: 15px; height: 15px; border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 4px var(--fj-red);
}

/* Badge xanh đặc – dùng trên nền sáng */
.badge-solid {
  display: inline-block;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  background: var(--fj-blue); color: #fff;
  font-size: .78rem; font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(20, 80, 212, .6);
}

/* Badge trắng – dùng trên nền xanh */
.badge-white {
  display: inline-block;
  padding: .6rem 1.5rem;
  border-radius: .8rem;
  background: #fff; color: var(--fj-blue);
  font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .4);
}

/* Tiêu đề dạng pill xanh (Chứng nhận / Triển lãm / Đối tác) */
.pill-heading {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: .7rem 2.6rem;
  border-radius: .8rem;
  background: var(--fj-blue); color: #fff;
  font-size: 1.15rem; font-weight: 700; text-align: center;
  box-shadow: 0 12px 28px -12px rgba(20, 80, 212, .75);
}
@media (min-width: 1024px) { .pill-heading { font-size: 1.35rem; padding: .8rem 3.2rem; } }

/* Chip thông số hero */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  font-size: .85rem; font-weight: 600; color: #fff;
}
.chip__ico { width: 17px; height: 17px; fill: #fff; flex-shrink: 0; }

/* ----------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 540px;
}
@media (min-width: 1024px) { .hero { min-height: 660px; } }

/* >>> THAY ẢNH NỀN HERO Ở ĐÂY (TRANG1.BG.png) <<< */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../images/hero-bg.jpg") center / cover no-repeat;
}
/* Lớp phủ gradient để chữ trắng luôn đọc được */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(11, 58, 160, .92) 0%, rgba(20, 80, 212, .78) 42%, rgba(20, 80, 212, .12) 78%),
    linear-gradient(to bottom, rgba(11, 58, 160, .35) 0%, transparent 40%);
}
@media (max-width: 1023px) {
  /* Mobile không có ảnh sản phẩm nên phủ đậm đều hơn */
  .hero__scrim { background: linear-gradient(160deg, rgba(11, 58, 160, .9) 0%, rgba(20, 80, 212, .82) 100%); }
}

/* Bình nước trôi nhẹ */
.float-slow { animation: fj-float 6s ease-in-out infinite; }
@keyframes fj-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .float-slow { animation: none; } }

/* Badge pH9+ hình sao */
.ph-badge {
  position: absolute; top: 14%; right: 2%;
  display: grid; place-content: center; place-items: center;
  width: 132px; height: 132px;
  background: var(--fj-red); color: #fff;
  clip-path: polygon(
    50% 0%, 58% 8%, 68% 3%, 73% 13%, 84% 11%, 86% 22%, 96% 24%, 94% 35%,
    100% 43%, 94% 50%, 100% 58%, 92% 65%, 96% 76%, 85% 79%, 84% 90%, 73% 88%,
    67% 97%, 58% 92%, 50% 100%, 42% 92%, 33% 97%, 27% 88%, 16% 90%, 15% 79%,
    4% 76%, 8% 65%, 0% 58%, 6% 50%, 0% 43%, 6% 35%, 4% 24%, 14% 22%,
    16% 11%, 27% 13%, 32% 3%, 42% 8%
  );
  transform: rotate(-9deg);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35));
  animation: fj-pulse 3.2s ease-in-out infinite;
}
.ph-badge em { font-style: normal; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.ph-badge b  { font-size: 3rem; font-weight: 800; line-height: .95; }
.ph-badge sup { font-size: 1.3rem; }
@keyframes fj-pulse {
  0%, 100% { transform: rotate(-9deg) scale(1); }
  50%      { transform: rotate(-9deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .ph-badge { animation: none; } }

/* Thanh cam kết cuối hero */
.trust-bar {
  position: relative; z-index: 10;
  background: rgba(11, 58, 160, .55);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.trust-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; color: #fff;
}
@media (min-width: 1024px) { .trust-item { font-size: .95rem; justify-content: center; } }
.trust-check { color: #4ADE80; font-weight: 800; font-size: 1.05rem; line-height: 1; }

/* ----------------------------------------------------------------
   8. ĐỒNG HỒ pH + CARD LỢI ÍCH
   ---------------------------------------------------------------- */
.ph-gauge { width: 100%; max-width: 460px; margin: .5rem auto 0; }
/* overflow:hidden an toàn vì toàn bộ cung tròn và kim đều nằm gọn trong viewBox */
.ph-gauge svg { width: 100%; height: auto; overflow: hidden; }
/* Tâm quay = tâm cung tròn trong viewBox (CX=200, CY=190 trong main.js).
   transform-box: view-box để px tính theo hệ toạ độ viewBox, không theo bounding box của kim. */
.ph-gauge__needle {
  transform-box: view-box;
  transform-origin: 200px 190px;
  transition: transform 1.4s var(--ease);
}

/* Danh sách tick trong nội dung */
.feature-li { display: flex; gap: .75rem; font-size: .95rem; font-weight: 500; line-height: 1.6; color: rgba(14, 42, 92, .88); }
.feature-li__check { flex-shrink: 0; color: #22C55E; font-size: 1.1rem; font-weight: 800; line-height: 1.45; }

/* Card lợi ích: nửa trên xanh + ảnh nửa dưới */
.benefit-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 1.1rem;
  background: linear-gradient(165deg, #2A6BE0 0%, var(--fj-blue) 45%, #0F45B8 100%);
  box-shadow: 0 12px 30px -12px rgba(11, 58, 160, .55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 48px -16px rgba(11, 58, 160, .6);
}
.benefit-card__body { padding: 1.3rem 1.25rem 1.15rem; flex: 1 1 auto; }
.benefit-card__title { font-size: 1.15rem; font-weight: 700; line-height: 1.28; color: #fff; }
.benefit-card__text  { margin-top: .6rem; font-size: .85rem; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.benefit-card__img {
  width: 100%; height: 118px; object-fit: cover; display: block;
  filter: saturate(.85);
  transition: transform .5s var(--ease);
}
.benefit-card:hover .benefit-card__img { transform: scale(1.06); }

/* ----------------------------------------------------------------
   9. SECTION KHU VỰC (lý do chọn Fujiwa)
   ---------------------------------------------------------------- */
.reason-card {
  padding: 1.5rem 1.15rem 1.35rem;
  border-radius: 1rem;
  background: #F4F7FB;
  text-align: center;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease);
}
.reason-card:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 26px 48px -16px rgba(0, 0, 0, .5);
}
.reason-card__ico {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto .9rem;
  color: var(--fj-blue);
}
.reason-card__ico svg { width: 100%; height: 100%; }
.reason-card__title { font-size: 1.08rem; font-weight: 700; color: var(--fj-blue); line-height: 1.3; }
.reason-card__text  { margin-top: .6rem; font-size: .82rem; font-weight: 500; line-height: 1.55; color: rgba(14, 42, 92, .78); }

/* Hộp thông tin nhà máy */
.factory-box {
  max-width: 900px; margin: 2.75rem auto 0;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .5);
}
@media (min-width: 1024px) { .factory-box { padding: 2.5rem 3rem; } }
.factory-box__text {
  font-size: 1rem; font-weight: 600; line-height: 1.62; color: var(--fj-blue); text-align: center;
}
@media (min-width: 1024px) { .factory-box__text { font-size: 1.2rem; } }

/* ----------------------------------------------------------------
   10. CHỨNG NHẬN / TRIỂN LÃM / ĐỐI TÁC
   ---------------------------------------------------------------- */
.cert-item { text-align: center; }
.cert-item__img {
  /* khớp tỷ lệ ảnh chứng nhận tách từ TRANG4.ND.png (212 × 297) */
  width: 100%; aspect-ratio: 212 / 297; object-fit: contain;
  padding: .35rem;
  background: #fff;
  border-radius: .35rem;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cert-item:hover .cert-item__img {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 36px -14px rgba(0, 0, 0, .45);
}
.cert-item__cap {
  margin-top: .6rem;
  font-size: .72rem; font-weight: 600; line-height: 1.35; color: var(--fj-blue);
}

.expo-item {
  overflow: hidden;
  border-radius: .75rem;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5);
}
.expo-item img {
  /* khớp tỷ lệ ảnh triển lãm tách từ TRANG4.ND.png (360 × 290) */
  width: 100%; aspect-ratio: 360 / 290; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.expo-item:hover img { transform: scale(1.07); }

.partner-item {
  display: grid; place-items: center;
  min-width: 118px; height: 62px; padding: .6rem 1rem;
  background: #fff;
  border-radius: .55rem;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.partner-item:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .45); }
.partner-item img { max-height: 38px; min-width: 90px; min-height: 28px; width: auto; object-fit: contain; }

/* ----------------------------------------------------------------
   11. QUY TRÌNH 4 BƯỚC
   ---------------------------------------------------------------- */
.step-card {
  padding: 1.75rem 1.25rem 1.6rem;
  border-radius: 1rem;
  background: #F4F7FB;
  text-align: center;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease);
}
.step-card:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 28px 50px -18px rgba(0, 0, 0, .55);
}
.step-card__num {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: var(--fj-blue); color: #fff;
  font-size: 2rem; font-weight: 800; line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(20, 80, 212, .8);
  transition: transform .35s var(--ease);
}
.step-card:hover .step-card__num { transform: scale(1.08); }
.step-card__title { font-size: 1.08rem; font-weight: 700; color: var(--fj-blue); line-height: 1.3; }
.step-card__text  { margin-top: .65rem; font-size: .82rem; font-weight: 500; line-height: 1.55; color: rgba(14, 42, 92, .78); }

/* ----------------------------------------------------------------
   12. FORM BÁO GIÁ
   ---------------------------------------------------------------- */
/* Danh sách quyền lợi cột trái */
.offer-li { display: flex; gap: 1rem; }
.offer-li__ico {
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: .7rem;
  background: var(--fj-blue); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(20, 80, 212, .7);
}
.offer-li__ico svg { width: 24px; height: 24px; }
.offer-li__title { font-size: 1.1rem; font-weight: 700; color: var(--fj-navy); line-height: 1.3; }
.offer-li__text  { margin-top: .3rem; font-size: .9rem; font-weight: 500; line-height: 1.55; color: rgba(14, 42, 92, .78); }

/* Hộp hotline */
.hotline-box {
  margin-top: 2.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1.1rem;
  background: linear-gradient(120deg, var(--fj-blue) 0%, #1A62E8 100%);
  box-shadow: 0 18px 40px -16px rgba(20, 80, 212, .7);
}
.hotline-box__num {
  font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1.1;
  transition: color .25s var(--ease);
}
.hotline-box__num:hover { color: var(--fj-cyan); }
@media (min-width: 1024px) { .hotline-box__num { font-size: 2.35rem; } }

/* Thẻ chứa form */
.quote-card {
  padding: 1.75rem 1.35rem 1.6rem;
  border-radius: 1.5rem;
  background: linear-gradient(160deg, var(--fj-blue) 0%, #0F49BE 100%);
  box-shadow: 0 26px 60px -20px rgba(11, 58, 160, .7);
}
@media (min-width: 1024px) { .quote-card { padding: 2.25rem 2.15rem 2rem; } }

.field { display: block; }
.field__label {
  display: block; margin-bottom: .4rem;
  font-size: .88rem; font-weight: 700; color: #fff;
}
.req { color: #FF6B6B; }

.field__input {
  width: 100%;
  padding: .95rem 1.1rem;
  border-radius: .75rem;
  border: 1.5px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .95rem; font-weight: 500; font-family: inherit;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: rgba(255, 255, 255, .62); font-weight: 400; }
.field__input:hover  { background: rgba(255, 255, 255, .19); }
.field__input:focus  {
  outline: none;
  border-color: var(--fj-cyan);
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 4px rgba(63, 224, 240, .22);
}
/* Chrome tự động điền – giữ nền tối, chữ trắng */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #1B5AD0 inset;
  caret-color: #fff;
}

/* Select: mũi tên tuỳ chỉnh + option chữ tối (nền dropdown do OS vẽ) */
.field__select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
  cursor: pointer;
}
.field__select option { color: #0E2A5C; background: #fff; }

/* Trạng thái lỗi */
.field__input.is-invalid {
  border-color: #FF6B6B;
  background: rgba(255, 107, 107, .14);
}
.field__err {
  display: none;
  margin-top: .35rem;
  font-size: .78rem; font-weight: 600; color: #FFC9C9;
}
.field__err.is-shown { display: block; }

/* Bẫy spam – ẩn hoàn toàn khỏi người dùng lẫn trình đọc màn hình */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.hp-field input { width: 1px; height: 1px; }

/* Thông báo kết quả gửi form */
.form-status {
  display: none;
  margin-top: .25rem;
  padding: .85rem 1rem;
  border-radius: .7rem;
  font-size: .88rem; font-weight: 600; text-align: center;
}
.form-status.is-success { display: block; background: rgba(74, 222, 128, .2); border: 1px solid rgba(74, 222, 128, .55); color: #DCFCE7; }
.form-status.is-error   { display: block; background: rgba(255, 107, 107, .18); border: 1px solid rgba(255, 107, 107, .55); color: #FFE0E0; }

/* ----------------------------------------------------------------
   13. FOOTER & STICKY CTA
   ---------------------------------------------------------------- */
.footer {
  background: linear-gradient(115deg, var(--fj-blue) 0%, #1B5AD6 55%, #1450D4 100%);
  color: #fff;
  /* chừa chỗ cho thanh CTA dính đáy trên mobile */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem);
}
@media (min-width: 1024px) { .footer { padding-bottom: 0; } }

.footer__logo {
  display: inline-grid; place-items: center;
  padding: .6rem 1.1rem;
  background: #fff;
  border-radius: .7rem;
}
.footer__heading { font-size: .95rem; font-weight: 700; letter-spacing: .03em; }
.footer__link { font-weight: 600; transition: color .25s var(--ease); }
.footer__link:hover { color: var(--fj-cyan); text-decoration: underline; }
.footer__rule { margin: 2.25rem 0 1.5rem; border: 0; border-top: 1px solid rgba(255, 255, 255, .3); }

.social-link {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  color: #fff;
  transition: transform .28s var(--ease), color .28s var(--ease);
}
.social-link svg { width: 32px; height: 32px; }
.social-link:hover { transform: translateY(-4px) scale(1.08); color: var(--fj-cyan); }

/* Thanh CTA dính đáy – mobile */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 24px -8px rgba(11, 58, 160, .35);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta__call, .sticky-cta__quote {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .85rem .5rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 700; line-height: 1;
}
.sticky-cta__call  { background: #EAF1FF; color: var(--fj-blue); }
.sticky-cta__call svg { width: 17px; height: 17px; }
.sticky-cta__quote { background: var(--fj-red); color: #fff; box-shadow: 0 6px 16px -5px rgba(232, 35, 42, .6); }

/* ----------------------------------------------------------------
   14. HIỆU ỨNG XUẤT HIỆN KHI CUỘN
   ---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}