/* ============ THEME & RESET ============ */
:root{
  --brand:#47a3f3; --brand-2:#2f86d6; --brand-3:#1f5da7;
  --ink:#1f2937; --muted:#64748b; --bg:#fff; --bg-grey:#eef1f5; --border:#e5e7eb;
  --radius:14px; --shadow:0 10px 30px rgba(2,6,23,.10); --shadow-soft:0 8px 20px rgba(2,6,23,.06);
  /* Steps */
  --c1:#f2b544; --c2:#e64959; --c3:#28a0b5; --c4:#2f6fb8; --c5:#123a64;
  --ring:14px; --size:160px; --gap:42px;
  /* Wheel */
  --wheel-size:520px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);line-height:1.65;background:#fff}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}

/* ============ LAYOUT ============ */
.container{width:min(1140px,92%);margin-inline:auto}
.section{padding:54px 0}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ============ TYPOGRAPHY & BUTTONS ============ */
.title{font-size:clamp(22px,2.4vw,34px);line-height:1.2;margin:6px 0 10px}
.muted{color:var(--muted)}
.btn{--bg:var(--brand);--ink:#fff;background:var(--bg);color:var(--ink);padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:800;display:inline-flex;gap:8px;align-items:center;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.btn--light{--bg:#fff;--ink:var(--ink);border-color:var(--border)}
.btn--ghost{--bg:transparent;--ink:#fff;border-color:rgba(255,255,255,.6)}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(47,134,214,.22)}

/* ============ PH PLACEHOLDERS ============ */
.ph{position:relative;display:flex;align-items:center;justify-content:center;border:2px dashed #d9dee6;background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 10px,#ffffff 10px,#ffffff 20px);color:#9aa4b2;font-weight:800;border-radius:12px;box-shadow:var(--shadow-soft)}
.ph::after{content:"ẢNH";position:absolute;bottom:8px;right:10px;font-size:12px;color:#94a3b8;opacity:.8}
.ph.round{border-radius:999px;aspect-ratio:1/1}
.ph.rect{aspect-ratio:4/3}.ph.rect-wide{aspect-ratio:16/9}.ph.rect-tall{aspect-ratio:3/4}

/* ============ TOPBAR ============ */
/* Topbar full-width + căn trái/phải đúng mép màn hình */
.topbar .container{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 12px;        /* chừa mép một chút cho đẹp */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row !important;  /* nếu trước đó lỡ đặt row-reverse */
  gap: 12px;
}

.topbar .container > div:first-child{  /* Tên công ty */
  text-align: left;
}
.topbar .container > div:last-child{   /* Hotline + Email */
  margin-left: auto;
  text-align: right;
}

@media (max-width: 768px) {
  .topbar {
    display: none;
  }

}



/* ============ HERO ============ */
.hero{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;padding:22px 0 18px;border-bottom:6px solid var(--brand-3)}
header.hero{position:relative;padding:0;background:none;aspect-ratio:1074 / 412;width:100%;overflow:hidden;border-bottom:6px solid var(--brand-3)}
header.hero .hero-bg{position:absolute;inset:0;z-index:1}
header.hero .hero-bg img{width:100%;height:100%;object-fit:contain;display:block;background:linear-gradient(180deg,var(--brand),var(--brand-2))}
header.hero .inner{
  position: absolute;
  left: 40%;
  bottom: 16px;          /* sát viền dưới ảnh, chỉnh 10–24px tùy mắt */
  transform: translateX(-50%);
  z-index: 3;
  display: block;        /* bỏ grid/place-content để không kéo về góc trái */
  /* quan trọng: KHÔNG để inset:0 nữa */
}

@media (max-width:520px){header.hero>.container.inner{display:none!important}}

/* ============ SECTION HEADINGS ============ */
.midcap{text-align:center;margin-bottom:12px}
.midcap .title{display:inline-block;position:relative;padding-bottom:10px}
.midcap .title::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:120px;height:4px;background:var(--brand);border-radius:6px}

/* ============ CONTENT BLOCKS ============ */
.block{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;margin:20px 0}
@media (max-width:860px){.block{grid-template-columns:1fr}}
.circle-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media (max-width:800px){.circle-trio{grid-template-columns:1fr}}
.feature-grey{background:var(--bg-grey);border-top:1px solid #e8edf3;border-bottom:1px solid #e8edf3}
.benefit{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:center;margin:22px 0}
@media (max-width:900px){.benefit{grid-template-columns:1fr}}

/* ============ BRANDS GRID ============ */
.brand-grid{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1024px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brand-item{display:flex;align-items:center;justify-content:center;padding:22px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);min-height:100px}
.brand-item img{height:40px;width:auto;object-fit:contain;transition:transform .2s ease}
.brand-item:hover img{transform:translateY(-1px)}

/* ============ STEPS (timeline 5 bước) ============ */
.headline{text-align:center;margin:40px 20px 20px;font-size:26px;line-height:1.5;font-weight:700}
.headline .black{color:#000}
.headline .red{color:var(--brand-3)!important}
/* PATCH: Headline 2 dòng cho khu "5 bước" */
.headline { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 6px;
  line-height: 1.35;
}

.wrap{max-width:1100px;margin:20px auto 80px;padding:0 20px}
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);align-items:start}
.flow::before{content:"";position:absolute;left:calc(var(--size)/2 - var(--ring));right:calc(var(--size)/2 - var(--ring));top:calc(var(--size)/2 - var(--ring)/2);height:12px;background:#e5e7eb;border-radius:999px;z-index:0}
.step{text-align:center;position:relative}
.badge{position:relative;width:var(--size);height:var(--size);margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at center,#fff 62%,transparent 62%),conic-gradient(#fff 0 100%);box-shadow:0 10px 24px rgba(0,0,0,.08),inset 0 0 0 12px #fff;z-index:1}
.badge::before{content:"";position:absolute;inset:0;border:var(--ring) solid currentColor;border-radius:50%;opacity:.9}
.badge::after{content:"";position:absolute;inset:24px;border:8px solid currentColor;border-radius:50%;opacity:.5}
.num{font-weight:800;font-size:56px;line-height:1;letter-spacing:.02em}
.flow .title{font-weight:700;font-size:18px;line-height:1.5}           /* scoped, KHÔNG đè .title toàn trang */
.flow .icon{width:24px;height:24px;margin:10px auto 12px;display:block} /* scoped, KHÔNG đè icon footer */
.s1 .badge{color:var(--c1)} .s2 .badge{color:var(--c2)} .s3 .badge{color:var(--c3)} .s4 .badge{color:var(--c4)} .s5 .badge{color:var(--c5)}
@media (max-width:1000px){:root{--size:140px;--gap:28px}}
@media (max-width:840px){:root{--size:120px;--gap:24px}.num{font-size:44px}.flow .title{font-size:16px}.flow::before{height:10px}}
@media (max-width:700px){.flow{grid-template-columns:1fr;gap:36px}.flow::before{display:none}}

/* ============ WHEEL (bánh xe giá trị) ============ */
.wheel-section .wheel{position:relative;width:min(var(--wheel-size),80vw);aspect-ratio:1/1;margin:10px auto 0}
.wheel-section .wheel .base{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#efefef 0 60deg,#e9e9e9 60deg 120deg,#efefef 120deg 180deg,#e9e9e9 180deg 240deg,#efefef 240deg 300deg,#e9e9e9 300deg 360deg);-webkit-mask:radial-gradient(circle,transparent 0 38.5%,#000 38.5% 100%);mask:radial-gradient(circle,transparent 0 38.5%,#000 38.5% 100%);filter:drop-shadow(0 16px 26px rgba(0,0,0,.15));z-index:1}
.wheel-section .wheel .ring{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,transparent 0 58%,var(--brand) 58% 66%,transparent 66% 100%);z-index:2}
.wheel-section .wheel .white-gap{position:absolute;inset:21%;border-radius:50%;background:radial-gradient(circle,transparent 0 62%,#fff 62% 72%,transparent 72% 100%);z-index:3}
.wheel-section .wheel .core{position:absolute;inset:30%;border-radius:50%;display:grid;place-items:center;text-align:center;color:#fff;font-weight:900;background:radial-gradient(circle at 40% 35%,#2263a8 0 45%,var(--brand-3) 70%)!important;box-shadow:0 8px 20px rgba(0,0,0,.18) inset;padding:16px;z-index:6}
.wheel-section .labels-curve{position:absolute;inset:0;z-index:5;pointer-events:none;display:none} /* bật lại bằng cách bỏ display:none */
.wheel-grid{display:grid;grid-template-columns:1fr min(var(--wheel-size),70vw) 1fr;gap:clamp(20px,3vw,56px);align-items:center}
.wheel-col{display:flex;flex-direction:column;gap:28px}
.wheel-col h3{margin:0 0 6px;font-size:22px;font-weight:900;color:var(--brand);letter-spacing:.3px;text-transform:uppercase}
.wheel-col p{margin:0;color:var(--muted)}
.wheel-center{display:block}
@media (max-width:1150px){:root{--wheel-size:440px}}
@media (max-width:980px){:root{--wheel-size:380px}.wheel-grid{grid-template-columns:1fr}.wheel-col{order:2}.wheel-center{order:1;margin-bottom:12px}}

/* ============ TESTIMONIALS & GALLERY ============ */
.testi{background:#eceff3;border-top:1px solid #e1e4ea;border-bottom:1px solid #e1e4ea}
.quote{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;position:relative}
.quote::before{content:"“";position:absolute;left:10px;top:-14px;font-size:60px;color:#e2e8f0}
.gallery-red{background:var(--brand-3);color:#fff;padding:28px 0}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.mosaic .w3{grid-column:span 3}.mosaic .w6{grid-column:span 6}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(6,1fr)}}
@media (max-width:560px){.mosaic{grid-template-columns:repeat(2,1fr)}.mosaic .w6{grid-column:span 2}}

/* ============ CTA + FORM (#lien-he) ============ */
.cta{background:var(--brand-2);color:#fff;padding:28px 0}
/* Grid ngoài của #lien-he: 1 cột để tránh bị rule CTA khác đè */
#lien-he .container > .grid{grid-template-columns:1fr;justify-items:center;align-items:start}
/* Card form */
#lien-he .form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;color:var(--ink);width:100%;max-width:100%;margin:0 auto}
/* Hàng đầu: Họ & Tên / SĐT */
#lien-he .form .grid.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){#lien-he .form .grid.grid-2{grid-template-columns:1fr}}
#lien-he .field{display:flex;flex-direction:column;font-weight:600;color:var(--ink)}
#lien-he input,#lien-he textarea,#lien-he select{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;font:inherit;max-width:100%}
#lien-he textarea{min-height:120px;resize:vertical}
#lien-he .with-suffix{position:relative} 
#lien-he .with-suffix input{padding-right:40px}
#lien-he .suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
#lien-he .capital-box{border:1px solid var(--border);border-radius:10px;padding:12px 16px}
#lien-he .capital-row{display:flex;justify-content:space-around;gap:20px;flex-wrap:wrap}
#lien-he .capital-item{display:flex;flex-direction:column;align-items:center}
#lien-he .actions{display:flex;justify-content:center;margin-top:16px}
#lien-he .status{font-size:13px;margin-top:8px;text-align:center}
#lien-he .field .hint{display:block;min-height:1.2em;margin-top:6px;color:var(--muted);font-size:12px}

/* ============ FB PLACEHOLDER ============ */
.fb-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
/* ============ FOOTER ============ */
.footer{background:var(--bg);border-top:1px solid var(--border)}
.footer .grid{display:grid;grid-template-columns:1fr auto;gap:28px;padding:28px 0;align-items:start}
@media (max-width:900px){.footer .grid{grid-template-columns:1fr}}
.brand-line{display:flex;gap:12px;align-items:center;font-weight:900;color:var(--brand);margin:0 0 8px}
.brand-line .logo{width:48px;height:48px;border-radius:10px;overflow:hidden;display:block;flex-shrink:0;background:#e5e7eb}
.brand-line .logo img{width:100%;height:100%;object-fit:contain;display:block}
.about,.contact{margin:0 0 6px;font-size:14px;max-width:60ch}
.about{color:var(--muted)} .contact a{color:var(--brand)}
.connect{display:flex;flex-direction:column;align-items:center}
.connect h4{margin:0 0 8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#334155;text-align:center}
.socials{display:flex;gap:12px;justify-content:center}
.icon-btn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);box-shadow:0 6px 14px rgba(2,6,23,.06);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(2,6,23,.12);background:#f8fafc}
.icon{width:20px;height:20px;display:block}
@media (max-width:900px){.connect{align-items:flex-start}.socials{justify-content:flex-start}}
/* FB-box: full bề rộng container, không chừa khoảng trống 2 bên */
/* Nới container riêng cho #lien-he để hết khe xanh hai bên */
#lien-he .container{
  width: min(1140px, 100%);   /* thay vì 92% ở global */
}

/* FB-box chiếm trọn container, không chừa khoảng trống hai bên */
#lien-he .fb-box{
  width: 100%;
  max-width: 100%;
  margin: 18px 0 0;           /* bỏ auto hai bên */
  padding: 12px;              /* viền trắng bên trong */
  background: #fff;
  border: 0;
  box-shadow: none;
  border-radius: 12px;
}

#lien-he .fb-box img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Avatar trong quote */
.quote {
  position: relative; /* để định vị tuyệt đối avatar */
}

.quote .avatar {
  position: absolute;
  bottom: 10px;   /* cách đáy khung 10px */
  right: 10px;    /* cách viền phải 10px */
  width: 80px;    /* kích thước avatar */
  height: 80px;
  border-radius: 50%;      /* hình tròn */
  border: 2px solid #fff;  /* viền trắng nổi trên nền */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* đổ bóng nhẹ */
  object-fit: cover;       /* ảnh không méo */
}
/* === FORCE: Form #lien-he rộng bằng container và không bị giới hạn === */
#lien-he .container{
  width: min(1140px, 100%);  /* container full bề ngang section; khớp ảnh FB-box */
}

#lien-he .grid > div{
  width: 100%;               /* wrapper không bó hẹp form */
}

#lien-he .form{
  width: 100% !important;    /* đè mọi width cũ như 720px/900px */
  max-width: none !important;
  margin: 0 auto;
}
/* === PATCH: Tăng khoảng cách & nhịp dọc cho form #lien-he === */

/* Card form rộng rãi hơn một chút */
#lien-he .form{
  padding: 28px 28px 24px;
}

/* Khoảng cách sau tiêu đề & đoạn mô tả */
#lien-he .form h3{
  margin: 0 0 12px;
}
#lien-he .form .muted{
  display: block;
  margin: 0 0 24px;
}

/* Hàng đầu (Họ & tên / SĐT) – tăng gap giữa hai cột */
#lien-he .form .grid.grid-2{
  gap: 24px 28px;  /* row-gap 24, col-gap 28 */
}
@media (max-width:800px){
  #lien-he .form .grid.grid-2{ gap: 18px; }
}

/* Mỗi field: tạo khoảng giữa label (chữ) và ô nhập */
#lien-he .field{
  display: flex;
  flex-direction: column;
  row-gap: 2px;        /* label ↔︎ input rất gần */
  margin: 0 0 20px;    /* khoảng cách giữa các field với nhau */
}

/* Nới padding bên trong input/textarea/select */
#lien-he input,
#lien-he textarea,
#lien-he select{
  padding: 12px 14px;  /* giữ padding để ô không quá mỏng */
}

/* Ô có hậu tố m² cần thêm chỗ bên phải */
#lien-he .with-suffix input{
  padding-right: 56px;     /* để suffix không sát chữ */
}
#lien-he .suffix{
  right: 14px;
}

