/* ==========================================================================
   Uviwash landing – hệ thiết kế
   Màu lấy từ ảnh sản phẩm: tím #5A4AE7 / #4836E6, cam logo #FF9804 / #F77300
   Nguyên tắc: 1 kiểu thẻ, 1 kiểu icon, 1 nhịp khoảng cách, nền tối giản
   ========================================================================== */

:root{
  --violet:#5a4ae7;
  --violet-dark:#4836e6;
  --violet-deep:#2f2296;
  --violet-tint:#eeecfd;
  --amber:#ff9804;
  --amber-dark:#f77300;
  /* bản cam dùng cho CHỮ trên nền sáng; cam tươi ở trên chỉ dành cho mảng nền */
  --amber-text:#a84400;
  --green:#00a84a;
  --red:#e5484d;

  /* thang chữ 3 bậc, cả ba đều đạt tối thiểu 4.5:1 trên nền thẻ kính */
  --ink:#191539;
  --ink-soft:#4d4874;
  --muted:#5f5b7a;
  --border:rgba(90,74,231,.13);
  --page-bg:oklch(97% 0.012 265);

  /* kính */
  --glass-bg:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.48));
  --glass-border:rgba(255,255,255,.85);
  --glass-blur:blur(22px) saturate(175%);
  --glass-shadow:0 10px 50px rgba(31,26,90,.12),inset 0 1px 0 rgba(255,255,255,.9);

  /* nhịp */
  --gap:20px;
  --padding:28px;
  --radius:22px;
  --radius-lg:30px;
  --container-width:1120px;
}

*,*::before,*::after{box-sizing:border-box}
/* 106.25% ≈ 17px, đúng cỡ chữ thân bài của iOS; dùng % thay cho px để vẫn tôn
   trọng cỡ chữ người dùng tự đặt trong trình duyệt */
html{font-size:106.25%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--page-bg);color:var(--ink);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:1rem;line-height:1.62;letter-spacing:-.004em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* <address> đánh dấu khối liên hệ cho công cụ tìm kiếm, bỏ chữ nghiêng mặc định */
address{font-style:normal}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0 0 .45em;line-height:1.22;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(1.95rem,3.8vw,2.9rem);font-weight:800}
h2{font-size:clamp(1.4rem,2.4vw,1.95rem)}
h3{font-size:1.02rem}
p{margin:0 0 .9rem}
ul,ol{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 20px}

/* thương hiệu – font Audiowide */
.logo-mark,.logo-word{font-family:'Audiowide',sans-serif;font-weight:400;letter-spacing:0}

/* nền: đặt trên phần tử bọc ngoài cùng – 4 quầng oklch (tím – cam – cyan – tím) */
.page{
  position:relative;
  overflow:hidden;
  overflow:clip;      /* clip không tạo scroll container ⇒ .header sticky vẫn chạy */
  min-height:100vh;
  background-color:var(--page-bg);
  /* neo theo viewport: trang cao ~8 màn, không neo thì 4 quầng bị kéo giãn ra
     hết chiều dài trang và màn đầu tiên gần như trắng trơn */
  background-attachment:fixed;
  background-image:
    radial-gradient(900px 620px at 10% 4%,   oklch(70% 0.16 278 / 0.30), transparent 62%),
    radial-gradient(1000px 720px at 94% 22%, oklch(76% 0.14 55 / 0.24),  transparent 64%),
    radial-gradient(900px 700px at 42% 62%,  oklch(74% 0.12 195 / 0.22), transparent 62%),
    radial-gradient(800px 600px at 80% 92%,  oklch(70% 0.16 278 / 0.22), transparent 62%);
}

/* ==========================================================================
   Kính & nút
   ========================================================================== */
.glass{
  position:relative;background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--glass-shadow);
  isolation:isolate;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 42%);
}

