/* ═══════════════════════════════════════════════════════════════════════════
   LineProTrack — Landing page
   CSS thuần, không framework. Lý do: CSP của backend là `default-src 'self'`,
   mọi CDN (kể cả cdn.tailwindcss.com) đều bị chặn — và khách ở Trung Quốc
   cũng không tải được CDN nước ngoài. Toàn bộ style nằm trong file này.

   Bảng màu bám theo app (--accent #0969da / #388bfd) nhưng chuyển sang nền
   sáng cho trang bán hàng: nền sáng = chuẩn SaaS B2B (Microsoft, AWS, Asana),
   mockup để nền tối để phần ảnh sản phẩm bật lên.

   ─── MỤC LỤC ──────────────────────────────────────────────────────────────
    1. Tokens (màu / chữ / bo góc / bóng)     10. Core Features — Planner+Viewer
    2. Reset                                  11. Solutions — theo mô hình vận hành
    3. Nút                                    12. How it works — 3 bước
    4. Header                                 13. Pricing band + CTA cuối trang
    5. Hero                                   14. Footer
    6. Mockup sản phẩm                        15. Hiệu ứng
    7. Dải số liệu hero                       16. Responsive
    8. Khung section dùng chung               17. Giảm chuyển động
    9. Trusted by — dải logo
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* Mực & nền */
  --ink:      #0b1220;
  --ink-2:    #475467;
  --ink-3:    #737f95;
  --surface:  #ffffff;
  --surface-2:#f6f8fb;
  --surface-3:#eef2f7;
  --line:     #e3e8ef;
  --line-2:   #eef1f6;

  /* Thương hiệu */
  --brand:    #0969da;
  --brand-h:  #0a5cbf;
  --brand-d:  #073b8f;
  --brand-w:  #e8f1fd;   /* wash */
  --cyan:     #0aa2c0;
  --cyan-w:   #e2f5f8;

  /* Trạng thái (đồng bộ với app) */
  --ok:#1a7f37; --warn:#b45309; --bad:#cf222e;

  /* Nền tối — dùng cho mockup và banner CTA */
  --dark-0:#0d1117; --dark-1:#161b22; --dark-2:#21262d; --dark-t:#8b949e;

  /* Hình khối */
  --r-sm:8px; --r:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 4px 14px -4px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --sh-3: 0 24px 48px -12px rgba(16,24,40,.18);
  --sh-4: 0 40px 90px -20px rgba(11,18,32,.35);

  /* Chữ */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Outfit', var(--font);
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --wrap: 1200px;
  --hdr-h: 72px;
}