/* Dòng gợi ý/nhắc lỗi dưới SĐT… giữ khoảng cố định */
#lien-he .hint{
  margin-top: 8px;
  min-height: 1.2em;
  font-size: 12px;
}

/* Nhóm “Vốn đầu tư…” – nới đệm & khoảng giữa các mục */
#lien-he .capital-box{
  padding: 14px 18px;
}
#lien-he .capital-row{
  gap: 36px;
}

/* Khoảng cách phía trên nút gửi */
#lien-he .actions{
  margin-top: 24px;
}

.btn{ font-family: "Poppins", sans-serif; font-weight: 600; }

/* Font gọn, mượt như nút 2 (giữ Inter – không cần đổi font) */
.btn{
  display: inline-flex;           /* căn giữa chữ theo chiều dọc */
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  min-height: 44px;               /* chiều cao tối thiểu ổn định */
  border-radius: 999px;

  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;               /* bớt dày hơn 800 để chữ mượt */
  font-size: 16px;
  letter-spacing: .2px;           /* giãn nhẹ */
  line-height: 1;                 /* tránh dôi khoảng bên trong */

  color: #fff;
  background: linear-gradient(90deg,#46A7F4,#2F86D6);
  box-shadow: 0 10px 24px rgba(47,134,214,.30);
  text-decoration: none;

  /* làm mịn chữ như ảnh 2 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(47,134,214,.38);
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cột đều nhau */
  gap: 12px;                             /* khoảng cách giữa ảnh */
}

.mosaic .ph {
  border-radius: 12px;
  overflow: hidden;
}

.mosaic .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ảnh luôn căng đầy ô mà không méo */
}
.ph::after,
.rect::after {
  content: none !important;
}