.button{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  gap:.45rem;padding:.82rem 1.6rem;border-radius:999px;font-size:.95rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s,background .2s;
}
.button::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent)}
.button:active{transform:scale(.975)}
.button-primary{background:linear-gradient(135deg,var(--violet-dark),var(--violet));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -10px rgba(90,74,231,.8)}
.button-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 30px -12px rgba(90,74,231,.9)}
.button-ghost{background:rgba(255,255,255,.8);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-border);color:var(--violet-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.button-ghost:hover{transform:translateY(-2px);background:#fff}
.button-white{background:#fff;color:var(--violet-deep)}
.button-white:hover{transform:translateY(-2px)}
/* nền sáng nên chữ phải chuyển sang tím đậm, giữ trắng thì không đọc được */
.button-outline{background:var(--violet-tint);color:var(--violet-deep)}
.button-outline:hover{background:#fff;transform:translateY(-2px)}
.button-full{width:100%}

.badge{
  display:inline-block;padding:.42rem 1.05rem;border-radius:999px;margin-bottom:1.2rem;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;
  color:var(--ink-soft);background:var(--violet-tint);border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px -10px rgba(47,34,150,.5);
}

/* icon: một kiểu duy nhất */
.icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  color:var(--violet);background:var(--violet-tint);border:1px solid rgba(90,74,231,.1);
}
.icon svg{width:21px;height:21px}

/* ==========================================================================
   Header
   ========================================================================== */
.header{position:sticky;top:0;z-index:60;padding:12px 0;transition:padding .3s}
.header.is-stuck{padding:8px 0}
.header-bar{display:flex;align-items:center;gap:1rem;padding:8px 20px 8px 25px;border-radius:999px}
.header.is-stuck .header-bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px -14px rgba(47,34,150,.5)}

.logo{display:flex;align-items:center;gap:.4rem;margin-right:auto;font-size:1.18rem}
.logo-mark{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;font-size:.95rem;line-height:1;padding-bottom:1px;
  background:linear-gradient(140deg,var(--amber),var(--amber-dark));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px rgba(247,115,0,.9);
}
.logo-word{color:var(--violet-deep);font-size:1.8rem;letter-spacing:.01em}

.nav-menu{display:flex;align-items:center;gap:.1rem}
.nav-menu a{padding:.48rem .8rem;border-radius:999px;font-size:1rem;font-weight:600;color:var(--ink-soft);transition:.2s}
.nav-menu a:hover{color:var(--violet-deep);background:rgba(255,255,255,.85)}
.nav-cta{background:linear-gradient(135deg,var(--violet-dark),var(--violet))!important;color:#fff!important;padding:.52rem 1.1rem!important;font-weight:600!important;margin-left:.3rem;box-shadow:0 8px 18px -9px rgba(90,74,231,.9)}
.nav-cta:hover{filter:brightness(1.08)}


.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.menu-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.28s}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
/* hero chiếm trọn màn hình đầu tiên và canh giữa theo chiều dọc
   ⇒ khi vừa vào trang, mắt không có gì khác để bám ngoài khối này */
.hero{
  position:relative;
  padding:32px 0 0;
  min-height:calc(100vh - 84px);
  min-height:calc(100svh - 84px);
  display:grid;
  align-content:center;
  align-content:safe center;   /* màn thấp: rơi về đầu thay vì tràn ngược lên trên */
}
/* quầng sáng trắng sau hero: nâng tương phản chữ, tạo tâm điểm thị giác */
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-15%;right:-15%;top:-12%;bottom:-6%;
  background:radial-gradient(58% 62% at 40% 44%,rgba(255,255,255,.45),transparent 72%);
}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
.hero-copy h1{margin-bottom:.5em}

/* trượt vào khi tải trang, lệch pha từng khối từ trên xuống */
@keyframes heroSlide{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}}
@keyframes heroSlideShot{from{opacity:0;transform:translate3d(40px,0,0) scale(.985)}to{opacity:1;transform:none}}
.hero-copy>*{animation:heroSlide .72s cubic-bezier(.2,.7,.3,1) both}
.hero-copy>*:nth-child(1){animation-delay:.06s}
.hero-copy>*:nth-child(2){animation-delay:.22s}
.hero-copy>*:nth-child(3){animation-delay:.33s}
.hero-copy>*:nth-child(4){animation-delay:.42s}
.hero-copy>*:nth-child(5){animation-delay:.51s}
.hero-screenshot{animation:heroSlideShot .92s cubic-bezier(.2,.7,.3,1) .24s both}