/* ── 2. Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip (KHÔNG phải hidden) — hidden trên html/body biến phần tử đó thành
   scroll container và header position:sticky sẽ trôi theo trang thay vì dính đỉnh. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;
     scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.ic{width:20px; height:20px; flex:none}

.skip-link{
  position:absolute; left:16px; top:-64px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r);
  transition:top .2s;
}
.skip-link:focus{top:16px}

/* ── 3. Nút ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:var(--r);
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.btn .ic{width:18px; height:18px}

.btn--primary{
  background:var(--brand); color:#fff;
  box-shadow:0 1px 2px rgba(9,105,218,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--primary:hover{background:var(--brand-h); box-shadow:0 6px 18px -4px rgba(9,105,218,.45); transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-2); border-color:#d3dae5}

.btn--outline{background:var(--surface); color:var(--ink); border-color:#d3dae5; box-shadow:var(--sh-1)}
.btn--outline:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}

/* Hai biến thể dùng trên nền tối (banner CTA) */
.btn--white{background:#fff; color:var(--ink)}
.btn--white:hover{background:#eaf1fa; transform:translateY(-1px); box-shadow:0 12px 28px -12px rgba(0,0,0,.65)}
.btn--onDark{color:#fff; border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.04)}
.btn--onDark:hover{border-color:rgba(255,255,255,.60); background:rgba(255,255,255,.10); transform:translateY(-1px)}

.btn--lg{height:52px; padding:0 26px; font-size:16px; border-radius:12px}
.btn--block{width:100%; height:46px}

/* ── 4. Header ───────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.hdr.is-scrolled{background:rgba(255,255,255,.9); border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(16,24,40,.05)}
.hdr__inner{height:var(--hdr-h); display:flex; align-items:center; gap:28px}

.logo{display:flex; align-items:center; gap:10px; flex:none}
.logo__mark{width:32px; height:32px; border-radius:9px; box-shadow:0 3px 10px -2px rgba(9,105,218,.5)}
.logo__mark svg{width:100%; height:100%}
.logo__word{
  font-family:var(--display); font-weight:700; font-size:20px;
  letter-spacing:-.028em; color:var(--ink);
}

.nav{display:flex; align-items:center; gap:4px; margin-right:auto}
.nav__link{
  position:relative; padding:8px 14px; border-radius:8px;
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  transition:color .18s, background .18s;
}
.nav__link:hover{color:var(--ink); background:var(--surface-2)}
.nav__mobile-actions{display:none}

.hdr__actions{display:flex; align-items:center; gap:10px; flex:none}

/* Bộ chọn ngôn ngữ */
.lang{position:relative}
.lang__btn{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 10px;
  border-radius:var(--r); font-size:14px; font-weight:500; color:var(--ink-2);
  transition:background .18s, color .18s;
}
.lang__btn:hover{background:var(--surface-2); color:var(--ink)}
.lang__btn .ic{width:17px; height:17px}
.lang__btn .ic--chev{width:15px; transition:transform .2s}
.lang.is-open .ic--chev{transform:rotate(180deg)}
.lang__menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:168px; padding:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.lang.is-open .lang__menu{opacity:1; visibility:visible; transform:translateY(0)}
.lang__menu button{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px;
  font-size:14px; color:var(--ink-2);
}
.lang__menu button:hover{background:var(--surface-2); color:var(--ink)}
.lang__menu button[aria-current="true"]{color:var(--brand); font-weight:600; background:var(--brand-w)}

/* Nút hamburger */
.burger{display:none; width:42px; height:42px; border-radius:var(--r); flex-direction:column;
        align-items:center; justify-content:center; gap:5px; border:1px solid var(--line)}
.burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
             transition:transform .25s, opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── 5. Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative; padding:76px 0 96px; overflow:hidden}
.hero__inner{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center}

.hero__bg{position:absolute; inset:0; pointer-events:none}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(16,24,40,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,24,40,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 60% at 50% 0%, #000 25%, transparent 78%);
          mask-image:radial-gradient(ellipse 78% 60% at 50% 0%, #000 25%, transparent 78%);
}
.hero__glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.hero__glow--a{width:620px; height:420px; top:-180px; left:50%; transform:translateX(-62%);
               background:radial-gradient(circle, rgba(9,105,218,.30), transparent 68%)}
.hero__glow--b{width:520px; height:380px; top:-60px; right:-120px;
               background:radial-gradient(circle, rgba(10,162,192,.22), transparent 68%)}

/* Pill thông báo */
.pill{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  height:36px; padding:0 6px; margin-bottom:28px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--sh-2); font-size:13.5px; color:var(--ink-2);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.pill:hover{border-color:#cfe0f7; box-shadow:0 8px 22px -8px rgba(9,105,218,.3); transform:translateY(-1px)}
.pill__tag{
  padding:3px 9px; border-radius:999px; background:var(--brand-w); color:var(--brand);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.pill__txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill .ic{width:16px; height:16px; margin-right:8px; color:var(--ink-3)}

.hero__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(36px, 6.2vw, 68px); line-height:1.06; letter-spacing:-.035em;
  max-width:min(940px,100%); margin-bottom:22px;
}
.grad{
  background:linear-gradient(96deg, var(--brand) 0%, #2b7cf6 42%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  max-width:62ch; font-size:clamp(16px, 1.35vw, 18.5px); line-height:1.62; color:var(--ink-2);
}
.hero__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px}
.hero__note{margin-top:18px; font-size:13.5px; color:var(--ink-3)}
.hero__note .dot{color:#c3ccda; margin:0 2px}

/* ── 6. Mockup sản phẩm ──────────────────────────────────────────────────── */
.shot{position:relative; width:100%; max-width:1080px; margin-top:64px}
.shot__frame{
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--dark-0); border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--sh-4), 0 0 0 1px rgba(16,24,40,.06), 0 0 0 10px rgba(16,24,40,.025);
}
.shot__chrome{
  display:flex; align-items:center; gap:7px; height:44px; padding:0 16px;
  background:var(--dark-1); border-bottom:1px solid var(--dark-2);
}
.shot__dot{width:11px; height:11px; border-radius:50%; background:var(--c)}
.shot__url{
  display:flex; align-items:center; gap:7px; margin:0 auto;
  height:26px; padding:0 14px; border-radius:999px;
  background:var(--dark-0); border:1px solid var(--dark-2);
  font-size:11.5px; color:var(--dark-t); font-family:var(--mono);
}
.shot__url .ic{width:13px; height:13px; color:#3fb950}

/* Bố cục app trong mockup */
.ui{display:grid; grid-template-columns:198px 1fr; min-height:452px; text-align:left}
.ui > *{min-width:0}
.ui__side{padding:16px 12px; background:#10151d; border-right:1px solid var(--dark-2); display:flex; flex-direction:column}
.ui__brand{display:flex; align-items:center; gap:8px; padding:4px 8px 16px;
           font-family:var(--display); font-weight:600; font-size:14px; color:#e6edf3; letter-spacing:-.02em}
.ui__brand i{width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,#2b7cf6,#0b4fd1); flex:none}
.ui__nav{display:flex; flex-direction:column; gap:2px}
.ui__nav span{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px;
              font-size:12.5px; color:var(--dark-t)}
.ui__nav .sq{width:13px; height:13px; border-radius:4px; border:1.5px solid currentColor; opacity:.55; flex:none}
.ui__nav .on{background:rgba(56,139,253,.13); color:#79b8ff; font-weight:500}
.ui__nav .on .sq{opacity:1; background:rgba(56,139,253,.35)}
.ui__side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--dark-2)}
.ui__role{display:inline-block; padding:4px 9px; border-radius:999px;
          background:rgba(163,113,247,.14); color:#c8a6ff; font-size:11px; font-weight:600}

.ui__main{padding:18px 20px 22px; display:flex; flex-direction:column; gap:16px}
.ui__top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ui__h1{font-family:var(--display); font-weight:600; font-size:16px; color:#e6edf3; letter-spacing:-.02em}
.ui__crumb{font-size:11.5px; color:#6e7681; margin-top:3px}
.ui__chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid}
.chip--ok  {background:rgba(63,185,80,.10);  color:#56d364; border-color:rgba(63,185,80,.28)}
.chip--warn{background:rgba(210,153,34,.10); color:#e3b341; border-color:rgba(210,153,34,.28)}
.chip--bad {background:rgba(248,81,73,.10);  color:#ff7b72; border-color:rgba(248,81,73,.28)}

.ui__kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.kpi{position:relative; padding:11px 13px 13px; border-radius:10px; background:var(--dark-1); border:1px solid var(--dark-2); overflow:hidden}
.kpi b{display:block; font-family:var(--display); font-size:19px; font-weight:600; color:#e6edf3; letter-spacing:-.02em}
.kpi span{display:block; font-size:10.5px; color:#6e7681; margin-top:1px}
.kpi .spark{
  position:absolute; left:0; right:0; bottom:0; height:22px;
  background:linear-gradient(to top, rgba(56,139,253,.22), transparent);
  clip-path:polygon(0 70%, 16% 52%, 32% 62%, 48% 34%, 64% 46%, 80% 22%, 100% 30%, 100% 100%, 0 100%);
}
.kpi .spark--2{clip-path:polygon(0 60%, 18% 66%, 36% 40%, 52% 50%, 70% 28%, 86% 38%, 100% 20%, 100% 100%, 0 100%)}
.kpi .spark--3{clip-path:polygon(0 34%, 20% 46%, 38% 30%, 56% 58%, 74% 44%, 90% 56%, 100% 42%, 100% 100%, 0 100%)}
.kpi .spark--4{clip-path:polygon(0 72%, 22% 58%, 40% 66%, 58% 40%, 76% 52%, 92% 30%, 100% 38%, 100% 100%, 0 100%)}

/* Gantt */
.gantt{position:relative; padding:12px 14px 14px; border-radius:12px; background:var(--dark-1); border:1px solid var(--dark-2); flex:1}
.gantt__head{display:grid; grid-template-columns:132px 1fr; align-items:center; gap:12px;
             padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--dark-2);
             font-size:10.5px; color:#6e7681; text-transform:uppercase; letter-spacing:.07em}
.gantt__days{display:grid; grid-template-columns:repeat(7,1fr)}
.gantt__days em{font-style:normal; text-align:center}
.row{display:grid; grid-template-columns:132px 1fr; align-items:center; gap:12px; padding:5px 0}
.row__id{font-size:11.5px; color:#adbac7; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row__id small{display:block; font-family:var(--font); font-size:10px; color:#6e7681; letter-spacing:0}
.row__track{
  position:relative; height:24px; border-radius:6px;
  background:repeating-linear-gradient(to right, var(--dark-2) 0 1px, transparent 1px calc(100%/7));
  background-color:#0f141b;
}
.bar{
  position:absolute; top:3px; left:var(--s); width:var(--w); height:18px;
  display:flex; align-items:center; padding:0 8px; border-radius:5px;
  font-style:normal; font-size:10px; font-weight:500; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform-origin:left center; animation:barIn .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(600ms + var(--s) * 2);
}
.bar--ok  {background:linear-gradient(90deg,#2ea043,#3fb950)}
.bar--warn{background:linear-gradient(90deg,#bb8009,#d29922)}
.bar--bad {background:linear-gradient(90deg,#da3633,#f85149); box-shadow:0 0 0 1px rgba(248,81,73,.35), 0 4px 14px -4px rgba(248,81,73,.6)}
.bar--idle{background:var(--dark-2); color:var(--dark-t); border:1px dashed #30363d}
@keyframes barIn{from{transform:scaleX(.2); opacity:0} to{transform:scaleX(1); opacity:1}}

.gantt__now{position:absolute; top:34px; bottom:12px; left:calc(132px + 12px + 46%); width:1px;
            background:linear-gradient(to bottom, rgba(88,166,255,.9), rgba(88,166,255,.05))}
.gantt__now span{position:absolute; top:-16px; left:50%; transform:translateX(-50%);
                 padding:1px 6px; border-radius:4px; background:#1f6feb; color:#fff;
                 font-size:9px; font-weight:600; letter-spacing:.04em}

/* Thẻ nổi quanh mockup */
.float{
  position:absolute; display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:var(--r-md);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); box-shadow:var(--sh-3);
  text-align:left; animation:floaty 6s ease-in-out infinite;
}
.float b{display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.float span{display:block; font-size:11.5px; color:var(--ink-3)}
.float__ic{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; flex:none}
.float__ic svg{width:19px; height:19px}
.float__ic--bad{background:#fde8e8; color:var(--bad)}
.float__ic--ok{background:#e4f6e9; color:var(--ok)}
.float--alert{left:-28px; bottom:33%; animation-delay:-1s}
.float--ok{right:-26px; bottom:6%}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}

/* ── 7. Dải số liệu hero ─────────────────────────────────────────────────── */
.hero__stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 56px;
  margin-top:60px; padding-top:34px; border-top:1px solid var(--line-2); width:100%;
}
.hero__stats li{text-align:center}
.hero__stats b{display:block; font-family:var(--display); font-size:22px; font-weight:600;
               letter-spacing:-.025em; color:var(--ink)}
.hero__stats span{font-size:13.5px; color:var(--ink-3)}

/* ── 8. Khung section dùng chung ─────────────────────────────────────────── */
.sec{padding:100px 0}
.sec--tint{background:var(--surface-2); border-block:1px solid var(--line-2)}
.sec__head{max-width:760px; margin:0 auto 60px; text-align:center}
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
}
.sec__title{
  font-family:var(--display); font-weight:700; margin-top:14px;
  font-size:clamp(28px, 3.5vw, 43px); line-height:1.12; letter-spacing:-.032em;
}
.sec__sub{margin-top:18px; font-size:17px; line-height:1.6; color:var(--ink-2)}

/* ── 9. Trusted by — dải logo ────────────────────────────────────────────── */
.trusted{padding:52px 0 12px}
.trusted__label{
  text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:var(--ink-3);
}
.trusted__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:20px 52px; margin-top:30px;
}
.brand{
  display:flex; align-items:center; gap:9px; color:#93a0b4;
  filter:grayscale(1); opacity:.78;
  transition:opacity .22s, color .22s, filter .22s, transform .22s;
}
.brand:hover{opacity:1; color:var(--ink-2); filter:none; transform:translateY(-1px)}
.brand svg{width:23px; height:23px}
.brand b{
  font-family:var(--display); font-size:16px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}

/* ── 10. Core Features — Planner / Viewer ────────────────────────────────── */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:24px}

.card{
  position:relative; display:flex; flex-direction:column;
  padding:32px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-3); border-color:#d5dfeb}
/* Vệt màu mảnh ở mép trên để phân biệt hai phân hệ */
.card::before{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--accentC);
}
.card--planner{--accentC:linear-gradient(90deg,var(--brand),#2b7cf6)}
.card--viewer {--accentC:linear-gradient(90deg,var(--cyan),#3fb9a8)}

.card__top{display:flex; align-items:center; gap:14px}
.card__ic{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; flex:none}
.card__ic svg{width:24px; height:24px}
.card--planner .card__ic{background:var(--brand-w); color:var(--brand)}
.card--viewer  .card__ic{background:var(--cyan-w);  color:#07829a}
.card__tag{font-size:11.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3)}
.card__h{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.025em; line-height:1.15}
.card__lead{margin-top:14px; font-size:16px; color:var(--ink-2)}

.flist{margin-top:22px; display:grid; gap:13px}
.flist li{display:flex; gap:11px; font-size:15px; line-height:1.55; color:var(--ink-2)}
.flist svg{width:19px; height:19px; margin-top:2px; flex:none}
.card--planner .flist svg{color:var(--brand)}
.card--viewer  .flist svg{color:#07829a}
.flist b{color:var(--ink); font-weight:600}

/* Mini-mockup trong mỗi thẻ — vẫn dùng bảng màu tối của app */
.mini{
  padding:14px; border-radius:var(--r-md);
  background:var(--dark-0); border:1px solid var(--dark-2);
}
/* margin-top:auto đẩy mini xuống đáy thẻ, để hai thẻ Planner/Viewer
   luôn thẳng hàng dù danh sách gạch đầu dòng dài ngắn khác nhau */
.mini__wrap{margin-top:auto; padding-top:26px}
.mini__cap{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#6e7681; margin-bottom:11px}

/* Planner: so sánh hai kịch bản trước khi chốt */
.scen{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.scen__col{padding:11px; border-radius:10px; background:var(--dark-1); border:1px solid var(--dark-2)}
.scen__col.is-pick{border-color:rgba(63,185,80,.45); box-shadow:0 0 0 1px rgba(63,185,80,.18)}
/* min-height giữ hai cột kịch bản thẳng hàng khi một bên có nhãn xuống dòng */
.scen__t{display:flex; align-items:flex-start; justify-content:space-between; gap:6px;
         min-height:2.6em; font-size:11px; line-height:1.3; color:var(--dark-t)}
.scen__t em{font-style:normal; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px;
            background:rgba(63,185,80,.15); color:#56d364}
.scen__v{margin-top:5px; font-family:var(--display); font-size:20px; font-weight:600; color:#e6edf3; letter-spacing:-.02em}
.scen__b{display:flex; gap:3px; margin-top:9px}
.scen__b i{height:5px; flex:1; border-radius:3px; background:var(--dark-2)}
.scen__b i.f--ok{background:#3fb950}
.scen__b i.f--warn{background:#d29922}
.scen__b i.f--bad{background:#f85149}

/* Viewer: danh sách tiến độ thời gian thực */
.plist{display:grid; gap:10px}
.plist__r{display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:10px}
.plist__id{font-family:var(--mono); font-size:11px; color:#adbac7}
.plist__bar{height:7px; border-radius:4px; background:var(--dark-2); overflow:hidden}
.plist__bar i{display:block; height:100%; width:var(--p); border-radius:4px; background:#3fb950}
.plist__r.is-warn .plist__bar i{background:#d29922}
.plist__r.is-bad  .plist__bar i{background:#f85149}
.plist__v{font-family:var(--mono); font-size:10.5px; color:#6e7681}

/* Dải 4 điểm kỹ thuật đỡ lưng cho hai phân hệ */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px}
.strip__i{
  padding:22px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line-2);
  transition:background .2s, border-color .2s;
}
.strip__i:hover{background:var(--surface); border-color:var(--line)}
.strip__i svg{width:22px; height:22px; color:var(--brand)}
.strip__i b{display:block; margin-top:12px; font-size:15px; font-weight:600; letter-spacing:-.01em}
.strip__i span{display:block; margin-top:5px; font-size:14px; line-height:1.5; color:var(--ink-2)}

/* ── 11. Solutions — theo mô hình vận hành ───────────────────────────────── */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.sol{
  padding:26px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.sol:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#d5dfeb}
.sol__ic{display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
         background:var(--brand-w); color:var(--brand)}
.sol__ic svg{width:22px; height:22px}
.sol h3{margin-top:16px; font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.02em}
.sol p{margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}

/* ── 12. How it works — 3 bước ───────────────────────────────────────────── */
.steps{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
/* Đường nối đứt nét chạy phía sau ba vòng tròn số thứ tự */
.steps::before{content:''; position:absolute; top:26px; left:14%; right:14%; border-top:2px dashed #d7dfea}
.step{position:relative; text-align:center}
.step__n{
  position:relative; z-index:1; margin:0 auto;
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-family:var(--display); font-size:20px; font-weight:700;
  /* Vòng sáng cùng màu nền để "cắt" đường đứt nét chạy qua */
  box-shadow:0 8px 18px -8px rgba(9,105,218,.75), 0 0 0 8px var(--surface-2);
}
.sec:not(.sec--tint) .step__n{box-shadow:0 8px 18px -8px rgba(9,105,218,.75), 0 0 0 8px var(--surface)}
.step h3{margin-top:22px; font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.02em}
.step p{margin-top:10px; font-size:15px; line-height:1.6; color:var(--ink-2)}
.step__meta{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  padding:5px 12px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-3);
}
.step__meta svg{width:14px; height:14px; color:var(--ok)}

/* ── 13. Pricing band + CTA cuối trang ───────────────────────────────────── */
.sec--cta{padding:100px 0}
.pband{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:44px}
.pband span{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
  font-size:14px; color:var(--ink-2);
}
.pband svg{width:17px; height:17px; color:var(--ok)}
.pband b{color:var(--ink); font-weight:600}

.cta{
  position:relative; overflow:hidden;
  padding:72px 40px; border-radius:var(--r-xl); text-align:center;
  background:linear-gradient(150deg, #0d3378 0%, #0b1220 62%);
  box-shadow:var(--sh-3);
}
/* Lớp nền trang trí nằm dưới, nội dung được nâng lên bằng z-index dương.
   KHÔNG dùng z-index:-1 + isolation:isolate: trên vài trình duyệt/GPU, lớp blur
   nằm ở tầng âm khiến cả banner không được vẽ (đã gặp trong lúc kiểm thử). */
.cta__bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.cta > *:not(.cta__bg){position:relative; z-index:1}
.cta__bg::before{                       /* lưới mờ */
  content:''; position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
}
.cta__bg::after{                        /* quầng sáng xanh phía trên */
  content:''; position:absolute; left:50%; top:-140px; width:640px; height:340px;
  transform:translateX(-50%); border-radius:50%; filter:blur(80px);
  background:radial-gradient(circle, rgba(56,139,253,.45), transparent 70%);
}
.cta h2{
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(28px, 3.8vw, 46px); line-height:1.1; letter-spacing:-.032em;
  max-width:20ch; margin-inline:auto;
}
.cta p{margin:20px auto 0; max-width:58ch; font-size:17px; line-height:1.6; color:#a9b8d0}
.cta__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px}
.cta__note{margin-top:22px; font-size:13.5px; color:#7d8ca6}

/* ── 14. Footer ──────────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line); background:var(--surface); padding:68px 0 28px}
.ftr__top{display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:44px}
.ftr__about p{margin-top:16px; max-width:34ch; font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.ftr__langs{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.ftr__langs span{
  padding:4px 10px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line-2); font-size:12px; color:var(--ink-3);
}
.ftr__col h4{font-size:12px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3)}
.ftr__col ul{margin-top:16px; display:grid; gap:11px}
.ftr__col a{font-size:14.5px; color:var(--ink-2); transition:color .18s}
.ftr__col a:hover{color:var(--brand)}
.ftr__bot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--line-2);
  font-size:13.5px; color:var(--ink-3);
}
.ftr__legal{display:flex; flex-wrap:wrap; gap:18px}
.ftr__legal a:hover{color:var(--brand)}
.social{display:flex; gap:8px}
.social a{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink-3);
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}
.social a:hover{color:var(--brand); border-color:#cfe0f7; background:var(--brand-w); transform:translateY(-1px)}
.social svg{width:18px; height:18px}

/* ── 14b. Modal đăng ký dùng thử ─────────────────────────────────────────
   Dùng thuộc tính [hidden] để bật/tắt (landing.js đặt modal.hidden = true/false),
   không dùng display trong JS — giữ toàn bộ quyết định hiển thị trong CSS. */
.modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(11,18,32,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:fadeIn .2s ease both;
}
.modal__box{
  position:relative; width:100%; max-width:560px; max-height:calc(100dvh - 40px); overflow-y:auto;
  padding:34px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-4);
  animation:modalIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}

.modal__x{
  position:absolute; top:14px; right:14px; display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px; color:var(--ink-3);
  transition:background .18s, color .18s;
}
.modal__x:hover{background:var(--surface-2); color:var(--ink)}
.modal__x svg{width:18px; height:18px}

.modal__title{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.025em; padding-right:30px}
.modal__sub{margin-top:10px; font-size:15px; line-height:1.6; color:var(--ink-2)}

.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1 / -1}
.field > span{font-size:13px; font-weight:600; color:var(--ink-2)}
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:var(--r);
  border:1px solid #d3dae5; background:var(--surface);
  font:inherit; font-size:15px; color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{resize:vertical; min-height:76px}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(9,105,218,.14);
}
.field input::placeholder, .field textarea::placeholder{color:#a8b2c1}

/* Bẫy bot: phải ẩn khỏi mắt NGƯỜI nhưng vẫn nằm trong DOM để bot điền vào.
   Không dùng display:none — nhiều bot bỏ qua trường bị display:none. */
.hpot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.modal__err{
  margin-top:16px; padding:11px 14px; border-radius:var(--r);
  background:#fdecec; border:1px solid #f7c9c9; color:#9f1e28; font-size:14px;
}
.modal__err[hidden]{display:none}
.modal form .btn--block{margin-top:20px}
.modal__fine{margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--ink-3); text-align:center}

/* Bước "đã gửi xong" */
.modal__ok{
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 20px;
  border-radius:50%; background:#e4f6e9; color:var(--ok);
}
.modal__ok svg{width:30px; height:30px}
#trialDoneStep{text-align:center; padding:10px 0}
#trialDoneStep .modal__title{padding-right:0}
.modal__doneBtns{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px}

/* ── 14c. Vài chi tiết nhỏ dùng chung ────────────────────────────────────── */
.pband__link{
  display:inline-flex; align-items:center; padding:10px 4px;
  font-size:14px; font-weight:600; color:var(--brand);
  transition:color .18s, transform .18s;
}
.pband__link:hover{color:var(--brand-h); transform:translateX(2px)}

.cta__mail{
  display:inline-block; margin-top:6px; color:#cddcf5; font-size:13.5px;
  border-bottom:1px solid rgba(205,220,245,.35); transition:color .18s, border-color .18s;
}
.cta__mail:hover{color:#fff; border-color:#fff}

.ftr__mail{
  display:inline-block; margin-top:14px; font-size:14.5px; font-weight:500; color:var(--brand);
  transition:color .18s;
}
.ftr__mail:hover{color:var(--brand-h)}

/* Cột "Company" ở footer có một <button> đứng chung với các <a> — cho nó
   trông và cư xử y hệt link để hàng không bị lệch. */
.ftr__col button{
  padding:0; font-size:14.5px; font-weight:400; text-align:left;
  color:var(--ink-2); transition:color .18s;
}
.ftr__col button:hover{color:var(--brand)}

/* ── 14d. Trang Bảng giá (pricing.html) ──────────────────────────────────── */
.wrap--narrow{max-width:820px}
.hdr--slim .hdr__inner{justify-content:space-between}
.ftr--slim{padding:28px 0}
.ftr--slim .ftr__bot{margin-top:0; padding-top:0; border-top:0}
.ftr__legal a{transition:color .18s}
.ftr__legal a:hover{color:var(--brand)}

.pr__hero{padding-bottom:56px}
.pr__hero .sec__head{margin-bottom:44px}

/* Công tắc Tháng / Năm */
.ptoggle{
  display:inline-flex; gap:4px; margin-top:30px; padding:5px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
}
.ptoggle button{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:999px;
  font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:background .2s, color .2s, box-shadow .2s;
}
.ptoggle button.is-on{background:var(--surface); color:var(--ink); box-shadow:var(--sh-2)}
.ptoggle em{
  font-style:normal; font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:2px 7px; border-radius:999px; background:#e4f6e9; color:var(--ok);
}

/* Ba thẻ gói */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start}
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:30px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:box-shadow .25s, border-color .25s;
}
.plan:hover{box-shadow:var(--sh-2)}
/* Gói khuyến nghị nổi hơn hẳn hai gói kia — khách B2B thường chọn gói giữa,
   nên gói giữa phải là gói ta muốn bán nhất. */
.plan--hot{
  border-color:var(--brand); box-shadow:0 20px 44px -20px rgba(9,105,218,.42);
  padding-top:38px;
}
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:5px 14px; border-radius:999px; white-space:nowrap;
  background:var(--brand); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; box-shadow:0 6px 14px -6px rgba(9,105,218,.8);
}
.plan__name{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em}
.plan__desc{margin-top:8px; min-height:44px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.plan__price{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-top:20px}
.plan__price b{font-family:var(--display); font-size:42px; font-weight:700; letter-spacing:-.035em; line-height:1}
.plan__price span{font-size:13.5px; color:var(--ink-3)}
/* Gói Enterprise hiện chữ ("Theo thoả thuận") thay vì số -> phải nhỏ hơn, nếu
   không câu chữ dài sẽ tràn thẻ và phá vỡ nhịp của ba cột giá. */
.plan__price--text b{font-size:28px; line-height:1.2}
.plan__billed{margin-top:6px; font-size:12.5px; color:var(--ok); font-weight:600}
.plan__billed[hidden]{display:none}
.plan .btn{margin-top:24px}
.plan__f{margin-top:26px; padding-top:24px; border-top:1px solid var(--line-2); display:grid; gap:12px}
.plan__f li{display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.plan__f svg{width:18px; height:18px; margin-top:2px; flex:none; color:var(--ok)}
.pr__note{
  max-width:760px; margin:38px auto 0; text-align:center;
  font-size:13.5px; line-height:1.6; color:var(--ink-3);
}

/* Bảng so sánh */
.cmp-wrap{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface)}
.cmp{width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px}
.cmp th, .cmp td{padding:14px 18px; text-align:center; border-bottom:1px solid var(--line-2)}
.cmp th{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); background:var(--surface-2); border-bottom-color:var(--line);
}
.cmp th:first-child, .cmp td:first-child{text-align:left; color:var(--ink); font-weight:500}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:var(--surface-2)}
/* Dấu có / không vẽ bằng CSS để bảng không phải nhét 20 thẻ svg */
.cmp td.y::before{content:"\2713"; color:var(--ok); font-weight:700; font-size:16px}
.cmp td.n::before{content:"\2014"; color:#c3ccda}

/* Câu hỏi thường gặp */
.faq{display:grid; gap:12px}
.faq details{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  transition:border-color .2s, box-shadow .2s;
}
.faq details[open]{border-color:#cfe0f7; box-shadow:var(--sh-1)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:none; width:10px; height:10px; margin-right:4px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-4px,-4px)}
.faq p{padding:0 22px 20px; font-size:15px; line-height:1.65; color:var(--ink-2)}

/* ── 14e. Trang Thanh toán (checkout.html) ───────────────────────────────── */
.page--checkout{background:var(--surface-2)}
.co{padding:44px 0 80px}
.co__back{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2)}
.co__back:hover{color:var(--brand)}
.co__head{max-width:640px; margin-bottom:32px}
.co__head h1{font-family:var(--display); font-size:clamp(26px,3vw,36px); font-weight:700; letter-spacing:-.03em}
.co__head p{margin-top:10px; font-size:15.5px; color:var(--ink-2)}

.co__grid{display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start}
.co__grid[hidden]{display:none}
.co__form{display:grid; gap:18px}

.cobox{padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.cobox__h{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px;
  font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.02em;
}
.cobox__alt{font-family:var(--font); font-size:13.5px; font-weight:600; color:var(--brand)}
.cobox__alt:hover{color:var(--brand-h)}
.cobox .fgrid{margin-top:0}

.radio-row{display:flex; flex-wrap:wrap; gap:10px}
.radio{
  display:inline-flex; align-items:center; gap:9px; padding:11px 16px;
  border:1px solid #d3dae5; border-radius:var(--r); background:var(--surface);
  font-size:14.5px; cursor:pointer; transition:border-color .18s, background .18s;
}
.radio:hover{border-color:#b9c5d6}
.radio:has(input:checked){border-color:var(--brand); background:var(--brand-w)}
.radio input{accent-color:var(--brand); width:16px; height:16px}

/* Hình thức thanh toán */
.pay{display:grid; gap:12px}
.pay__opt{
  display:flex; gap:13px; padding:16px 18px; cursor:pointer;
  border:1px solid #d3dae5; border-radius:var(--r-md); background:var(--surface);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.pay__opt:hover{border-color:#b9c5d6}
.pay__opt:has(input:checked){border-color:var(--brand); background:var(--brand-w); box-shadow:0 0 0 1px var(--brand)}
.pay__opt input{margin-top:3px; accent-color:var(--brand); width:17px; height:17px; flex:none}
.pay__t{display:flex; align-items:center; gap:9px; font-size:15px; letter-spacing:-.01em}
.pay__t svg{width:21px; height:21px; color:var(--brand)}
.pay__d{display:block; margin-top:5px; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.pay__note{
  display:flex; align-items:flex-start; gap:9px; margin-top:16px;
  font-size:12.5px; line-height:1.5; color:var(--ink-3);
}
.pay__note svg{width:16px; height:16px; margin-top:1px; flex:none; color:var(--ok)}

.terms{display:flex; align-items:flex-start; gap:11px; padding:2px 4px; font-size:14px; line-height:1.55; color:var(--ink-2)}
.terms input{margin-top:2px; width:17px; height:17px; accent-color:var(--brand); flex:none}
.terms a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}

/* Tóm tắt đơn hàng — dính khi cuộn để nút đặt hàng luôn trong tầm mắt */
.co__sum{position:sticky; top:calc(var(--hdr-h) + 20px)}
.sum{padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.sum__h{font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.02em; margin-bottom:18px}
.sum__row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 0; font-size:14.5px; color:var(--ink-2)}
.sum__row b{color:var(--ink); font-weight:600; text-align:right}
.sum__row--ok b{color:var(--ok)}
.sum__row[hidden]{display:none}
.sum__sep{height:1px; margin:14px 0; background:var(--line-2)}
.sum__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:16px; padding-top:16px; border-top:2px solid var(--line);
  font-size:15px; font-weight:600;
}
.sum__total b{font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.03em}
.sum__total em{font-style:normal; font-size:13px; color:var(--ink-3); margin-left:5px}
.sum .btn{margin-top:22px}
.sum__note{margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--ink-3); text-align:center}

.co__done{
  max-width:560px; margin:40px auto; padding:44px 32px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
.co__done[hidden]{display:none}
.co__done h2{font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.03em}
.co__done p{margin-top:12px; font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.co__doneRef{
  display:inline-block; margin:22px 0 26px; padding:10px 18px; border-radius:var(--r);
  background:var(--surface-2); border:1px dashed var(--line);
  font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:.04em;
}

/* ── 14f. Trang 404 ──────────────────────────────────────────────────────── */
.page--404{min-height:100dvh;display:grid;place-items:center}
.e404{max-width:560px;padding:48px 24px;text-align:center}
.e404__logo{display:inline-flex;margin-bottom:40px}
.e404__code{
  font-family:var(--display); font-size:clamp(84px,16vw,132px); font-weight:800;
  line-height:.9; letter-spacing:-.05em;
  background:linear-gradient(96deg,var(--brand),#2b7cf6 45%,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.e404__title{margin-top:22px;font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.03em}
.e404__sub{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.e404__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.e404__mail{margin-top:28px;font-size:13.5px;color:var(--ink-3)}
.e404__mail a{color:var(--brand);border-bottom:1px solid #cfe0f7}
.e404__mail a:hover{border-color:var(--brand)}

/* ── 14g. Trang pháp lý (security / terms / privacy / dpa) ───────────────── */
.page--legal{background:var(--surface)}
.legal{padding:44px 0 88px}
.legal__head{max-width:760px;margin-bottom:34px}
.legal__head h1{margin-top:12px;font-family:var(--display);font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.03em}
.legal__lead{margin-top:14px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.legal__meta{margin-top:12px;font-size:13px;color:var(--ink-3)}

/* Cảnh báo bản nháp — CỐ Ý để nổi bật. Xoá khối .draft-note trong HTML sau khi
   luật sư đã soát xong; đừng chỉ ẩn bằng CSS. */
.draft-note{
  max-width:820px;margin-bottom:34px;padding:16px 20px;border-radius:var(--r-md);
  background:#fff8e6;border:1px solid #f0d795;color:#7a5a12;
  font-size:14.5px;line-height:1.6;
}
.draft-note b{color:#5c430c}

.legal__grid{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
/* min-width:0 — bắt buộc. Mặc định ô lưới có min-width:auto nên bảng bên trong
   .prose kéo cả cột rộng ra quá khung, nội dung bị cắt mất mép phải trên mobile. */
.legal__grid > *{min-width:0}
.legal__aside{position:sticky;top:calc(var(--hdr-h) + 20px)}
.legal__nav{display:grid;gap:2px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.legal__nav-link{padding:8px 12px;border-radius:var(--r);font-size:14.5px;font-weight:500;color:var(--ink-2);transition:.16s}
.legal__nav-link:hover{background:var(--surface-2);color:var(--ink)}
.legal__nav-link.is-on{background:var(--brand-w);color:var(--brand);font-weight:600}
.legal__toc h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;padding-left:12px}
.legal__toc ul{display:grid;gap:3px}
.legal__toc a{display:block;padding:5px 12px;border-left:2px solid transparent;font-size:13.5px;line-height:1.45;color:var(--ink-3);transition:.16s}
.legal__toc a:hover{color:var(--brand);border-left-color:var(--brand)}

/* Khối chữ dài — giới hạn bề rộng để mắt không phải quét quá xa mỗi dòng */
.prose{max-width:74ch;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.prose h2{
  margin:38px 0 14px;padding-top:6px;
  font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  scroll-margin-top:calc(var(--hdr-h) + 20px);
}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:0;display:grid;gap:9px}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.62em;width:5px;height:5px;border-radius:50%;background:#c3ccda}
.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--brand-h)}
.prose code{padding:1px 6px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line-2);font-family:var(--mono);font-size:13px;color:var(--ink)}
.prose hr{margin:34px 0;border:0;border-top:1px solid var(--line)}
.prose__contact{font-size:14px;color:var(--ink-3)}
.prose__note{font-size:14px;color:var(--ink-3)}

/* Khung cuon nam NGOAI bang. Dat overflow len chinh <table> (display:block) se
   pha layout ben trong: tren man hinh hep cot cuoi bi cat mat chu khong cuon duoc. */
.ptable-wrap{margin:0 0 18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;min-width:480px;border-collapse:collapse;font-size:14.5px}
.ptable th,.ptable td{padding:11px 14px;text-align:left;vertical-align:top;border:1px solid var(--line-2)}
.ptable th{background:var(--surface-2);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ptable td:first-child{color:var(--ink)}

/* Chỗ trống cần điền — landing.js bọc [[...]] vào thẻ này. Tự biến mất khi
   người dùng thay bằng nội dung thật, nên không sợ để sót thẻ đánh dấu. */
mark.todo{background:#fff0b3;color:#6b4e00;padding:1px 5px;border-radius:4px;border:1px dashed #e0c25e;font-size:.94em}

/* ── 15. Hiệu ứng ────────────────────────────────────────────────────────── */
/* Hero: chạy ngay khi tải trang, xếp lớp bằng biến --d */
.anim{opacity:0; transform:translateY(18px); animation:fadeUp .75s cubic-bezier(.22,1,.36,1) forwards;
      animation-delay:var(--d, 0ms)}
.anim--slow{transform:translateY(34px) scale(.985); animation-duration:1.05s; animation-name:fadeUpShot}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}
@keyframes fadeUpShot{to{opacity:1; transform:translateY(0) scale(1)}}

/* Các section dưới: IntersectionObserver trong landing.js gắn .is-in khi cuộn tới.
   Bọc trong .js (do js-on.js đặt) để nếu JS không chạy thì nội dung vẫn hiện đầy đủ
   thay vì ẩn vĩnh viễn — chỉ mất hiệu ứng, không mất trang. */
.js .reveal{opacity:0; transform:translateY(24px);
            transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
            transition-delay:var(--d, 0ms)}
.js .reveal.is-in{opacity:1; transform:none}

/* ── 16. Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .float--alert{left:-8px}
  .float--ok{right:-8px}
}

@media (max-width:1024px){
  .hero{padding:60px 0 80px}
  .sec, .sec--cta{padding:84px 0}
  .shot{margin-top:52px}
  .ui{grid-template-columns:168px 1fr; min-height:0}
  .ui__kpis{grid-template-columns:repeat(2,1fr)}
  .float{padding:10px 13px}
  .float--alert{left:12px; bottom:-18px}
  .float--ok{right:12px; top:-20px; bottom:auto}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  /* Khối giới thiệu chiếm trọn hàng trên, 4 cột link xếp thành một hàng dưới */
  .ftr__top{grid-template-columns:repeat(4,1fr); gap:36px}
  .ftr__about{grid-column:1 / -1}
  .ftr__about p{max-width:52ch}
}

@media (max-width:1024px){
  .plans{grid-template-columns:1fr; max-width:520px; margin-inline:auto}
  .plan__desc{min-height:0}
  .co__grid{grid-template-columns:1fr}
  .co__sum{position:static}
}

@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:40px; max-width:520px; margin-inline:auto}
  .steps::before{display:none}      /* đường nối chỉ có nghĩa khi 3 bước nằm ngang */
  .cta{padding:56px 28px}
}

@media (max-width:880px){
  .nav{
    position:fixed; top:var(--hdr-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px 20px 22px; margin:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:var(--sh-3);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .22s, transform .22s, visibility .22s;
    max-height:calc(100dvh - var(--hdr-h)); overflow-y:auto;
  }
  .nav.is-open{opacity:1; transform:translateY(0); visibility:visible}
  .nav__link{padding:13px 12px; font-size:16px; border-radius:10px}
  .nav__mobile-actions{display:grid; gap:10px; margin-top:14px; padding-top:16px; border-top:1px solid var(--line-2)}
  .burger{display:flex}
  .hdr__login,
  .hdr__actions .btn--primary{display:none}
  body.is-locked{overflow:hidden}
}

@media (max-width:720px){
  .wrap{padding-inline:18px}
  .hero{padding:44px 0 64px}
  /* Bỏ ngắt dòng thủ công trên mobile, để trình duyệt tự cân dòng — tránh chữ mồ côi */
  .hero__title{font-size:clamp(31px, 8.4vw, 44px); max-width:none; letter-spacing:-.03em; text-wrap:balance}
  .hero__title br{display:none}
  .hero__sub{font-size:16px}
  .pill{height:auto; padding:6px 12px; text-align:left}
  .pill__txt{white-space:normal}
  .pill .ic{display:none}
  .hero__cta{width:100%; flex-direction:column; gap:10px}
  .hero__cta .btn{width:100%}

  /* Mockup: sidebar thành thanh ngang cuộn được, bảng Gantt giữ nguyên tỉ lệ */
  .shot{margin-top:40px}
  .shot__frame{border-radius:16px}
  .ui{grid-template-columns:1fr}
  .ui__side{flex-direction:row; align-items:center; gap:10px; overflow-x:auto;
            border-right:0; border-bottom:1px solid var(--dark-2); padding:10px 12px}
  .ui__brand{padding:0; white-space:nowrap}
  .ui__nav{flex-direction:row; gap:4px}
  .ui__nav span{white-space:nowrap}
  .ui__side-foot{margin:0 0 0 auto; padding:0; border:0}
  .ui__main{padding:14px}
  .ui__kpis{grid-template-columns:repeat(2,1fr)}
  .gantt__head,.row{grid-template-columns:86px 1fr; gap:8px}
  .gantt__now{left:calc(86px + 8px + 46%)}
  .row__id{font-size:10px}
  .bar{font-size:9px; padding:0 5px}
  .float{position:static; margin-top:12px; width:100%; animation:none}
  .hero__stats{gap:22px 32px; margin-top:44px}

  .sec, .sec--cta{padding:68px 0}
  .sec__head{margin-bottom:44px}
  .sec__sub{font-size:16px}
  .card{padding:26px}
  .card__h{font-size:23px}
  .trusted{padding:40px 0 4px}
  .trusted__row{gap:18px 34px}
  .brand b{font-size:14px}
  .grid4,.strip{grid-template-columns:1fr}
  .cta{padding:48px 22px; border-radius:22px}
  .cta h2{max-width:none}
  .cta__btns{flex-direction:column}
  .cta__btns .btn{width:100%}
  .ftr{padding:52px 0 24px}
  .ftr__top{grid-template-columns:1fr 1fr; gap:32px}
  .ftr__bot{flex-direction:column; align-items:flex-start; gap:14px}
  .ptoggle{width:100%; justify-content:center}
  .plan{padding:24px}
  .plan__price b{font-size:36px}
  .co{padding:28px 0 56px}
  .cobox{padding:20px}
  .sum{padding:20px}
  .radio-row{flex-direction:column}
  .radio{width:100%}
  .legal{padding:28px 0 56px}
  .legal__grid{grid-template-columns:1fr;gap:26px}
  .legal__aside{position:static}
  .legal__toc{display:none}
  .prose{font-size:15px}
  .e404{padding:32px 20px}
  .e404__btns{flex-direction:column}
  .e404__btns .btn{width:100%}
  .modal{padding:0; place-items:stretch}
  .modal__box{max-width:none; max-height:100dvh; border-radius:0; border:0; padding:26px 20px 34px}
  .modal__title{font-size:22px}
  .fgrid{grid-template-columns:1fr}
  .modal__doneBtns{flex-direction:column}
  .modal__doneBtns .btn{width:100%}
}

@media (max-width:420px){
  .logo__word{font-size:18px}
  .gantt__days em{font-size:9px}
  .scen{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
}

/* ── 17. Tôn trọng thiết lập giảm chuyển động của người dùng ─────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
  .anim,.js .reveal{opacity:1 !important; transform:none !important}
}