/* Social icons — clean & modern */
.socials{ display:flex; gap:14px; }

.icon-btn{
  width:48px; height:48px; border-radius:999px;
  display:grid; place-items:center;
  background:#fff; color:#64748b;
  border:0;
  box-shadow:0 6px 14px rgba(2,6,23,.08), inset 0 0 0 1px #e5e7eb;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.icon-btn .icon{ width:22px; height:22px; display:block; fill:currentColor; }

/* Variants (solid brand) */
.icon-btn.solid{ color:#fff; box-shadow:0 8px 18px rgba(2,6,23,.18); }
.icon-btn.solid.fb{    background:#1877F2; }
.icon-btn.solid.zalo{  background:#0068FF; }
.icon-btn.solid.phone{ background:#28a745; }

/* Hover */
.icon-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(2,6,23,.16); }
.icon-btn.solid:hover{ box-shadow:0 14px 28px rgba(0,0,0,.22); }
/* Desktop: 2 cột bình thường */
.benefit{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:18px; align-items:center; }

/* Mobile: 1 cột + đảo vị trí mục chẵn */
@media (max-width: 900px){
  .benefit{ grid-template-columns:1fr; }
  /* Mặc định: text trước, ảnh sau */
  .benefit > :first-child{ order:1; }
  .benefit > :last-child { order:2; }

  /* Với mục CHẴN: đảo lại để được text→ảnh→text→ảnh… */
  .benefit:nth-of-type(even) > :first-child{ order:2; }  /* text xuống dưới */
  .benefit:nth-of-type(even) > :last-child { order:1; }  /* ảnh lên trên */
}

.label-text::after {
  content: " *";
  color: red;
  font-weight: bold;
  margin-left: 3px;  /* cách nhẹ so với chữ */
}
/* AND MORE on mobile for brand grid */
.brand-actions{ display:flex; justify-content:center; margin-top:10px; }

#brandToggle{ display:none; }               /* ẩn mặc định */

@media (max-width:640px){
  /* Khi CHƯA mở rộng: chỉ hiện 6 logo đầu */
  #brandLogos:not(.is-expanded) .brand-item:nth-child(n+7){ display:none; }
  #brandToggle{ display:inline-flex; }      /* chỉ hiện nút trên mobile */
}

.hero .inner {
  position: absolute;
  left: 50%;
  bottom: 50px;              /* sát mép dưới ảnh, chỉnh tăng/giảm nếu cần */
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}

/* === CTA lung linh nhưng hài hòa với banner === */
.hero .btn-cta{
  position: relative;
  isolation: isolate;              /* tách layer cho pseudo elements */
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  /* Glass nhẹ để tách khỏi ảnh */
  background: linear-gradient(90deg, #46A7F4, #2F86D6);
  color: #fff;
  box-shadow:
    0 8px 24px rgba(47,134,214,.34),      /* đổ bóng hài hòa */
    0 0 0 1px rgba(255,255,255,.18) inset;/* viền trong mảnh */
  backdrop-filter: saturate(1.1) blur(2px);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Vầng sáng thở rất nhẹ */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(47,134,214,.34), 0 0 0 1px rgba(255,255,255,.18) inset; }
  50% { box-shadow: 0 10px 28px rgba(47,134,214,.44), 0 0 0 1px rgba(255,255,255,.22) inset; }
}
.hero .btn-cta{
  animation: ctaGlow 3.2s ease-in-out infinite;
}

/* Viền gradient mềm bên ngoài (ảo) */
.hero .btn-cta::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,0) 30%, rgba(255,255,255,.24));
  z-index:-1; filter: blur(6px); opacity:.55; pointer-events:none;
}

/* Tia sáng lướt qua */
@keyframes ctaShine {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  45%  { opacity: .0; }
  60%  { opacity: .25; }
  100% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}
.hero .btn-cta::after{
  content:"";
  position:absolute; top:10%; bottom:10%; width:42%;
  left:0; border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  mix-blend-mode: screen; filter: blur(2px);
  animation: ctaShine 4.5s ease-in-out infinite 1.2s;
  pointer-events:none;
}

/* Hover: đẩy nhẹ, sáng hơn chút */
.hero .btn-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(47,134,214,.45), 0 0 0 1px rgba(255,255,255,.22) inset;
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .hero .btn-cta{ animation: none; }
  .hero .btn-cta::after{ animation: none; opacity: .12; }
}