.lead{font-size:1.05rem;color:var(--ink-soft);max-width:34em}
.button-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0 .8rem}

.hero-screenshot{margin:0;padding:10px;border-radius:var(--radius-lg)}
.hero-screenshot img{border-radius:calc(var(--radius-lg) - 10px)}


/* ==========================================================================
   Khung section – tiêu đề trái, có số thứ tự
   ========================================================================== */
.section{padding:76px 0}
/* Không còn ô đánh dấu ở đầu section: tiêu đề thẳng lề với lưới nội dung bên dưới */
/* Tiêu đề dùng hết chiều ngang lưới; chỉ dòng mô tả mới giới hạn cho dễ đọc */
.section-head{margin:0 0 34px}
.section-head h2{margin-bottom:.3em}
.section-head p{margin:0;max-width:760px;color:var(--muted);font-size:.98rem}

/* danh sách dấu tick / dấu x */
.marker-list li{position:relative;padding-left:1.6rem;margin-bottom:.5rem;font-size:.95rem;color:var(--ink-soft)}
.marker-list li::before{position:absolute;left:0;top:0;font-weight:700}
.marker-list-check li::before{content:"✓";color:var(--green)}
.marker-list-cross li::before{content:"✕";color:var(--red)}
.marker-list-light li{color:rgba(255,255,255,.9)}
.marker-list-light li::before{color:#ffd08a}

/* ==========================================================================
   01 · So sánh trước / sau
   ========================================================================== */
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius);overflow:hidden;
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.comparison-column{padding:var(--padding)}
.comparison-column-after{background:linear-gradient(180deg,rgba(238,236,253,.75),rgba(238,236,253,.35));border-left:1px solid var(--border)}
.comparison-title{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.comparison-title-before{color:var(--ink-soft)}
.comparison-title-after{color:var(--violet-deep)}

/* ==========================================================================
   02 · Lưới tính năng
   ========================================================================== */
/* Ô nội dung có icon: icon bên trái, tiêu đề và mô tả xếp bên phải.
   Khai chung cho lưới tính năng và lưới lợi ích để hai khối luôn bố trí giống
   nhau, sửa một chỗ là cả hai cùng đổi.
   Dùng lưới 2 cột thay vì flex, nhờ vậy markup chỉ cần icon + h3 + p, không
   phải bọc thêm div quanh phần chữ. */
.feature-card,.benefit-item{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;
  /* align-content:start để thẻ thấp không bị chèn thêm khoảng trống giữa tiêu đề
     và mô tả khi bị kéo cao bằng thẻ cao nhất cùng hàng */
  align-content:start;
}
.feature-card .icon,.benefit-item .icon{grid-row:1/span 2}
.feature-card h3,.benefit-item h3{margin-bottom:.2rem}
.feature-card p,.benefit-item p{margin:0;font-size:.97rem;color:var(--muted)}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.feature-card{padding:var(--padding);transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s}
.feature-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 22px 40px -24px rgba(47,34,150,.6)}

/* ==========================================================================
   03 · Tab nghiệp vụ
   ========================================================================== */
