/* vtpa.vn — hướng "The printed annual" (seed 213926105)
   Màu lấy từ chính chủ thể: xanh đoàn xe, vàng vạch kẻ bãi, đỏ logo. */
:root{
  --paper:#edeeec; --ink:#15171a; --muted:#383d43;
  --xanh:#155829;  --xanh-ink:#edeeec;
  --den:#15171a;   --den-ink:#edeeec;
  --vang:#f2c200;  --vang-ink:#15171a;
  --do:#c01a10;    --do-ink:#ffffff;
  --m:20px;                 /* lề ngoài, bằng nhau hai bên */
  --truc:42%;               /* trục dọc của trang */
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-sub:clamp(1.75rem,1.3rem + 1.9vw,2.75rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-title:clamp(2.75rem,8.3vw,8rem);
}
@font-face{font-family:Switzer;src:url(font/switzer-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(font/switzer-b.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Switzer;src:url(font/switzer-c.woff2) format('woff2');font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--step-body)/1.5 Switzer,system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:-.005em;overflow-x:hidden}
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:.95;margin:0}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--do);outline-offset:3px}
::selection{background:var(--vang);color:var(--vang-ink)}
.an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;
  background:var(--do);color:var(--do-ink);text-decoration:none;font-weight:500;
  font-size:var(--step-body);border:0;border-radius:0;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s}
.nut:hover{background:#9e150c}
.nut:active{transform:translateY(2px)}

/* ---------- masthead ---------- */
.dau{position:relative}
.bang{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,24svh);gap:0}
.bang>*{overflow:hidden}
.bang img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.o-xanh{background:var(--xanh)} .o-vang{background:var(--vang)} .o-den{background:var(--den)}
.b-a{grid-column:1/4;grid-row:1/2}
.b-b{grid-column:4/5;grid-row:1/3}
.b-c{grid-column:5/7;grid-row:1/2}
.b-d{grid-column:1/2;grid-row:2/3}
.b-e{grid-column:2/4;grid-row:2/3}
.b-f{grid-column:5/6;grid-row:2/3}
.b-g{grid-column:6/7;grid-row:2/3}