/* Nếu nền banner sáng, tăng độ tách nhẹ cho nút */
/* === CTA phập phồng & sinh động (không cần đổi HTML) === */
.hero .btn-cta{
  /* KÍCH THƯỚC (giữ như bạn đang dùng, có thể tăng nếu muốn) */
  font-size: 19px;
  padding: 16px 36px;
  min-height: 48px;

  /* NỀN động (dịch chuyển gradient mượt) */
  background: linear-gradient(100deg, #46A7F4, #2F86D6, #1F5DA7);
  background-size: 220% 220%;

  /* LỚP GLASS nhẹ + đổ bóng */
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  box-shadow:
    0 10px 28px rgba(47,134,214,.42),
    0 0 0 1px rgba(255,255,255,.18) inset;
  backdrop-filter: saturate(1.1) blur(2px);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);

  /* COMBO ANIMATION: phập phồng + đổi gradient + tia sáng */
  animation:
    ctaPulseBig 2.6s ease-in-out infinite,
    ctaGradientShift 9s ease-in-out infinite,
    ctaGlow 3.4s ease-in-out infinite;
  position: relative;
  isolation: isolate; /* cho pseudo elements tách lớp */
  will-change: transform, box-shadow, filter, background-position;
}

/* Hào quang mềm lan ra xung quanh (vòng mờ) */
.hero .btn-cta::before{
  content:"";
  position:absolute; inset:-3px; border-radius:inherit;
  background: radial-gradient(60% 120% at 50% 50%, rgba(79,151,230,.55), rgba(79,151,230,0) 70%);
  filter: blur(10px);
  opacity:.7; pointer-events:none; z-index:-1;
  animation: ctaAura 4.8s ease-in-out infinite;
}