.tab-bar{display:flex;gap:4px;padding:5px;border-radius:999px;margin-bottom:var(--gap);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab-button{
  border:0;background:none;cursor:pointer;white-space:nowrap;
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink-soft);
  padding:.55rem 1.15rem;border-radius:999px;transition:.25s;
}
.tab-button:hover{color:var(--violet-deep)}
.tab-button.is-active{background:linear-gradient(135deg,var(--violet-dark),var(--violet));color:#fff;box-shadow:0 8px 18px -10px rgba(90,74,231,.9)}

.tab-panel{display:grid;grid-template-columns:1fr 1.12fr;gap:36px;align-items:center;animation:fadeIn .35s ease}
.tab-panel[hidden]{display:none}
.tab-panel h3{font-size:1.3rem;margin-bottom:.6rem}
.tab-panel p{color:var(--ink-soft);font-size:.97rem}
.tab-panel-label{font-size:.87rem;color:var(--muted);margin-bottom:.5rem}
.tab-panel-media{margin:0;padding:10px;border-radius:var(--radius-lg)}
.tab-panel-media img{border-radius:calc(var(--radius-lg) - 10px);cursor:zoom-in}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.chip-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.chip{padding:.28rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--violet-deep);background:var(--violet-tint);border:1px solid rgba(90,74,231,.14)}
.chip-warning{color:var(--amber-text);background:rgba(255,152,4,.12);border-color:rgba(247,115,0,.2)}

/* ==========================================================================
   04 · Lợi ích – một tấm, chia ô
   ========================================================================== */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.benefit-item{padding:var(--padding);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.benefit-item:nth-child(3n){border-right:0}
.benefit-item:nth-child(n+4){border-bottom:0}

/* ==========================================================================
   05 · Băng nền tảng
   ========================================================================== */
/* băng này nằm ngay dưới khối hero nên cần khoảng thở với cụm chữ phía trên */
.platform-band{border-radius:var(--radius-lg);padding:56px 40px;text-align:center;margin-top:56px}
.platform-band h2{margin-bottom:.5em}
.platform-band>p{margin:0 auto;max-width:46rem;color:var(--muted);font-size:.96rem}

/* hàng nền tảng: viên thuốc trắng, chấm màu chạy vòng tím → xanh → cam */
.platform-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:28px 0 0}
.platform-list li{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1.05rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.86);border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -12px rgba(47,34,150,.6);
}
.platform-list li::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--violet)}
.platform-list li:nth-child(3n+2)::before{background:oklch(72% 0.13 195)}
.platform-list li:nth-child(3n)::before{background:var(--amber)}

/* Khối tải app: viền đứt + nhãn "Sắp có" để thấy ngay là chưa bấm được.
   Khi có link store thật thì đổi sang thẻ <a> và bỏ nhãn. */
.app-download{margin-top:30px;padding-top:26px;border-top:1px solid var(--border)}
.app-download-note{margin:0 auto 16px;max-width:34rem;font-size:.9rem;color:var(--muted)}
.app-store-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.app-store-item{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.9rem;text-align:left;
  padding:.7rem 1rem;border-radius:14px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px -14px rgba(47,34,150,.7);
}
/* vệt sáng nửa trên, cùng cách làm với .button để bề mặt trông như gương */
.app-store-item::after{
  content:"";position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
}
.app-store-name,.app-store-tag{position:relative;z-index:1}
.app-store-name{display:flex;flex-direction:column;font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.3}
.app-store-name small{font-size:.79rem;font-weight:400;color:var(--ink-soft)}
.app-store-tag{
  flex:none;padding:.26rem .7rem;border-radius:999px;
  font-size:.8rem;font-weight:700;
  color:#fff;background:var(--green);border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -6px rgba(0,168,74,.9);
}
/* chỉ mục tải được thật mới nhấc lên khi rê chuột, mục chờ phát hành thì không */
a.app-store-item{text-decoration:none;transition:transform .25s,box-shadow .25s}
a.app-store-item:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 14px 26px -16px rgba(47,34,150,.75)}
.app-download-hint{margin:14px auto 0;max-width:34rem;font-size:.82rem;color:var(--muted)}

