:root{
  --bg-deep:#001b42;
  --bg-deeper:#00112a;
  --accent-blue:#2982cd;
  --accent-red:#d50e37;
}

html,body{
  font-family:'Mulish','SVN-Gilroy','Inter',sans-serif;
  background:var(--bg-deep);
  color:#fff;
}

/* Heading uppercase ("Lựa chọn hoàn hảo", "Bạn cần tư vấn", "Câu hỏi thường gặp", "Các bước mở thẻ")
   Design dùng SF Pro Expanded Semibold – fallback sang system SF Pro / Mulish + letter-spacing để nới ngang */
.heading-expanded{
  font-family:-apple-system,'SF Pro Display','SF Pro','Segoe UI',
    'Mulish',sans-serif;
  font-weight:600;
  font-stretch:125%;
  letter-spacing:.04em;
}

.card-glass{
  background:linear-gradient(180deg,rgba(60,103,192,.18),rgba(22,50,109,.18));
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}

/* Border gradient cho 2 card "Sống chất" và "Đầu tư đỉnh" – cùng hướng đỏ→xanh, mảnh và nhạt theo design */
.offer-card{
  position:relative;
  background-clip:padding-box;
  border:1px solid transparent;
}
.offer-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(229,90,120,.85) 0%,
    rgba(150,70,110,.55) 30%,
    rgba(90,120,180,.55) 65%,
    rgba(120,190,235,.85) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.faq-glass{
  background-image:url('assets/frame40-bg.png');
  background-size:cover;
  background-position:center;
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}

.btn-grad{
  background:linear-gradient(94deg,#2982cd 3%,#d50e37 103%);
}
.btn-grad:hover{
  filter:brightness(1.08);
}

/* Wrapper gộp "Lựa chọn hoàn hảo" + "Các bước mở thẻ" – background liền mạch */
.offer-steps-wrap{
  /* không set bg riêng để ambient ellipse từ body hiển thị xuyên qua */
}
/* Block glow nằm phía sau "Các bước mở thẻ" */
.steps-glow{
  left:50%;
  top:auto;
  bottom:-280px;
  transform:translateX(-2%);
  width:1100px;
  height:1100px;
  max-width:none;
  opacity:.85;
  z-index:0;
}

.nav-glass{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.16);
}

.step-card{
  position:relative;
  background:linear-gradient(180deg,rgba(60,103,192,.30),rgba(22,50,109,.30));
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  background-clip:padding-box;
  border:1px solid transparent;
}
.step-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,rgba(143,222,255,.05) 0%,rgba(60,103,192,.18) 60%,rgba(143,222,255,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.ambient img{
  position:absolute;
  max-width:none;
}

/* ===== Form field 3 states (empty / focus / filled) ===== */
.form-field{
  position:relative;
  height:52px;
  border-radius:8px;
  border:1px solid #003b57;
  padding:0 16px;
  display:flex;
  align-items:center;
  transition:border-color .15s ease, padding .15s ease;
}
.form-field > label{
  position:absolute;
  top:8px;
  left:16px;
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.5);
  line-height:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}
.form-field > input{
  flex:1;
  min-width:0;
  background:transparent;
  outline:none;
  border:0;
  color:#fff;
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  padding:0;
}
.form-field > input::placeholder{
  color:rgba(255,255,255,.3);
}
.form-field > .clear-btn{
  flex-shrink:0;
  display:none;
  margin-left:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
}
.form-field > .clear-btn img{
  width:16px;
  height:16px;
  display:block;
}

/* FOCUS state: viền xanh sáng, label hiện, value/placeholder đẩy xuống, hiện nút clear */
.form-field.is-focus{
  border-color:#38b7f1;
  align-items:flex-end;
  padding-top:8px;
  padding-bottom:6px;
}
.form-field.is-focus > label{ opacity:1; }
.form-field.is-focus > .clear-btn{ display:block; align-self:center; }

/* Khi đã có giá trị (đang focus hoặc đã filled): text 16px theo design */
.form-field.is-focus > input:not(:placeholder-shown),
.form-field.is-filled > input{
  font-size:16px;
  letter-spacing:-0.32px;
  line-height:24px;
}

/* FILLED state: viền xanh navy đậm, label hiện, không có nút clear */
.form-field.is-filled{
  align-items:flex-end;
  padding-top:8px;
  padding-bottom:6px;
}
.form-field.is-filled > label{ opacity:1; }

/* =====================================================================
   RESPONSIVE
   Breakpoints:
     >=1280px : desktop (default, dùng layout Figma 1440)
     1024-1279: laptop nhỏ
     768-1023 : tablet
     <768     : mobile
   Dùng !important ở những chỗ cần đè utility của Tailwind CDN.
   ===================================================================== */

/* Container co lại trên màn hình nhỏ hơn 1440 */
@media (max-width: 1279px){
  /* horizontal padding của các block */
  .px-\[120px\]{ padding-left:48px !important; padding-right:48px !important; }
  /* Hero card hơi co lại */
  section img[alt="ProfitX Card"]{
    width:520px !important;
    height:auto !important;
  }
  /* Form section: 2 cột thành dãn cách hợp lý */
  .gap-32{ gap:48px !important; }
}