/* Tia sáng lướt (shine sweep) */
.hero .btn-cta::after{
  content:"";
  position:absolute; top:14%; bottom:14%; left:-15%;
  width:46%;
  border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  mix-blend-mode: screen; filter: blur(2px);
  pointer-events:none;
  animation: ctaShine 5s ease-in-out infinite 1s;
}

/* ====== KEYFRAMES ====== */

/* Phập phồng mạnh hơn + nhích dọc rất nhẹ cho “sống” hơn */
@keyframes ctaPulseBig{
  0%, 100%{
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
    box-shadow:
      0 10px 28px rgba(47,134,214,.42),
      0 0 0 1px rgba(255,255,255,.18) inset;
  }
  25%{
    transform: translateY(-2px) scale(1.06);
  }
  50%{
    transform: translateY(-3px) scale(1.12); /* ← tăng độ phập phồng ở đây */
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
      0 16px 36px rgba(47,134,214,.55),
      0 0 0 1px rgba(255,255,255,.22) inset;
  }
  75%{
    transform: translateY(-1px) scale(1.04);
  }
}

/* Gradient di chuyển chậm để nền “sống” mà không rối */
@keyframes ctaGradientShift{
  0%, 100%{ background-position: 0% 50%; }
  50%{      background-position: 100% 50%; }
}

