/* home.css — homepage only (comp: canvas boards "12 · Trang chủ bản 5") */

/* ---------- hero ---------- */
.hero{ position:relative; min-height:800px; overflow:hidden; background:var(--navy); color:var(--white); isolation:isolate; }
.hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:grayscale(1) contrast(1.15) brightness(.9); z-index:-2; }
.hero__shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(14,13,52,.97) 0%, rgba(11,10,42,.9) 42%, rgba(43,42,143,.7) 100%); }
.hero__stage{ position:absolute; right:-30px; top:170px; width:min(1000px, 69vw); aspect-ratio:1000/545; }
.hero__map{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.hero__routes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route{ fill:none; stroke:var(--indigo-mist); stroke-width:1.8; vector-effect:non-scaling-stroke; }
.route--hot{ stroke:var(--amber-dark); stroke-width:2.5; }
.pt{ fill:var(--white); } .pt-hot{ fill:var(--amber-dark); }
.pt-vn{ fill:var(--navy); stroke:var(--white); stroke-width:3; vector-effect:non-scaling-stroke; }
.hero__stage .aif{ left:var(--l); top:var(--t); width:var(--w); min-width:120px; }
.hero__in{ position:relative; padding-top:250px; padding-bottom:150px; }
.hero__copy{ max-width:640px; display:flex; flex-direction:column; gap:24px; }
.hero__label{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--indigo-mist); }
.hero__label span{ width:24px; height:2px; background:var(--amber-dark); flex:none; }
.hero__h1{ font-size:clamp(36px, 4.2vw, 60px); line-height:1.06; font-weight:600; letter-spacing:-0.032em; }
.hero .lead{ max-width:560px; }
.hero__cta{ margin-top:6px; }
.hero__cta .btn{ min-height:52px; padding:0 24px; font-size:16px; }

html.js .hero__routes .route{ stroke-dasharray:900; stroke-dashoffset:900; animation:draw var(--dur-draw) var(--ease-out) .3s forwards; }
html.js .hero__stage .aif{ opacity:0; animation:lock .5s var(--ease-out) forwards; }
html.js .hero__stage .aif:nth-of-type(1){ animation-delay:1.1s; } html.js .hero__stage .aif:nth-of-type(2){ animation-delay:1.3s; }
html.js .hero__stage .aif:nth-of-type(3){ animation-delay:1.45s; } html.js .hero__stage .aif:nth-of-type(4){ animation-delay:1.6s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes lock{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:none; } }
html.qa .hero__routes .route{ animation:none; stroke-dashoffset:0; } html.qa .hero__stage .aif{ animation:none; opacity:1; }

@media (max-width:1279px){ .hero__stage{ top:220px; width:60vw; } .hero__copy{ max-width:540px; } }
@media (max-width:1023px){
  .hero{ min-height:0; }
  .hero__shade{ background:linear-gradient(180deg, rgba(14,13,52,.96) 0%, rgba(11,10,42,.9) 60%, rgba(43,42,143,.85) 100%); }
  .hero__in{ padding-top:96px; padding-bottom:0; }
  .hero__copy{ gap:16px; }
  .hero__stage{ position:relative; top:auto; right:auto; left:-110%; width:250%; margin-top:-20px; margin-bottom:-40px; pointer-events:none; }
  .hero__stage .aif{ left:var(--ml); top:var(--mt); width:var(--mw); min-width:0; }
  .hero__stage .aif__cap b{ font-size:12.5px; }
  .hero__cta .btn{ width:100%; }
}
@media (max-width:767px){ .hero__h1{ font-size:36px; line-height:1.1; } .hero .lead{ font-size:17px; } }