/* === Tablet (<=1023px) === */
@media (max-width: 1023px){
  .px-\[120px\]{ padding-left:32px !important; padding-right:32px !important; }

  /* Header: ẩn block phải "Thẻ đồng thương hiệu VietinBank và SSI" */
  .nav-right{ display:none !important; }

  /* HERO: stack dọc */
  section .grid.grid-cols-2{
    grid-template-columns:1fr !important;
  }
  section img[alt="ProfitX Card"]{
    width:min(560px,90vw) !important;
    height:auto !important;
  }

  /* 3 features: 1 hàng cuộn -> stack */
  .grid.grid-cols-\[1fr_auto_1fr_auto_1fr\]{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  /* Ẩn divider dọc giữa các feature khi stack */
  .grid.grid-cols-\[1fr_auto_1fr_auto_1fr\] > img[src*="line1"]{
    display:none !important;
  }

  /* Offer cards (Sống chất / Đầu tư đỉnh) -> stack */
  section .grid.grid-cols-2.gap-10{
    grid-template-columns:1fr !important;
  }

  /* Steps: 4 -> 2 cột */
  .grid.grid-cols-4{
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* Form section: 2 cột -> 1 cột */
  section .grid.grid-cols-2.gap-32{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  form.flex.flex-col.w-\[551px\]{
    width:100% !important;
    max-width:551px;
  }

  /* FAQ width co lại */
  div.w-\[856px\]{
    width:100% !important;
    max-width:856px;
  }

  /* Headings nhỏ lại 1 chút */
  h1.display-stroke, h1.display-red,
  .heading-expanded.text-\[34px\]{
    font-size:30px !important;
  }
}

/* === Mobile (<=767px) === */
@media (max-width: 767px){
  .px-\[120px\]{ padding-left:20px !important; padding-right:20px !important; }

  /* NAV: stack 2 dòng */
  header.nav-glass .flex.items-center.justify-between{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  header.nav-glass .text-\[\#d5d5d5\].text-sm{
    font-size:12px !important;
  }

  /* Padding dọc các block giảm */
  section .py-32{ padding-top:64px !important; padding-bottom:64px !important; }
  section .py-20{ padding-top:48px !important; padding-bottom:48px !important; }
  section .pt-\[120px\]{ padding-top:64px !important; }
  section .pb-24{ padding-bottom:48px !important; }
  section .pb-20{ padding-bottom:48px !important; }

  /* Hero subtitle: "từ VietinBank và SSI" xuống dòng */
  .flex.items-center.gap-2.text-xl{
    flex-wrap:wrap !important;
  }

  /* Hero card */
  section img[alt="ProfitX Card"]{
    width:min(420px,92vw) !important;
  }

  /* Headings & body text scale */
  h1.display-stroke, h1.display-red{
    font-size:40px !important;
  }
  .heading-expanded{
    font-size:24px !important;
  }
  h3.text-2xl{ font-size:20px !important; }
  h3.text-\[32px\]{ font-size:24px !important; }
  p.text-xl{ font-size:16px !important; }
  p.text-\[54px\]{ font-size:40px !important; }

  /* Steps: 2 -> 1 cột, không cần fix height */
  .grid.grid-cols-4{
    grid-template-columns:1fr !important;
  }
  .step-card{
    height:auto !important;
    min-height:200px;
    gap:16px;
  }
  .step-card p.text-xl.h-\[72px\]{ height:auto !important; }

  /* Cards padding nhỏ lại */
  .card-glass.p-10, .offer-card.p-10{
    padding:24px !important;
  }
  .step-card{ padding:24px !important; }

  /* FAQ box: cho phép xuống dòng, bỏ height cố định */
  details.faq-glass summary{
    height:auto !important;
    padding:20px !important;
    gap:12px;
  }
  details.faq-glass summary span{
    font-size:16px !important;
    line-height:1.4;
    white-space:normal;
  }

  /* Footer stack */
  footer .flex.items-center.justify-between{
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
  }
  footer .gap-\[60px\]{
    gap:20px !important;
    flex-wrap:wrap;
  }

  /* Form: gap nhỏ lại, button full-width */
  form .btn-grad{
    width:100%;
    text-align:center;
    justify-content:center;
  }

  /* Logo nhỏ lại */
  img[alt="VietinBank x SSI"]{
    width:200px !important;
    height:auto !important;
  }

  /* Feature descriptions nhỏ lại để không xuống dòng */
  .grid.grid-cols-\[1fr_auto_1fr_auto_1fr\] p.text-base{
    font-size:14px !important;
  }

  /* Bớt độ chói các ellipse glow để không tràn */
  .ambient img{ opacity:.6; }
}

/* === Mobile rất nhỏ (<=380px): tinh chỉnh thêm === */
@media (max-width: 380px){
  h1.display-stroke, h1.display-red{ font-size:32px !important; }
  .heading-expanded{ font-size:22px !important; }
}