/* Trang App Localis — bố cục theo localis.vn */
.ap{--ap-g:#1c4533;--ap-g2:#24533e;--ap-o:#fd5100;--ap-o2:#c2410c;--ap-cream:#f1f3e8;--ap-card:#fff;color:var(--ink)}
.dark .ap{--ap-card:#1c2a22}
.ap-w{width:100%;max-width:calc(82.5rem + 4rem);margin:0 auto;padding:0 2rem}
@media(max-width:639px){.ap-w{padding:0 1.25rem}}
.ap h1,.ap h2,.ap h3{font-family:var(--font-sans);font-weight:700;color:var(--heading);letter-spacing:-.02em}
.ap-eb{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ap-o2);margin-bottom:.6rem}
.dark .ap-eb{color:#ff8a50}
.ap-h2{font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.08;text-wrap:balance}
.ap-lede{font-size:1.06rem;line-height:1.65;color:var(--ink-muted)}
.ap-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;padding:.7rem 1.5rem;border-radius:999px;font-weight:600;font-size:.95rem;transition:background .2s,color .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.ap-btn--o{background:var(--ap-o);color:#fff;box-shadow:0 10px 22px -12px rgba(253,81,0,.7)}
.ap-btn--o:hover{background:#e04800;transform:translateY(-1px)}
.ap-btn--line{border:1.5px solid var(--heading);color:var(--heading)}
.ap-btn--line:hover{background:var(--heading);color:var(--ap-cream)}
.ap-link{font-weight:600;color:var(--heading);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ap-link:hover{color:var(--ap-o2)}
.ap-sec{padding:5rem 0}
.ap-dark{background:var(--ap-g);color:#e6eadb}
.ap-dark h2,.ap-dark h3{color:#f1f3e8}
.ap-dark .ap-lede{color:#cfd8c8}

/* hero */
.ap-hero{padding:2rem 0 4.5rem}
.ap-hero__g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center;margin-top:2.25rem}
.ap-hero h1{font-size:clamp(2.6rem,5.4vw,4.25rem);line-height:1.04;letter-spacing:-.025em;max-width:13ch}
.ap-hero .ap-lede{margin-top:1.25rem;max-width:36rem}
.ap-hero .ap-btns{margin-top:1.75rem}
.ap-store{margin-top:1.75rem;display:flex;align-items:flex-end;gap:1.25rem;flex-wrap:wrap}
.ap-store__i{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ap-store__i img.b{height:40px;width:auto;display:block}
.ap-store__i .q{width:92px;height:92px;padding:6px;background:#fff;border-radius:10px;border:1px solid var(--line)}
.ap-store__hint{font-size:.85rem;color:var(--ink-muted);max-width:7rem;line-height:1.35;padding-bottom:.4rem}
.ap-by{margin-top:1.25rem;font-size:.85rem;font-style:italic;color:var(--ink-subtle)}
.ap-phones{position:relative;height:36rem}
.ap-phones .ap-phone{position:absolute}
.ap-phones .ap-phone--front{left:6%;top:2.5rem;z-index:2}
.ap-phones .ap-phone--back{right:4%;top:0}

/* phone mockup */
.ap-phone{width:17.5rem;aspect-ratio:9/18.6;border-radius:2.4rem;background:#11241b;padding:.55rem;box-shadow:0 40px 70px -35px rgba(10,30,20,.55),0 0 0 1.5px #2c4a3b inset}
.ap-scr{position:relative;width:100%;height:100%;border-radius:1.9rem;overflow:hidden;background:#f6f7f1;color:#1c4533;font-size:.62rem;line-height:1.35}
.ap-scr>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ap-scr__in{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.6rem .8rem .5rem}
.ap-scr__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.ap-scr__logo{height:13px;width:auto}
.ap-chip{display:inline-flex;align-items:center;gap:.2rem;font-size:.5rem;font-weight:600;padding:.18rem .45rem;border-radius:99px;border:1px solid #d9ddd0;background:#fff}
.ap-chip--o{border-color:#ffd2bd;background:#fff1ea;color:#c2410c}
.ap-scr h4{font-family:var(--font-sans);font-weight:700;font-size:1.02rem;line-height:1.15;color:#1c4533;letter-spacing:-.01em}
.ap-scr h4 em{font-style:normal;color:#fd5100}
.ap-scr__k{font-size:.46rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7b8a80;margin:.7rem 0 .35rem}
.ap-q{display:flex;align-items:center;gap:.4rem;background:#fff;border-radius:.55rem;padding:.42rem .5rem;margin-bottom:.32rem;box-shadow:0 1px 0 rgba(28,69,51,.06)}
.ap-q i{flex:none;width:.85rem;height:.85rem;border-radius:.25rem;background:#e8efe6}
.ap-q i.o{background:#ffe2d3}.ap-q i.b{background:#dce9fb}.ap-q i.p{background:#f0e1fa}
.ap-q span{flex:1}
.ap-q b{font-weight:400;color:#9aa89e}
.ap-input{margin-top:auto;display:flex;align-items:center;gap:.4rem;background:#fff;border-radius:99px;padding:.35rem .35rem .35rem .65rem;color:#9aa89e;border:1px solid #e3e6dc}
.ap-input span{flex:1}
.ap-send{width:1.2rem;height:1.2rem;border-radius:50%;background:#fd5100;flex:none}
.ap-nav{display:flex;justify-content:space-around;border-top:1px solid #e3e6dc;margin:.5rem -.8rem -.5rem;padding:.45rem 0 .55rem;background:#fff;font-size:.44rem;color:#8b978f}
.ap-nav span{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.ap-nav span::before{content:"";width:.75rem;height:.75rem;border-radius:.25rem;background:#d5dbd2}
.ap-nav span.on{color:#1c4533;font-weight:700}
.ap-nav span.on::before{background:#1c4533}
/* translate screen */
.ap-tr__langs{display:flex;align-items:center;justify-content:space-between;gap:.3rem;background:#fff;border-radius:99px;padding:.3rem;margin-bottom:.8rem}
.ap-tr__langs b{flex:1;text-align:center;padding:.25rem;border-radius:99px;font-size:.55rem}
.ap-tr__langs b.on{background:#1c4533;color:#fff}
.ap-bub{max-width:82%;padding:.5rem .6rem;border-radius:.8rem;margin-bottom:.45rem}
.ap-bub small{display:block;font-size:.46rem;opacity:.7;margin-top:.2rem}
.ap-bub--me{align-self:flex-end;background:#1c4533;color:#fff;border-bottom-right-radius:.2rem}
.ap-bub--them{align-self:flex-start;background:#fff;border-bottom-left-radius:.2rem}
.ap-mic{margin:auto auto .3rem;width:3.2rem;height:3.2rem;border-radius:50%;background:#fd5100;box-shadow:0 0 0 .5rem rgba(253,81,0,.15),0 0 0 1rem rgba(253,81,0,.07);display:grid;place-items:center}
.ap-mic svg{width:1.2rem;height:1.2rem;color:#fff}
.ap-tr__note{text-align:center;font-size:.48rem;color:#7b8a80;margin-top:.6rem}
/* trip screen */
.ap-trip{display:flex;gap:.45rem;background:#fff;border-radius:.65rem;padding:.35rem;margin-bottom:.4rem}
.ap-trip img{width:3.6rem;height:3.6rem;border-radius:.45rem;object-fit:cover;flex:none}
.ap-trip div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ap-trip strong{font-size:.68rem;font-weight:700;color:#1c4533}
.ap-trip small{font-size:.5rem;color:#7b8a80}
.ap-trip em{font-style:normal;font-size:.55rem;font-weight:700;color:#c2410c;margin-top:auto}
.ap-tabs{display:flex;gap:.3rem;margin-bottom:.6rem;flex-wrap:wrap}
.ap-tabs b{font-size:.5rem;padding:.2rem .5rem;border-radius:99px;background:#fff;border:1px solid #e3e6dc;font-weight:600}
.ap-tabs b.on{background:#1c4533;color:#fff;border-color:#1c4533}
.ap-cta-mini{margin-top:auto;background:#fd5100;color:#fff;text-align:center;border-radius:99px;padding:.45rem;font-weight:700;font-size:.6rem}

/* ecosystem */
.ap-eco__g{margin-top:2.25rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.ap-eco__c{display:flex;flex-direction:column;background:var(--ap-card);border-radius:14px;overflow:hidden;box-shadow:0 16px 34px -26px rgba(28,69,51,.55);transition:transform .25s,box-shadow .25s;color:inherit}
.ap-eco__c:hover{transform:translateY(-4px);box-shadow:0 24px 40px -26px rgba(28,69,51,.6)}
.ap-eco__c img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ap-eco__b{padding:1.5rem 1.5rem 1.75rem}
.ap-eco__n{font-family:var(--font-sans);font-weight:700;font-size:2.6rem;line-height:1;color:var(--ap-o);letter-spacing:-.03em}
.ap-eco__c h3{font-size:1.25rem;margin-top:.9rem}
.ap-eco__c p{margin-top:.6rem;font-size:.95rem;line-height:1.6;color:var(--ink-muted)}

/* app features */
.ap-app__top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.ap-app__top .ap-h2{max-width:22ch}
.ap-app .ap-lede{margin-top:1.1rem;max-width:44rem}
.ap-app__g{margin-top:3rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.ap-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.ap-feat button{width:100%;text-align:left;padding:1.05rem 1.25rem;border-radius:4px;border-left:3px solid transparent;color:#cfd8c8;transition:background .25s,border-color .25s,color .25s;cursor:pointer}
.ap-feat button:hover{background:rgba(255,255,255,.04)}
.ap-feat button[aria-selected=true]{background:rgba(255,255,255,.09);border-left-color:#e6eadb;color:#eef0e6}
.ap-feat .ap-ft{display:block;font-weight:700;font-size:1.1rem;color:#f1f3e8;letter-spacing:-.01em}
.ap-feat .ap-fd{display:block;margin-top:.4rem;font-size:.92rem;line-height:1.6}
.ap-feat button:focus-visible{outline:2px solid #ff8a50;outline-offset:2px}
.ap-stage{display:grid;place-items:center}
.ap-stage .ap-phone{grid-area:1/1;transition:opacity .35s ease,transform .35s ease}
.ap-stage .ap-phone[hidden]{display:block;opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;visibility:hidden}
.ap-stage .ap-phone{width:18.5rem}

/* open doors */
.ap-doors__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center}
.ap-doors .ap-lede{margin-top:1.25rem}
.ap-name{margin-top:1.75rem;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ap-name h3{font-size:1.15rem}
.ap-name h3 em{font-family:var(--font-lora);font-weight:400;font-size:.9rem;color:var(--ink-subtle);margin-left:.35rem}
.ap-name p{margin-top:.4rem;color:var(--ink-muted);line-height:1.6;font-size:.98rem}
.ap-doors .ap-link{display:inline-block;margin-top:1.4rem}
.ap-fig{margin:0}
.ap-fig img{width:100%;border-radius:14px;display:block;aspect-ratio:4/5;object-fit:cover}
.ap-fig figcaption{margin-top:.7rem;font-size:.85rem;color:var(--ink-subtle);line-height:1.5}

/* experiences */
.ap-exp{text-align:center}
.ap-exp .ap-h2{max-width:20ch;margin:0 auto}
.ap-exp__g{margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;text-align:center}
.ap-tile{position:relative;border-radius:12px;overflow:hidden;min-height:15rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem;color:#fff}
.ap-tile--w{grid-column:span 2}
.ap-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ap-tile::after{content:"";position:absolute;inset:0;background:rgba(14,32,24,.52);transition:background .3s}
.ap-tile:hover img{transform:scale(1.05)}
.ap-tile:hover::after{background:rgba(14,32,24,.62)}
.ap-tile>*:not(img){position:relative;z-index:1}
.ap-tile h3{color:#fff;font-size:1.25rem;letter-spacing:-.01em}
.ap-tile p{margin-top:.5rem;font-size:.88rem;line-height:1.55;color:#eef0e6;max-width:26rem}
.ap-tile--q p{font-family:var(--font-sans);font-weight:700;font-size:1.1rem;line-height:1.35;color:#fff}
.ap-exp .ap-link{display:inline-block;margin-top:2rem}

/* about */
.ap-about__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:start}
.ap-about p.t{margin-top:1.1rem;line-height:1.7;color:var(--ink-muted)}
.ap-founders{margin-top:1.75rem;display:flex;gap:2.25rem;flex-wrap:wrap}
.ap-founder{display:flex;align-items:center;gap:.8rem}
.ap-founder img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover;background:#dde3d6}
.ap-founder b{display:block;color:var(--heading);font-size:.98rem}
.ap-founder small{color:var(--ink-subtle);font-size:.82rem}
.ap-about .ap-fig img{aspect-ratio:4/4.6;object-position:center 20%}
.ap-vals{margin-top:3.5rem;padding-top:2.25rem;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.ap-vals h3{font-size:1rem}
.ap-vals p{margin-top:.5rem;font-size:.92rem;line-height:1.6;color:var(--ink-muted)}

/* become */
.ap-become__g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5rem;align-items:center}
.ap-roles{margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid rgba(241,243,232,.25);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.ap-roles h3{font-size:1rem}
.ap-roles p{margin-top:.4rem;font-size:.92rem;line-height:1.55;color:#cfd8c8}
.ap-become p.s{margin-top:1.75rem;font-size:1.02rem;line-height:1.6;color:#e6eadb;max-width:34rem}
.ap-become .ap-btn{margin-top:1.5rem}
.ap-become .ap-fig img{aspect-ratio:9/10}

/* closing */
.ap-close{padding:4.5rem 0 0}
.ap-close__in{border-radius:20px;background:linear-gradient(120deg,#fff4ec,#fde6d6);padding:2.75rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.dark .ap-close__in{background:linear-gradient(120deg,#2a2018,#3a2618)}
.ap-close h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.15}
.ap-close__r{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.ap-close__r img{height:40px;width:auto;display:block}

@media(max-width:899px){
  .ap-sec{padding:3.75rem 0}
  .ap-hero__g,.ap-app__g,.ap-doors__g,.ap-about__g,.ap-become__g{grid-template-columns:1fr;gap:2.5rem}
  .ap-phones{height:31rem;max-width:26rem;margin:0 auto;width:100%}
  .ap-phones .ap-phone{width:15rem}
  .ap-phones .ap-phone--front{left:0}
  .ap-phones .ap-phone--back{right:0}
  .ap-eco__g{grid-template-columns:1fr}
  .ap-app__top{flex-direction:column}
  .ap-stage{order:-1}
  .ap-exp__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-roles{grid-template-columns:1fr}
  .ap-close__in{padding:2rem 1.5rem}
}
@media(max-width:520px){
  .ap-exp__g{grid-template-columns:1fr}
  .ap-tile--w{grid-column:auto}
  .ap-vals{grid-template-columns:1fr}
  .ap-store__i .q{display:none}
  .ap-store__hint{display:none}
}
@media(prefers-reduced-motion:reduce){.ap-tile img,.ap-eco__c,.ap-stage .ap-phone,.ap-btn{transition:none}}
@media(max-width:899px){
  .ap-phones .ap-scr{font-size:.56rem}
  .ap-phones .ap-scr h4{font-size:.92rem}
  .ap-phones .ap-q:nth-of-type(n+5){display:none}
  .ap-eco__c img{aspect-ratio:16/9}
}
@media(min-width:900px){
  .ap-doors .ap-fig img{aspect-ratio:5/4.4}
  .ap-about .ap-fig img{aspect-ratio:1/1}
  .ap-become .ap-fig img{aspect-ratio:1/1}
}

/* Theo dõi trip qua app */
.ap-tk__g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem;align-items:center}
.ap-tk__stage{position:relative;display:grid;place-items:center;padding:2rem 0}
.ap-tk__stage::before{content:"";position:absolute;width:min(26rem,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(253,81,0,.16),rgba(253,81,0,0) 68%)}
.ap-tk__phone{position:relative;width:18.5rem}
.ap-tk .ap-lede{margin-top:1rem;max-width:38rem}
.ap-tk__list{list-style:none;margin:1.75rem 0 2rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem}
.ap-tk__list li{display:flex;gap:.9rem;align-items:flex-start}
.ap-tk__ic{flex:none;width:2.6rem;height:2.6rem;border-radius:12px;display:grid;place-items:center;background:#fff1ea;color:#c2410c}
.dark .ap-tk__ic{background:#3a2618;color:#ff8a50}
.ap-tk__list h3{font-size:1.02rem}
.ap-tk__list p{margin-top:.3rem;font-size:.9rem;line-height:1.55;color:var(--ink-muted)}
/* màn hình mô phỏng */
.ap-tk__trip{display:flex;gap:.5rem;align-items:center;background:#fff;border-radius:.7rem;padding:.4rem;margin-top:.7rem}
.ap-tk__trip img{width:3.2rem;height:3.2rem;border-radius:.5rem;object-fit:cover;flex:none}
.ap-tk__trip div{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.ap-tk__trip strong{font-size:.72rem;color:#1c4533}
.ap-tk__trip small{font-size:.52rem;color:#7b8a80}
.ap-tk__bar{display:block;height:.25rem;border-radius:9px;background:#e6eadf;margin-top:.15rem;overflow:hidden}
.ap-tk__bar i{display:block;height:100%;background:#fd5100;border-radius:9px}
.ap-tk__tl{list-style:none;margin:0;padding:0 0 0 .2rem;display:flex;flex-direction:column}
.ap-tk__tl li{position:relative;display:flex;gap:.55rem;padding:0 0 .55rem .85rem;border-left:1.5px solid #dfe3d8;font-size:.6rem}
.ap-tk__tl li:last-child{padding-bottom:0}
.ap-tk__tl li::before{content:"";position:absolute;left:-.3rem;top:.1rem;width:.5rem;height:.5rem;border-radius:50%;background:#fff;border:1.5px solid #c5ccc0}
.ap-tk__tl li.done::before{background:#2f7a4f;border-color:#2f7a4f}
.ap-tk__tl li.now::before{background:#fd5100;border-color:#fd5100;box-shadow:0 0 0 .2rem rgba(253,81,0,.18)}
.ap-tk__tl li.now span{font-weight:700;color:#1c4533}
.ap-tk__tl b{font-weight:700;color:#7b8a80;min-width:1.9rem}
.ap-tk__tl li.done span{color:#9aa89e;text-decoration:line-through}
.ap-tk__msg{margin-top:auto;display:flex;gap:.45rem;align-items:flex-start;background:#fff;border-radius:.7rem;padding:.5rem;box-shadow:0 6px 14px -10px rgba(28,69,51,.4)}
.ap-tk__msg i{flex:none;width:1.4rem;height:1.4rem;border-radius:50%;background:#1c4533;color:#fff;font-style:normal;font-weight:700;font-size:.6rem;display:grid;place-items:center}
.ap-tk__msg b{display:block;font-size:.56rem;color:#1c4533}
.ap-tk__msg span{font-size:.58rem;color:#4d6657}
@media(max-width:899px){
  .ap-tk__g{grid-template-columns:1fr;gap:1.5rem}
  .ap-tk__stage{order:2}
  .ap-tk__phone{width:16rem}
}
@media(max-width:560px){.ap-tk__list{grid-template-columns:1fr}}
.ap-tk__next{display:flex;gap:.45rem;align-items:center;background:#fff;border-radius:.6rem;padding:.35rem}
.ap-tk__next img{width:2.4rem;height:2.4rem;border-radius:.4rem;object-fit:cover;flex:none}
.ap-tk__next strong{display:block;font-size:.62rem;color:#1c4533}
.ap-tk__next small{font-size:.5rem;color:#7b8a80}
.ap-tk .ap-tabs{margin-bottom:.6rem}
#theo-doi-trip{scroll-margin-top:4.5rem}