/* ---------- tool strip (overlaps hero edge) ---------- */
.tools-wrap{ position:relative; z-index:2; margin-top:-44px; }
.tools{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-product); overflow:hidden; }
.tool{ display:flex; align-items:center; gap:14px; padding:22px; min-height:88px; border-left:1px solid var(--line-soft); color:var(--ink); font-weight:600; font-size:16px; line-height:1.3;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tool:first-child{ border-left:0; }
.tool:hover{ background:var(--indigo-wash); color:var(--indigo-deep); }
.tool__ic{ width:44px; height:44px; border-radius:var(--r-control); background:var(--indigo-wash); color:var(--indigo-deep); display:flex; align-items:center; justify-content:center; flex:none;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tool:hover .tool__ic{ background:var(--indigo); color:var(--white); }
.tool__ic svg{ width:22px; height:22px; }
@media (max-width:1023px){
  .tools-wrap{ margin-top:-36px; }
  .tools{ grid-template-columns:1fr 1fr; }
  .tool{ padding:12px; min-height:60px; gap:10px; font-size:14px; border-top:1px solid var(--line-soft); }
  .tool:nth-child(odd){ border-left:0; }
  .tool:nth-child(-n+2){ border-top:0; }
  .tool__ic{ width:36px; height:36px; }
  .tool__ic svg{ width:18px; height:18px; }
}


/* ---------- all in one ---------- */
.aio{ padding-top:clamp(64px, 8vw, 110px); background:linear-gradient(180deg, var(--white) 0%, var(--indigo-wash) 100%); overflow:hidden; }
.aio__stage{ position:relative; max-width:1180px; margin:clamp(28px, 3vw, 40px) auto 0; }
.aio__win{ background:var(--white); border:1px solid var(--line); border-bottom:0; border-radius:var(--r-card) var(--r-card) 0 0; box-shadow:0 40px 80px -40px rgba(18,22,43,.35); overflow:hidden; height:clamp(260px, 32vw, 440px); }
.aio__bar{ height:40px; display:flex; align-items:center; gap:7px; padding:0 16px; background:var(--indigo-wash); border-bottom:1px solid var(--line); }
.aio__bar i{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--line); }
.aio__body{ padding:10px 10px 0; background:var(--neutral-bg); display:flex; flex-direction:column; gap:6px; }
.aio__fade{ position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg, rgba(243,244,251,0) 0%, var(--indigo-wash) 90%); }
.pill{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:0 14px 30px -16px rgba(18,22,43,.35); font-size:15px; font-weight:600; white-space:nowrap; }
.pill i{ width:26px; height:26px; border-radius:var(--r-pill); background:var(--indigo); color:var(--white); display:flex; align-items:center; justify-content:center; flex:none; }
.pill i svg{ width:14px; height:14px; stroke-width:2.4; }
.pill--1{ left:-56px; top:45%; } .pill--2{ right:12%; top:13%; } .pill--3{ left:-24px; top:75%; } .pill--4{ right:-30px; top:68%; }
html.js .pill{ opacity:0; transform:translateY(8px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
html.js .aio__stage.in .pill{ opacity:1; transform:none; }
.aio__stage.in .pill--2{ transition-delay:.12s; } .aio__stage.in .pill--3{ transition-delay:.24s; } .aio__stage.in .pill--4{ transition-delay:.36s; }
html.qa .pill{ opacity:1; transform:none; }
@media (max-width:1279px){ .pill--1{ left:-12px; } .pill--3{ left:8px; } .pill--4{ right:8px; } }
@media (max-width:767px){
  .aio__win{ height:280px; }
  .pill{ font-size:14px; padding:8px 13px 8px 8px; }
  .pill--1{ left:8px; top:30%; } .pill--2{ right:8px; top:56%; } .pill--3, .pill--4{ display:none; }
}

/* ---------- features (zigzag) ---------- */
.feats .wrap{ display:flex; flex-direction:column; gap:clamp(64px, 8vw, 110px); }
.feat{ display:flex; align-items:center; gap:clamp(40px, 6vw, 88px); }
.feat--rev{ flex-direction:row-reverse; }
.feat__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:470px; }
.feat__h{ font-size:clamp(25px, 2.4vw, 34px); line-height:1.15; font-weight:600; letter-spacing:-0.02em; }
.feat__d{ font-size:clamp(16.5px, 1.3vw, 18px); line-height:1.6; color:var(--text-dim); }
.feat__ul{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.feat__ul li{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; }
.feat__ul span{ width:22px; height:22px; border-radius:var(--r-pill); background:var(--indigo-wash); color:var(--indigo-deep); display:flex; align-items:center; justify-content:center; flex:none; }
.feat__ul svg{ width:12px; height:12px; }

@media (max-width:1023px){
  .feat, .feat--rev{ flex-direction:column; align-items:stretch; gap:22px; }
  .feat__txt{ max-width:none; gap:12px; }
  .feat__txt .btn--outline{ display:none; }
}

/* mobile hero: copy first, then a cropped map strip with 2 frames (comp "12 · mobile") */
@media (max-width:1023px){
  .hero{ display:flex; flex-direction:column; }
  .hero__in{ order:-1; padding-top:92px; }
  .hero__stage{ left:-96%; width:200%; margin-top:-30px; margin-bottom:-24px; }
  .hero__stage .aif{ width:calc(var(--mw) * 1.9); }
  .hero__stage .aif:nth-of-type(1){ left:calc(var(--ml) - 6%); }
  .hero__stage .aif:nth-of-type(2){ left:calc(var(--ml) - 12%); top:calc(var(--mt) + 6%); }
  .hero__stage .aif__cap{ padding:5px 8px; }
}

/* dashboard window now holds HTML UI */
.aio__body{ padding:14px 14px 0; background:var(--neutral-bg); }
@media (max-width:767px){ .aio__body{ padding:10px 10px 0; } }
/* pills sit on the window edges, never over data */
.pill--1{ left:3%; top:-22px; } .pill--2{ right:3%; top:-22px; left:auto; }
.pill--3{ left:-28px; top:auto; bottom:64px; } .pill--4{ right:-28px; top:auto; bottom:96px; }
@media (max-width:1279px){ .pill--3{ left:8px; } .pill--4{ right:8px; } }
@media (max-width:767px){ .pill--1{ left:8px; top:-18px; } .pill--2{ right:8px; top:auto; bottom:40px; } }
@media (max-width:767px){ .aio__ui .ui-kpis4{ display:none; } }
@media (max-width:767px){ .aio__win{ height:340px; } .pill--2{ display:none; } }
.aio__body--app{ padding:0; height:calc(100% - 40px); }
.aio__body--app .app{ border-radius:0; }

/* mobile responsive pass 2026-10-23 */
@media (max-width:767px){
  /* tool strip → one swipeable row of single-line pills */
  .tools-wrap{ padding-right:0; }
  .tools{ display:flex; overflow-x:auto; gap:8px; padding:10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, var(--ink) 85%, transparent); mask-image:linear-gradient(90deg, var(--ink) 85%, transparent); border-radius:var(--r-card) 0 0 var(--r-card); }
  .tools::-webkit-scrollbar{ display:none; }
  .tool{ flex:none; min-height:48px; padding:6px 14px 6px 6px; border:1px solid var(--line) !important; border-radius:var(--r-pill); white-space:nowrap; scroll-snap-align:start; font-size:14px; }
  .tool__ic{ width:34px; height:34px; border-radius:var(--r-pill); }
  /* dashboard: show the buyer card only (KPIs and chart need width) */
  .aio__body--app .k2row, .aio__body--app .ui2--split > div:first-child{ display:none; }
  .aio__win{ height:360px; }
}

/* all-in-one on navy (2026-10-28) */
.aio.is-dark{ background:radial-gradient(70% 60% at 50% 0%, rgba(55,48,163,.5) 0%, rgba(55,48,163,0) 70%), var(--navy); }
.aio.is-dark .aio__win{ border-color:rgba(185,184,250,.25); box-shadow:0 0 0 1px rgba(185,184,250,.12), 0 40px 120px -30px rgba(55,48,163,.8); }
.aio.is-dark .aio__fade{ background:linear-gradient(180deg, rgba(11,10,42,0) 0%, var(--navy) 92%); }
.aio.is-dark{ margin-top:-60px; padding-top:calc(clamp(64px, 8vw, 110px) + 60px); }
.aio.is-dark .pill{ color:var(--ink); }
/* 2026-10-29 (Daniel): show the whole "Tất cả trong 1" app window, like the tool windows on tinh-nang (no crop, no fade) */
.aio{ padding-bottom:clamp(72px, 9vw, 120px); }
.aio__win, .aio.is-dark .aio__win{ height:auto; border-bottom:1px solid; border-radius:var(--r-card); }
.aio.is-dark .aio__win{ border-color:rgba(185,184,250,.25); }
.aio__body--app{ height:auto; }
.aio__fade{ display:none; }
@media (max-width:767px){ .aio__win{ height:auto; } }
/* chart card fills the row height next to the buyer list (no empty band under it) */
.aio__body--app .ui2--split{ align-items:stretch; }
.aio__body--app .ui2--split > div:first-child > .c2{ height:100%; display:flex; flex-direction:column; }
.aio__body--app .ui2--split > div:first-child .area{ flex:1; height:auto; min-height:140px; }
/* bottom pills sit on the window edge instead of over the chart axis */
@media (min-width:768px){ .pill--3{ top:auto; bottom:-22px; } .pill--4{ top:auto; bottom:-22px; } }