/* ==========================================================================
   06 · Hai khối: đối tượng + triển khai
   ========================================================================== */
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.two-column-form{grid-template-columns:1.4fr .6fr}
.info-panel{padding:var(--padding)}
.info-panel-title{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}

.audience-list li{padding:.75rem 0;border-top:1px solid var(--border)}
.audience-list li:first-child{border-top:0;padding-top:0}
.audience-list b{display:block;font-size:.97rem}
.audience-list span{font-size:.89rem;color:var(--muted)}

.step-list{counter-reset:s}
.step-list li{position:relative;counter-increment:s;padding:.75rem 0 .75rem 40px;border-top:1px solid var(--border)}
.step-list li:first-child{border-top:0;padding-top:0}
.step-list li::before{
  content:counter(s);position:absolute;left:0;top:.7rem;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;
  /* dùng đúng nền và viền của .icon để ô số trông cùng một họ với ô icon */
  color:var(--violet);background:var(--violet-tint);border:1px solid rgba(90,74,231,.1);
}
.step-list li:first-child::before{top:0}
.step-list b{display:block;font-size:.97rem}
.step-list span{font-size:.89rem;color:var(--muted)}

/* ==========================================================================
   07 · CTA
   ========================================================================== */
.cta-panel{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:44px 40px;color:#fff;
  display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,#241a7d,#5a4ae7 58%,#8a52f0);
  box-shadow:0 26px 56px -28px rgba(47,34,150,.85)}
.cta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 4% 0%,rgba(255,255,255,.26),transparent 70%),radial-gradient(40% 70% at 98% 96%,rgba(255,152,4,.4),transparent 70%)}
.cta-text,.cta-actions{position:relative}
.cta-panel h2{color:#fff}
.cta-panel p{color:rgba(255,255,255,.82);max-width:44em}
.cta-actions{display:grid;gap:.6rem}

/* ==========================================================================
   08 · FAQ
   ========================================================================== */
.faq-list{display:grid;gap:10px;max-width:820px}
.faq-item{border-radius:var(--radius)}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 52px 16px 22px;font-size:.97rem;font-weight:600;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:var(--violet-tint);border:1px solid rgba(90,74,231,.14);
}
.faq-item summary::after{
  content:"+";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;
  display:grid;place-items:center;color:var(--violet);font-size:1rem;font-weight:600;line-height:1;transition:transform .28s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open] summary{color:var(--violet-deep)}
.faq-answer{padding:0 22px 18px;font-size:.97rem;color:var(--ink-soft)}
.faq-answer a{color:var(--violet);font-weight:600}

/* ==========================================================================
   09 · Form liên hệ
   ========================================================================== */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:var(--padding)}
.field{display:flex;flex-direction:column;gap:.3rem}
.field-full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.field label i{color:var(--red);font-style:normal}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.94rem;color:var(--ink);width:100%;
  padding:.72rem .9rem;border-radius:13px;
  border:1px solid rgba(90,74,231,.16);background:rgba(255,255,255,.75);
  transition:.2s;
}
.field input::placeholder,.field textarea::placeholder{color:#a9a5c4}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--violet);box-shadow:0 0 0 3px rgba(90,74,231,.14)}
.field input.is-invalid,.field textarea.is-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.13)}
.field textarea{resize:vertical}
.contact-form-note{margin:.8rem 0 0;font-size:.89rem;font-weight:600;text-align:center}
.contact-form-note.is-success{color:var(--green)}
.contact-form-note.is-error{color:var(--red)}