/* Nhịp sáng thở của viền trong + bóng */
@keyframes ctaGlow{
  0%,100%{ box-shadow: 0 10px 28px rgba(47,134,214,.42), 0 0 0 1px rgba(255,255,255,.18) inset; }
  50%{     box-shadow: 0 18px 36px rgba(47,134,214,.58), 0 0 0 1px rgba(255,255,255,.26) inset; }
}

/* Hào quang lan nhẹ */
@keyframes ctaAura{
  0%,100%{ transform: scale(1); opacity:.65; }
  50%{     transform: scale(1.08); opacity:.85; }
}


/* Hover: tăng độ nổi nhưng không “giật” */
.hero .btn-cta:hover{
  transform: translateY(-4px) scale(1.14);
  box-shadow: 0 22px 40px rgba(47,134,214,.60), 0 0 0 1px rgba(255,255,255,.28) inset;
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .hero .btn-cta{
    animation: none;
  }
  .hero .btn-cta::after,
  .hero .btn-cta::before{
    animation: none; opacity:.35;
  }
}

.hero-cta-mobile{ display:none; }

@media (max-width: 640px){
   header.hero .inner{ display: none !important; }  
  .hero-cta-mobile{
    display: block;
    padding: 12px 16px;
  }
  .hero-cta-mobile .btn-cta{
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 8px auto 0;
    font-size: 18px;
    padding: 14px 28px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(2,6,23,.16);
  }
}