.thanh{position:absolute;top:0;left:0;right:0;display:flex;align-items:stretch;z-index:3}
.hieu{background:#fff;display:flex;align-items:center;padding:14px 20px}
.hieu img{height:34px;width:auto}
.tab{background:var(--vang);display:flex;align-items:center;gap:28px;padding:0 24px;flex:0 1 auto}
.tab a{color:var(--vang-ink);text-decoration:none;font-size:var(--step-small);font-weight:500;
  padding:14px 0;border-bottom:3px solid transparent;transition:border-color .2s}
.tab a:hover{border-bottom-color:var(--den)}
.goi{margin-left:auto;display:flex;align-items:center;background:var(--do);color:var(--do-ink);
  padding:0 20px;text-decoration:none;font-weight:500;font-size:var(--step-small)}
.goi:hover{background:#9e150c}

.tieu{padding:64px var(--m) 72px;display:grid;
  grid-template-columns:calc(var(--truc) - var(--m)) 1fr;column-gap:0;row-gap:28px}
.tieu .dung{grid-column:1;grid-row:1;font-size:var(--step-lead);max-width:28ch;line-height:1.35;padding-right:32px}
.tieu h1{grid-column:2;grid-row:1/3;font-size:var(--step-title);
  letter-spacing:-.06em;line-height:.9;align-self:start}
.tieu .hanh{grid-column:2;grid-row:3;margin-top:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tieu .phu{font-size:var(--step-body);text-decoration:underline;text-underline-offset:4px}
.dong{display:block;overflow:hidden}
.dong>span{display:block}

/* ---------- tấm khẩu hiệu ---------- */
.tam{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin:0 var(--m);padding:8px 0}
.tam>*{min-height:38svh;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.t-a{grid-column:1/9;grid-row:1/3;background:var(--den);color:var(--den-ink)}
.t-a .khau{font-size:var(--step-title);line-height:.86;font-weight:600;letter-spacing:-.05em}
.t-b{grid-column:9/13;grid-row:1/2;background:var(--vang);color:var(--vang-ink);overflow:hidden}
.t-b .so{font-size:var(--step-title);line-height:.86;font-weight:600;letter-spacing:-.05em}
.t-b .nhan{font-size:var(--step-body);margin-top:8px}
.t-c{grid-column:9/13;grid-row:2/3;padding:0;background:var(--xanh)}
.t-c img{width:100%;height:100%;object-fit:cover;min-height:38svh}
.t-d{grid-column:1/13;background:var(--paper);min-height:0;padding:40px 0 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
.t-d p{grid-column:7/13;font-size:var(--step-lead);line-height:1.35;padding:0 40px 0 0}

/* ---------- dịch vụ ---------- */
.dv{background:var(--xanh);color:var(--xanh-ink);padding:0 var(--m) 120px}
.dv .de{min-height:60svh;display:flex;align-items:center}
.dv .de h2{margin-left:var(--truc);font-size:var(--step-head);max-width:12ch}
.hang{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;margin-bottom:110px}
.hang .noi{grid-column:5/10}
.hang h3{font-size:var(--step-sub);margin-bottom:16px}
.hang p{max-width:34ch;font-size:var(--step-body);line-height:1.5}
.hang .minh{grid-column:10/13;justify-self:end}
.hang .minh img{width:100%;height:auto}
.hang:nth-child(2) .minh{max-width:300px;aspect-ratio:4/5}
.hang:nth-child(3) .minh{max-width:300px;aspect-ratio:1/1}
.hang:nth-child(4) .minh{max-width:400px;aspect-ratio:3/2}
.hang:nth-child(5) .minh{max-width:380px;aspect-ratio:3/2}
.hang .minh img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}

/* ---------- quy trình ---------- */
.qt{padding:120px var(--m)}
.qt .tren{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:56px}
.qt h2{grid-column:1/5;font-size:var(--step-head)}
.qt .tren p{grid-column:1/5;font-size:var(--step-body);margin-top:20px;max-width:36ch}
.qt svg{width:100%;height:auto;display:block;margin:8px 0 0}
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.ba h3{font-size:var(--step-lead);font-weight:600;margin-bottom:10px;letter-spacing:-.02em}
.ba p{font-size:var(--step-body);max-width:32ch}
.luat{margin-top:88px;background:var(--vang);color:var(--vang-ink);padding:40px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.luat h3{grid-column:1/5;font-size:var(--step-sub)}
.luat ul{grid-column:6/13;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;font-size:var(--step-body)}
.luat li{display:flex;gap:12px;align-items:baseline}
.luat b{font-weight:600;min-width:62px}

/* ---------- đội xe (việc sống) ---------- */
.dx{background:var(--den);color:var(--den-ink);padding:120px var(--m)}
.dx .khung{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.dx .anh{grid-column:1/6;position:sticky;top:12vh;align-self:start}
.dx .anh img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 58%;transition:opacity .3s}
.dx .anh figcaption{font-size:var(--step-small);color:#b9bec4;margin-top:10px}
.dx .ds{grid-column:7/12}
.dx h2{font-size:var(--step-head);margin-bottom:40px}
.muc{list-style:none;margin:0;padding:0}
.muc li{border:0;margin:0}
.muc button{width:100%;min-height:58px;display:flex;justify-content:space-between;align-items:center;
  gap:16px;background:none;border:0;color:var(--den-ink);font:500 var(--step-lead)/1.2 Switzer,sans-serif;
  text-align:left;padding:14px 0;cursor:pointer;letter-spacing:-.02em;
  transition:color .2s,padding-left .2s}
.muc button:hover{padding-left:10px}
.muc button .ph{font-size:var(--step-small);font-weight:400;color:#b9bec4;white-space:nowrap}
.muc li[aria-current=true] button{color:var(--vang)}
.muc li[aria-current=true] button .ph{color:var(--vang)}
.mota{font-size:var(--step-body);max-width:34ch;color:#e4e7ea;padding:0 0 22px;margin:0;
  display:block;line-height:1.45}
.co-js .mota{display:none}
.co-js .muc li[aria-current=true] .mota{display:block}
.dx .cuoi{grid-column:7/13;margin-top:48px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.dx .cuoi span{font-size:var(--step-body);color:#e4e7ea}

/* ---------- con số ---------- */
.cs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 var(--m);padding:8px 0}
.cs>*{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;
  overflow:hidden;padding:18px}
.cs .lon{font-size:var(--step-title);font-weight:600;letter-spacing:-.05em;line-height:.9;text-align:center}
.cs .dai{font-size:var(--step-head)}
.cs h2{font-size:var(--step-sub);font-weight:600;letter-spacing:-.04em;line-height:1;text-align:left;align-self:flex-start}
.cs .chu{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:var(--step-small)}
.cs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.k1{background:var(--xanh);color:var(--xanh-ink)}
.k2{background:var(--vang);color:var(--vang-ink)}
.k3{background:var(--den);color:var(--den-ink)}
.k4{background:#ffffff;color:var(--ink)}

/* ---------- mạng lưới ---------- */
.ml{padding:120px var(--m)}
.ml .tren{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.ml h2{grid-column:1/5;font-size:var(--step-head)}
.ml .tren p{grid-column:1/5;margin-top:20px;max-width:34ch}
.ml ol{grid-column:6/13;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.ml li{padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ml li+li{box-shadow:none}
.ml .ten{font-size:var(--step-lead);font-weight:500;letter-spacing:-.02em}
.ml .vung{font-size:var(--step-small);color:var(--muted)}
.ml .band{margin-top:80px}
.ml .band img{width:100%;height:46svh;object-fit:cover}

/* ---------- liên hệ ---------- */
.lh{padding:120px var(--m) 110px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.lh .cau{grid-column:1/6;font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.03em}
.lh figure{grid-column:8/10;margin:0}
.lh figure img{width:100%;height:auto;max-width:170px;aspect-ratio:1/1;object-fit:cover}
.lh .cot{grid-column:10/13}
.lh .cot p.hoi{font-size:var(--step-body);font-weight:500;margin-bottom:20px}
.lh .cot a{display:block;font-size:var(--step-body);margin-bottom:10px;text-underline-offset:4px}
.lh .cot .nho{font-size:var(--step-small);color:var(--muted);margin-top:14px;line-height:1.5}

/* ---------- chân trang ---------- */
footer{background:var(--xanh);color:var(--xanh-ink);padding:56px var(--m) 40px;
  display:flex;flex-direction:column}
footer .tren{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
footer .ghi{grid-column:1/8;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:var(--step-small);line-height:1.6}
footer .hieu-nho{grid-column:9/11}
footer .hieu-nho img{height:22px;filter:brightness(0) invert(1)}
footer .len{grid-column:12/13;justify-self:end;font-size:var(--step-small);text-underline-offset:4px}
footer .lon-lien{padding-top:120px}
footer .lon-lien a{font-size:var(--step-title);font-weight:600;letter-spacing:-.05em;
  line-height:.92;text-decoration:none;display:inline-block}
footer .lon-lien a:hover{color:var(--vang)}
footer .meta{margin-top:40px;display:flex;justify-content:space-between;gap:20px;
  font-size:var(--step-small);flex-wrap:wrap}

/* ---------- chuyển động ---------- */
.co-js .vao{opacity:0;transform:translateY(24px)}
.hien .vao{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.hien .vao:nth-child(2){transition-delay:.07s}
.hien .vao:nth-child(3){transition-delay:.14s}
.hien .vao:nth-child(4){transition-delay:.21s}
.co-js .dong>span{transform:translateY(105%);transition:transform .9s cubic-bezier(.16,.84,.26,1)}
.chay .dong>span{transform:none}
.chay .dong:nth-child(2)>span{transition-delay:.11s}
.co-js .mo{opacity:0;transition:opacity .7s ease .5s}
.chay .mo{opacity:1}
.troi{animation:troi 26s ease-in-out infinite alternate}
@keyframes troi{from{transform:scale(1)}to{transform:scale(1.07)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .vao,.mo{opacity:1;transform:none}
  .dong>span{transform:none}
}

/* ---------- điện thoại ---------- */
@media (max-width:900px){
  :root{--m:16px}
  .bang{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,19svh)}
  .b-a{grid-column:1/3;grid-row:1/2}.b-b{grid-column:3/4;grid-row:1/2}
  .b-c{grid-column:1/2;grid-row:2/3}.b-d{grid-column:2/3;grid-row:2/3}
  .b-e{grid-column:3/4;grid-row:2/3}.b-f,.b-g{display:none}
  .thanh .tab{display:none}
  .tieu{padding:32px var(--m) 40px;grid-template-columns:1fr;row-gap:18px}
  .tieu h1{grid-column:1;grid-row:1;max-width:100%}
  .tieu .dung{grid-column:1;grid-row:2;max-width:100%;padding-right:0}
  .tieu .hanh{grid-column:1;grid-row:3;margin-top:0}
  .tam{grid-template-columns:repeat(2,1fr);gap:6px}
  .t-a{grid-column:1/3;grid-row:auto;min-height:46svh}

  .t-b{grid-column:1/2;grid-row:auto;aspect-ratio:1/1;min-height:0}

  .t-c{grid-column:2/3;grid-row:auto;aspect-ratio:1/1;min-height:0}
  .t-c img{min-height:0}
  .t-d{grid-column:1/3;padding:24px 0 0}
  .t-d p{grid-column:1/13;padding:0 14px}
  .dv{padding-bottom:72px}
  .dv .de{min-height:46svh}
  .dv .de h2{margin-left:0;max-width:100%}
  .hang{grid-template-columns:1fr;gap:16px;margin-bottom:64px}
  .hang .noi,.hang .minh{grid-column:1/-1}

  .hang .minh{justify-self:stretch}
  .hang:nth-child(2) .minh{max-width:100%}
  .hang:nth-child(3) .minh,.hang:nth-child(4) .minh,.hang:nth-child(5) .minh{max-width:100%}
  .qt{padding:72px var(--m)}
  .qt h2,.qt .tren p{grid-column:1/-1}
  .ba{grid-template-columns:1fr;gap:24px}
  .luat{padding:24px;grid-template-columns:1fr}
  .luat h3,.luat ul{grid-column:1/-1}
  .luat ul{grid-template-columns:1fr}
  .dx{padding:72px var(--m)}
  .dx .khung{grid-template-columns:1fr}
  .dx .anh{position:static;grid-column:1/-1;order:2}
  .dx .anh img{aspect-ratio:3/2}
  .dx .ds{grid-column:1/-1;order:1}

  .dx .cuoi{grid-column:1/-1;order:3}
  .cs{grid-template-columns:repeat(2,1fr);gap:6px}

  .ml{padding:72px var(--m)}
  .ml h2,.ml .tren p,.ml ol{grid-column:1/-1}
  .ml ol{grid-template-columns:1fr;margin-top:28px}
  .ml .band img{height:32svh}
  .lh{padding:72px var(--m);grid-template-columns:1fr}
  .lh .cau{grid-column:1/-1;font-size:clamp(20px,6vw,24px)}
  .lh figure{grid-column:1/-1;margin-top:28px}
  .lh figure img{max-width:120px}
  .lh .cot{grid-column:1/-1;margin-top:20px}
  footer .ghi{grid-column:1/-1;grid-template-columns:1fr;gap:14px}
  footer .hieu-nho,footer .len{grid-column:1/-1;justify-self:start;margin-top:14px}
  footer .lon-lien{padding-top:56px}

  footer .meta{flex-direction:column;gap:8px}
}