.contact-list li{padding:.7rem 0;border-top:1px solid var(--border)}
.contact-list li:first-child{border-top:0;padding-top:0}
.contact-list small{display:block;font-size:.8rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.contact-list a{font-weight:600;color:var(--violet-deep);word-break:break-word}
.contact-list a:hover{color:var(--violet)}
.contact-list span{font-size:.89rem;color:var(--muted)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{padding:10px 0 30px}
.footer-card{padding:38px 36px 22px;border-radius:var(--radius-lg)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:26px}
.footer-brand p{margin-top:.8rem;font-size:.89rem;color:var(--muted);max-width:24em}
.footer-column{display:flex;flex-direction:column;gap:.4rem}
.footer-column b{margin-bottom:.2rem;font-size:.95rem}
.footer-column a,.footer-column span{font-size:.88rem;color:var(--ink-soft)}
.footer-column a:hover{color:var(--violet)}
.footer-column span{color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:28px;padding-top:16px;border-top:1px solid var(--border);font-size:.82rem;color:var(--muted)}
/* tên thương hiệu tách khỏi câu mô tả bằng độ đậm và màu; mũi tên chỉ là dấu
   dẫn nên để mảnh và nhạt hơn cả hai vế, tránh thành nét nặng nhất của dòng */
.footer-bottom b{margin-right:.5em;font-weight:600;color:var(--ink-soft)}
.footer-bottom b::after{
  content:"";display:inline-block;width:.72em;height:.77em;margin-left:.5em;vertical-align:-.06em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 16' fill='none' stroke='%237d78a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l5 6-5 6M8 2l5 6-5 6'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.7;
}

/* ==========================================================================
   FAB + lightbox
   ========================================================================== */
.float-actions{position:fixed;right:16px;bottom:16px;z-index:70;display:grid;gap:9px}
.float-action{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -10px rgba(25,21,57,.7)}
.float-action svg{width:21px;height:21px}
.float-action:hover{transform:scale(1.08)}
.float-action-call{background:linear-gradient(140deg,#0fae57,#00c95c)}
.float-action-chat{background:linear-gradient(140deg,var(--violet-dark),var(--violet))}

.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;cursor:zoom-out;
  background:rgba(25,21,57,.55);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,94vw);max-height:88vh;border-radius:var(--radius);border:1px solid rgba(255,255,255,.3);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lightbox-close{position:absolute;top:16px;right:20px;width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.6rem;line-height:1;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox-close:hover{background:rgba(255,255,255,.28)}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .tab-panel{animation:none}
  .hero-copy>*,.hero-screenshot{animation:none}
  html{scroll-behavior:auto}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.comparison{background:rgba(255,255,255,.94)}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .feature-grid,.benefit-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-item:nth-child(3n){border-right:1px solid var(--border)}
  .benefit-item:nth-child(2n){border-right:0}
  .benefit-item:nth-child(n+4){border-bottom:1px solid var(--border)}
  .benefit-item:nth-child(n+5){border-bottom:0}
  .tab-panel{grid-template-columns:1fr;gap:24px}
  .tab-panel-media{order:-1}
  .two-column,.two-column-form,.cta-panel{grid-template-columns:1fr}
  .cta-panel{gap:28px}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1/-1}
  .section{padding:60px 0}
}

@media (max-width:880px){
  .menu-toggle{display:flex}
  .nav-menu{
    position:absolute;left:0;right:0;top:calc(100% + 10px);flex-direction:column;align-items:stretch;
    gap:.1rem;padding:12px;border-radius:var(--radius);
    background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(255,255,255,.93));
    -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
    border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);
    transition:opacity .28s,transform .32s cubic-bezier(.2,.9,.3,1.2),visibility .28s;
  }
  .nav-menu.is-open{opacity:1;visibility:visible;transform:none}
  .nav-menu a{padding:.72rem 1rem;font-size:.96rem}
  .nav-cta{text-align:center;margin:.45rem 0 0}
  /* mobile: bỏ ép full màn, tránh khối hero bị kéo dài lê thê */
  .hero{min-height:0;padding:20px 0 0}
  /* iOS Safari không neo nền đúng, bỏ fixed để khỏi giật khi cuộn */
  .page{background-attachment:scroll}
  .hero::before{left:-30%;right:-30%}
  .platform-band,.cta-panel{padding:34px 26px}
  .platform-band{margin-top:34px}
}