/* === Nút Nhấn ngay nhận ưu đãi (style riêng, không ảnh hưởng btn khác) === */
.btn-uu-dai {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;

  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;

  color: #fff;
  background: linear-gradient(100deg, var(--brand), var(--brand-2), var(--brand-3));
  background-size: 220% 220%;
  border-radius: 999px;
  text-decoration: none;

  box-shadow: 0 10px 28px rgba(47,134,214,.42), 0 0 0 1px rgba(255,255,255,.18) inset;
  backdrop-filter: saturate(1.1) blur(2px);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);

  transition: transform .18s ease, box-shadow .18s ease, background-position .4s ease;
  animation: uuDaiPulse 2.8s ease-in-out infinite,
             uuDaiGradient 9s ease-in-out infinite;
}

.btn-uu-dai:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 36px rgba(47,134,214,.55);
}

/* Mobile: full ngang */
@media (max-width: 640px) {
  .btn-uu-dai {
    left: 10px;
    right: 10px;
    bottom: 14px;
    width: auto;
    max-width: 100%;
    justify-content: center;
    font-size: 16px;
  }
}

/* Hiệu ứng nhẹ cho nút */
@keyframes uuDaiPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes uuDaiGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* === NÚT ƯU ĐÃI: desktop luôn nổi (fixed), mobile ẩn hoặc đổi vị trí nếu muốn === */
.btn-uu-dai{
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;

  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;

  color: #fff;
  background: linear-gradient(100deg, var(--brand), var(--brand-2), var(--brand-3));
  background-size: 220% 220%;
  border-radius: 999px;
  text-decoration: none;

  box-shadow: 0 10px 28px rgba(47,134,214,.42), 0 0 0 1px rgba(255,255,255,.18) inset;
  backdrop-filter: saturate(1.1) blur(2px);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
  transition: transform .18s ease, box-shadow .18s ease, background-position .4s ease;
  animation: uuDaiPulse 2.8s ease-in-out infinite, uuDaiGradient 9s ease-in-out infinite;
}

/* Hover desktop */
.btn-uu-dai:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 36px rgba(47,134,214,.55);
}

/* Mobile: ẩn (hoặc bạn có thể để full-width tùy nhu cầu) */
/* PATCH: Desktop bỏ transform của .inner để phần tử fixed bên trong bám viewport */
@media (min-width: 641px){
  header.hero .inner{
    transform: none !important;
    left: auto !important;         /* không còn căn giữa bằng translateX */
  }
}


/* Hiệu ứng nhẹ */
@keyframes uuDaiPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes uuDaiGradient{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }


/* === Khung ảnh riêng cho section "Quyền kinh doanh" === */
.benefit-kinhdoanh .img-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* Ảnh bên trong khung, có thể đẩy lên/xuống bằng biến --shiftY */
.benefit-kinhdoanh .img-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;         /* bám trên cùng */
  transform: translateY(var(--shiftY, 0px));
  will-change: transform;
}