@media (max-width:620px){
  .feature-grid,.benefit-grid,.comparison,.contact-form{grid-template-columns:1fr}
  .benefit-item{border-right:0!important;border-bottom:1px solid var(--border)!important}
  .benefit-item:last-child{border-bottom:0!important}
  .comparison-column-after{border-left:0;border-top:1px solid var(--border)}
  .section{padding:48px 0}
  .section-head{margin-bottom:26px}
  .hero{padding:32px 0 0}
  .button-row{flex-direction:column}
  .button{width:100%}
  .tab-bar{width:100%;justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .footer-card{padding:28px 22px 18px}
  .footer-bottom{flex-direction:column}
  .info-panel,.feature-card,.benefit-item,.comparison-column,.contact-form{padding:22px}
  .platform-band,.cta-panel{padding:28px 22px}
}

/* ==========================================================================
   VĂN BẢN PHÁP LÝ (chính sách bảo mật)
   Trang chữ dài: dùng lại thẻ kính và nhịp khoảng cách chung, chỉ thêm phần
   sắp chữ cho nội dung đọc liền mạch.
   ========================================================================== */
.legal{padding:120px 0 76px}
.legal-head{margin-bottom:var(--gap)}
.legal-head h1{margin:.6rem 0 .8rem}
.legal-meta{font-size:.86rem;color:var(--muted)}

/* Không giới hạn bề ngang: thẻ nội dung thẳng lề với thanh menu và các section */
.legal-body h2{
  font-size:1.12rem;margin:2.1rem 0 .7rem;padding-top:1.4rem;
  border-top:1px solid var(--border);color:var(--violet-deep);
}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body p{margin:0 0 .85rem;color:var(--ink-soft);line-height:1.75}
.legal-body a{color:var(--violet);font-weight:600}

.legal-list{margin:0 0 .85rem;padding-left:1.15rem;color:var(--ink-soft);line-height:1.75}
.legal-list li{margin-bottom:.55rem}
.legal-list b{color:var(--ink)}

/* Bảng dữ liệu thu thập: cuộn ngang trên máy hẹp thay vì ép chữ vỡ dòng */
.legal-table{overflow-x:auto;margin:0 0 1rem}
.legal-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:.97rem}
.legal-table th{
  text-align:left;padding:.7rem .8rem;background:var(--violet-tint);
  color:var(--violet-deep);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
}
.legal-table th:first-child{border-radius:10px 0 0 10px}
.legal-table th:last-child{border-radius:0 10px 10px 0}
.legal-table td{padding:.85rem .8rem;border-top:1px solid var(--border);color:var(--ink-soft);vertical-align:top}
.legal-table td b{color:var(--ink)}
.legal-table td span{display:block;margin-top:.2rem;font-size:.86rem;color:var(--muted)}

.legal-back{margin-top:var(--gap)}

@media(max-width:760px){
  .legal{padding:96px 0 48px}
  .legal-body h2{margin-top:1.7rem}
}

/* Máy hẹp: bảng 2 cột xếp chồng thành từng khối. Cuộn ngang làm cột phải nằm
   ngoài khung nhìn nên nội dung trông như bị cắt mất. */
@media(max-width:680px){
  .legal-table{overflow-x:visible}
  .legal-table table{min-width:0}
  .legal-table thead{display:none}
  .legal-table tr{display:block;padding:.9rem 0;border-top:1px solid var(--border)}
  .legal-table tbody tr:first-child{border-top:0;padding-top:0}
  .legal-table td{display:block;padding:0;border-top:0}
  .legal-table td+td{margin-top:.55rem}
  .legal-table td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:.15rem;
    color:var(--violet-deep);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
}