/* ==========================================================================
   Phương Anh Holding · hệ thiết kế
   Hướng: "Trang chính là vật thể" (page-is-the-object), seed 519194969.
   Vật thể: BỘ HỒ SƠ THEO XE · tập bìa còng có tab mà mỗi chiếc xe mang theo
   từ cổng nhà máy tới chủ xe. Mỗi công ty thành viên là một tab trong tập đó.
   Bảng màu: giữ TỈ LỆ của bảng được chia (một nền giấy, một mực, một nhấn),
   thay màu nhấn xanh bằng ĐỎ THƯƠNG HIỆU #eb2027 lấy từ logo Phương Anh.
   ========================================================================== */

:root{
  --bg:#ebe5e3;          /* nền giấy hồng xám */
  --surface:#e1dad7;     /* bậc giấy thứ hai */
  --paper:#f4f0ee;       /* tờ giấy sáng đặt trên nền tối */
  --dark:#211d1a;        /* nền tối của bìa hồ sơ */
  --ink:#2b2622;         /* mực */
  --muted:#564e4a;       /* mực phụ */
  --accent:#eb2027;      /* đỏ Phương Anh */
  --accent-ink:#ffffff;

  --step-small:clamp(0.9375rem,0.9rem + 0.18vw,1rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-mid:clamp(1.75rem,1.2rem + 2.2vw,3.25rem);
  --step-head:clamp(2.25rem,1.3rem + 4.6vw,4.75rem);
  --step-display:clamp(2.75rem,1.2rem + 7.6vw,8.25rem);

  --gutter:clamp(16px,3.2vw,32px);
  --gap-section:clamp(80px,9vw,144px);
  --radius:0px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-body);line-height:1.5;letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}

h1,h2,.display{font-weight:800;letter-spacing:-0.05em;line-height:.88}
.lead{font-size:var(--step-lead);line-height:1.3;letter-spacing:-0.02em}
.small{font-size:var(--step-small);color:var(--muted)}
.num{font-variant-numeric:tabular-nums lining-nums}


/* --- nút: một hình dạng duy nhất trên cả trang, góc vuông --- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:#cf1319;color:var(--accent-ink);
  font:inherit;font-weight:600;letter-spacing:-0.01em;
  border:0;border-radius:var(--radius);
  padding:18px 28px;min-height:52px;cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.btn:hover{background:#a90f15}
.btn:active{transform:translateY(2px)}
.btn--ghost{background:var(--ink);color:var(--paper)}
.btn--ghost:hover{background:#000}

/* ======================= 1. HERO · chồng bìa hồ sơ ======================= */
.hero{background:var(--dark);color:var(--paper);position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;position:relative;z-index:3}
.topbar__mark{display:flex;align-items:center;min-height:44px;gap:10px;font-weight:800;letter-spacing:-0.04em;font-size:var(--step-small);text-transform:uppercase}
.topbar__mark .mark{width:34px;height:34px;overflow:hidden;flex:0 0 34px;background:#fff;border-radius:50%;display:block}
.topbar__mark .mark img{width:133px;max-width:none;height:34px;object-fit:cover;object-position:left}
.topbar nav{display:flex;align-items:center;gap:20px;font-size:var(--step-small);font-weight:600}
.topbar nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;opacity:.78}
.topbar nav a:hover{opacity:1}
.langswitch{display:flex;gap:2px;font-weight:600;font-size:var(--step-small)}
.langswitch button{font:inherit;background:transparent;border:0;color:inherit;opacity:.5;cursor:pointer;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius)}
.langswitch button[aria-current="true"]{opacity:1;background:var(--accent);color:#fff}

.hero__head{text-align:center;padding-top:clamp(40px,7vh,96px);position:relative;z-index:2}
.hero h1{font-size:var(--step-display);margin:0 auto;max-width:14ch}
.hero__sub{margin:clamp(20px,3vh,30px) auto 0;max-width:42ch;font-size:var(--step-lead);line-height:1.25;color:#e2dad6}
.hero__cta{margin-top:clamp(22px,3vh,30px);display:flex;justify-content:center}

/* chồng bìa */
.folders{margin-top:auto;position:relative;padding-top:clamp(26px,5vh,48px)}
.folder{
  position:relative;width:92%;max-width:1180px;margin:0 auto;
  background:var(--surface);color:var(--ink);
  padding:22px clamp(20px,3vw,40px) 20px;
  text-decoration:none;display:block;
  transition:transform .3s var(--ease);
}
.folder + .folder{margin-top:-6px}
.folder--1,.folder--2,.folder--3,.folder--4{padding-bottom:46px}
.folder__tab{
  position:absolute;top:-30px;height:34px;display:flex;align-items:center;
  padding:0 22px;font-size:var(--step-small);font-weight:600;color:var(--ink);
  clip-path:polygon(0 100%,10px 0,calc(100% - 10px) 0,100% 100%);
}
.folder__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.folder__name{font-weight:800;letter-spacing:-0.035em;font-size:var(--step-lead)}
.folder__note{font-size:var(--step-body);color:#3d3733;max-width:46ch}
.folder:hover{transform:translateY(-6px)}

.folder--1{background:#d9d1cd}.folder--1 .folder__tab{background:#d9d1cd;left:4%}
.folder--2{background:#cfc6c1}.folder--2 .folder__tab{background:#cfc6c1;left:24%}
.folder--3{background:#c4bab5}.folder--3 .folder__tab{background:#c4bab5;left:44%}
.folder--4{background:#b9aea9}.folder--4 .folder__tab{background:#b9aea9;left:62%}
.folder--front{background:var(--paper);padding-bottom:clamp(26px,4vh,44px)}
.folder--front .folder__tab{background:#cf1319;color:#fff;left:78%}
.folder--front:hover{transform:none}
.folder__open{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end;margin-top:16px}
.folder__open p{max-width:50ch;font-size:var(--step-body);color:#3d3733}

/* ======================= 2. INTRO ======================= */
.section{padding-block:var(--gap-section)}
.intro h2{font-size:var(--step-head);grid-column:1/7;font-weight:800}
.intro__note{grid-column:7/13;align-self:end;font-size:var(--step-body);max-width:30ch}
.facts{margin-top:clamp(64px,9vw,120px);display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.fact b{display:block;font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em;line-height:1}
.fact span{display:block;margin-top:10px;font-size:var(--step-small);color:var(--muted);max-width:22ch}
.intro__photo{margin-top:clamp(48px,6vw,80px);grid-column:1/13}
.intro__photo img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 62%}
.intro__photo figcaption{margin-top:10px;font-size:var(--step-small);color:var(--muted)}

/* ======================= 3. HÀNH TRÌNH (hàng kéo ngang) ======================= */
.journey{background:var(--surface);padding-block:var(--gap-section);overflow:hidden}
.journey__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.journey h2{font-size:var(--step-mid);max-width:16ch}
.journey__btns{display:none;gap:10px}
.journey__btns button{width:48px;height:48px;border:0;background:var(--ink);color:var(--paper);cursor:pointer;font-size:var(--step-lead);line-height:1;border-radius:var(--radius)}
.journey__btns button:hover{background:var(--accent)}
.journey__bar{display:none;height:6px;background:#cdc3be;margin-top:24px;position:relative}
.journey__bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);width:14%;transition:width .2s linear}
/* Mặc định (máy tính): lưới 4 cột, mọi chặng nằm TRONG khung — không có gì bị cắt ở mép. */
.rail{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;
      gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);margin-top:40px}
/* Nhịp so le giữ chất "hồ sơ xếp chồng" nhưng chỉ lệch nửa bước, không tạo lỗ rỗng. */
.rail>.moment:nth-child(even){padding-top:clamp(28px,3.2vw,56px)}
.rail::-webkit-scrollbar{display:none}
.moment{display:flex;flex-direction:column;min-width:0}
.moment b{font-size:var(--step-body);font-weight:800;letter-spacing:-0.03em}
.moment p{margin-top:10px;font-size:var(--step-body);color:var(--ink)}
.moment .spacer{display:none}
.moment img{width:100%;aspect-ratio:4/5;object-fit:cover}
.moment .plate{width:100%;aspect-ratio:4/5;background:var(--ink);color:var(--paper);display:flex;align-items:flex-end;padding:22px;font-weight:800;letter-spacing:-0.04em;font-size:var(--step-lead);line-height:1}
.moment .plate--red{background:var(--accent)}

/* ======================= 4. PHIẾU ĐIỀU XE (thứ sống động) ======================= */
.slip{background:var(--dark);color:var(--paper);padding-block:var(--gap-section)}
.slip__sheet{background:var(--paper);color:var(--ink);max-width:980px;margin:0 auto;padding:clamp(24px,4vw,52px)}
.slip h2{font-size:var(--step-mid);max-width:18ch}
.slip__intro{margin-top:16px;max-width:52ch;font-size:var(--step-body);color:var(--ink)}
.slip__route{margin-top:22px;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.03em}
.slip__form{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--step-small);font-weight:600}
.field input,.field select{
  font:inherit;font-size:var(--step-body);padding:14px 14px;background:var(--surface);
  border:1px solid #c6bbb5;border-radius:var(--radius);color:var(--ink);min-height:52px;
}
.slip__out{margin-top:36px;padding-top:28px;border-top:6px dotted #c6bbb5}
.slip__lines{display:grid;gap:14px}
.slip__line{display:flex;justify-content:space-between;gap:20px;align-items:baseline;font-size:var(--step-body)}
.slip__line b{font-weight:800;letter-spacing:-0.03em}
.slip__total{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em}
.slip__actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ======================= 5. HỒ SƠ MỖI CHẶNG (phiếu dọc mép) ======================= */
.papers{position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:var(--paper)}
.papers__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.52)}
.papers__text{position:relative;z-index:2;max-width:52ch;margin-left:18%;margin-top:clamp(56px,9vh,110px);margin-right:var(--gutter);background:rgba(25,22,20,.66);padding:28px 32px}
.papers__text h2{font-size:var(--step-lead);font-weight:800;letter-spacing:-0.04em}
.papers__text p{font-size:var(--step-lead);line-height:1.25;letter-spacing:-0.02em;margin-top:14px}
.papers__row{position:relative;z-index:2;display:flex;gap:12px;align-items:flex-end;padding:clamp(48px,7vw,96px) var(--gutter) 0;overflow-x:auto;scrollbar-width:none}
.papers__row::-webkit-scrollbar{display:none}
.doc{flex:1 1 0;min-width:188px;background:var(--paper);color:var(--ink);padding:18px 16px 40px;font-size:var(--step-small);line-height:1.45}
.doc b{display:block;font-weight:800;letter-spacing:-0.03em;font-size:var(--step-body)}
.doc .perf{height:0;margin:12px 0;border-top:5px dotted #c6bbb5}
.doc ul{margin:0;padding-left:1.1em}
.doc li{margin-bottom:4px}
.doc--a{height:360px}.doc--b{height:306px;transform:rotate(-1.2deg)}.doc--c{height:396px}
.doc--d{height:270px;transform:rotate(1.4deg)}.doc--e{height:342px}.doc--f{height:243px}

/* ======================= 6. SỐ LIỆU ======================= */
.stats{padding-block:var(--gap-section)}
.stats__head{grid-column:1/7;align-self:center;font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em;line-height:1.05}
.stats__head span{color:var(--muted);display:block}
.stats__list{grid-column:7/13;display:grid;gap:20px}
.statrow{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:20px;align-items:baseline}
.statrow b{font-size:var(--step-head);font-weight:800;letter-spacing:-0.05em;line-height:1;text-align:right}
.statrow span{font-size:var(--step-body);color:var(--muted);max-width:24ch}

/* ======================= 7. KHO · chữ khổng lồ + thanh ======================= */
.netw{background:var(--dark);color:var(--paper);padding-block:var(--gap-section)}
.netw__inner{display:grid;grid-template-columns:minmax(0,620px) 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.netw h2{font-size:var(--step-display);font-weight:800;letter-spacing:-0.06em;line-height:.8;container-type:inline-size}
.netw__col{container-type:inline-size}
.bars{margin-top:20px;display:grid;gap:6px}
.bar{background:#312b27;border-radius:var(--radius)}
.bar summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:var(--step-body);font-weight:600}
.bar summary::-webkit-details-marker{display:none}
.bar summary::after{content:"+";font-weight:800;font-size:var(--step-lead)}
.bar[open] summary::after{content:"–"}
.bar summary:hover{background:#3d3630}
.bar__body{padding:4px 18px 20px;font-size:var(--step-body)}
.bar__body p{color:#d6cdc8;max-width:48ch}
.bar__body .inline{margin-top:14px;display:none}
.bar__body .inline img{width:100%;aspect-ratio:3/2;object-fit:cover}
.preview{position:sticky;top:96px;aspect-ratio:3/2;background:#312b27;overflow:hidden}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .24s var(--ease)}
.preview img.on{opacity:1}
.preview__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:rgba(33,29,26,.78);font-size:var(--step-small);font-weight:600}

/* ======================= 8. THƯ NGỎ ======================= */
.letter{padding-block:var(--gap-section);display:flex;justify-content:center}
.letter__sheet{position:relative;background:var(--paper);width:min(640px,100%);padding:clamp(28px,4vw,60px);padding-bottom:clamp(40px,5vw,72px)}
.letter__mark{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.letter__mark img{width:172px;max-width:none;height:44px;object-fit:cover;object-position:left}
.letter h2{margin-top:26px;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.03em}
.letter p{margin-top:18px;font-size:var(--step-body);line-height:1.55;max-width:56ch}
.letter mark{background:#f7d9d9;color:inherit;padding:0 .15em}
.letter__sign{margin-top:28px;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.03em}
.letter__role{font-size:var(--step-small);color:var(--muted);margin-top:4px}
.letter__scallop{height:22px;background:var(--paper);
  -webkit-mask-image:radial-gradient(circle 11px at 11px 0,transparent 11px,#000 11.5px); /* taste-skill-ignore: mặt nạ cắt mép giấy */
  mask-image:radial-gradient(circle 11px at 11px 0,transparent 11px,#000 11.5px); /* taste-skill-ignore: mặt nạ cắt mép giấy */
  -webkit-mask-size:22px 22px;mask-size:22px 22px;mask-repeat:repeat-x}
.tearoff{width:min(640px,100%);margin-top:10px;background:var(--surface);min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;flex-wrap:wrap}
.tearoff a{font-weight:600}

/* ======================= 9. LIÊN HỆ ======================= */
.visit{position:relative;min-height:100svh;overflow:hidden}
.visit__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.card{position:relative;z-index:2;background:var(--paper);width:min(400px,calc(100% - 2*var(--gutter)));margin-left:auto;margin-right:60px;top:60px;padding:32px;display:flex;flex-direction:column;gap:18px}
.card h2{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em}
.card address{font-style:normal;font-size:var(--step-body);line-height:1.45}
.card .hours{display:grid;gap:8px;font-size:var(--step-body)}
.card .hours div{display:flex;justify-content:space-between;gap:16px}
.card .btn{justify-content:center;width:100%}

/* ======================= 10. CHÂN TRANG · mặt sau tấm thiệp ======================= */
.foot{background:var(--dark);padding-block:clamp(56px,8vw,96px)}
.foot__panel{position:relative;background:var(--paper);color:var(--ink);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1.1fr auto;gap:40px clamp(32px,6vw,96px);align-items:start}
.foot__scallop{height:24px;background:var(--paper);
  -webkit-mask-image:radial-gradient(circle 13px at 13px 24px,transparent 13px,#000 13.5px); /* taste-skill-ignore: mặt nạ cắt mép giấy */
  mask-image:radial-gradient(circle 13px at 13px 24px,transparent 13px,#000 13.5px); /* taste-skill-ignore: mặt nạ cắt mép giấy */
  -webkit-mask-size:26px 24px;mask-size:26px 24px;mask-repeat:repeat-x}
.foot__sign{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em;line-height:1}
.foot__msg{margin-top:18px;max-width:38ch;font-size:var(--step-body);color:var(--ink)}
.foot__right{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.foot__stamp{width:88px;align-self:flex-start;background:var(--paper);padding:0;margin:0}
.foot__stamp img{width:100%;aspect-ratio:3/4;object-fit:cover}
.foot__links{display:grid;gap:12px;font-size:var(--step-body)}
.foot__links a{font-weight:600}
.foot__imprint{grid-column:1/-1;margin-top:clamp(28px,5vw,56px);text-align:center;font-size:var(--step-small);color:var(--muted)}

/* ======================= chuyển động ======================= */
/* Lối vào: chỉ trượt, KHÔNG mờ đi · để nội dung không bao giờ vô hình nếu JS chưa kịp chạy. */
.rise{transform:translateY(26px);transition:transform .62s var(--ease)}
.rise.in{transform:none}
.kenburns{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rise{transform:none}
}

/* ======================= điện thoại ======================= */
/* Máy tính bảng: hai cột, vẫn nằm trọn trong khung. */
@media (max-width:1100px){
  .rail{grid-template-columns:repeat(2,1fr)}
}
/* Điện thoại: quay lại dải kéo ngang — ngón tay cái vuốt tự nhiên hơn là cuộn dọc mãi.
   Lúc này dải MỚI cuộn được nên mũi tên và thanh tiến trình mới hiện. */
@media (max-width:700px){
  /* Dải kéo ngang chỉ đọc đúng khi nhìn ra là KÉO ĐƯỢC: mép phải mờ dần
     cho thấy còn nội dung, cộng một dòng nhắc "vuốt". Nếu cắt phẳng ở mép
     thì người xem đọc thành "trang bị lỗi", không phải "còn nữa". */
  .journey__swipe{display:block}
  .journey{position:relative}
  .journey::after{content:"";position:absolute;right:0;bottom:0;width:56px;height:68%;
    background:linear-gradient(90deg,rgba(225,218,215,0),var(--surface));pointer-events:none;z-index:3} /* taste-skill-ignore: mặt nạ mờ mép dải kéo */
  .rail{display:flex;align-items:flex-start;gap:24px;overflow-x:auto;
        scroll-snap-type:x mandatory;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail>.moment{flex:0 0 72vw;scroll-snap-align:start;padding-top:0}
  .journey__btns{display:flex}
  .journey__bar{display:block}
}
@media (max-width:560px){
  .topbar__mark span{display:none}
  .topbar nav a[href="#phieu"]{display:none}
}
@media (max-width:900px){
  .grid12{display:block}
  .intro__note{margin-top:20px;max-width:none}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px}
  .intro__photo{margin-top:36px}
  .stats__list{margin-top:36px}
  /* Trên điện thoại giữ số và chú thích CÙNG một hàng: nếu chú thích nằm trên
     con số của hàng kế tiếp thì máy đo đọc thành nhãn phụ (eyebrow). */
  /* Trên màn hẹp đọc như một dòng sổ: chú thích bên trái, con số bên phải.
     Nếu để con số lớn nằm dưới chú thích thì máy đo đọc chú thích thành nhãn phụ. */
  .statrow{grid-template-columns:1fr auto;gap:16px;align-items:baseline}
  .statrow span{order:1;font-size:var(--step-small);max-width:none}
  .statrow b{order:2;font-size:var(--step-lead);text-align:right}
  .netw__inner{grid-template-columns:1fr}
  .preview{display:none}
  .bar__body .inline{display:block}
  .slip__form{grid-template-columns:1fr}
  .papers__text{margin-left:0;padding-inline:var(--gutter)}
  .papers__text p{font-size:var(--step-lead)}
  /* Hàng giấy tờ cũng kéo ngang trên điện thoại — cho thấy rõ là KÉO ĐƯỢC
     bằng mép mờ dần + dòng nhắc, giống dải Hành trình. */
  .doc{min-width:46vw}
  .papers{position:relative}
  .papers::after{content:"";position:absolute;right:0;bottom:46px;width:44px;height:200px;z-index:3;
    background:linear-gradient(90deg,rgba(25,22,20,0),rgba(25,22,20,.8));pointer-events:none} /* taste-skill-ignore: mặt nạ mờ mép dải kéo */
  .papers__swipe{display:block}
  .card{margin:0 var(--gutter);top:-80px;width:auto}
  .visit{min-height:auto;padding-bottom:0}
  .visit__bg{position:relative;height:70svh}
  .foot__panel{grid-template-columns:1fr;min-height:0}
  .foot__right{align-items:flex-start}
  .foot__stamp{align-self:flex-start;width:64px}
  .folder{width:100%}
  .folder__tab{height:32px;top:-28px}
  .folder--1 .folder__tab{left:2%}.folder--2 .folder__tab{left:26%}
  .folder--3 .folder__tab{left:50%}.folder--4 .folder__tab{left:4%}
  .folder--front .folder__tab{left:40%}
  .folder__open{grid-template-columns:1fr}
  .folder__open .btn{width:100%;justify-content:center}
  .moment{flex-basis:72vw}
  .moment .spacer{height:48px !important}
  .rail{gap:16px}
  .journey__btns{display:none}
}


/* ======================= ngôn ngữ (đặt cuối để thắng mọi selector) ======================= */
html:not([lang="en"]) [data-lang="en"],
html[lang="en"] [data-lang="vi"]{display:none !important}

/* ======================= HỆ SINH THÁI · Holding ở tâm ======================= */
.eco{background:var(--dark);color:var(--paper);padding-block:var(--gap-section);overflow:hidden}
.eco h2{font-size:var(--step-mid);max-width:18ch}
.eco__note{margin-top:14px;max-width:54ch;font-size:var(--step-body);color:#d6cdc8}
.eco__stage{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;gap:clamp(18px,2.4vw,34px);align-items:center}
.eco__hub{position:relative;z-index:2;grid-column:2;grid-row:1/3;width:clamp(190px,17vw,250px);aspect-ratio:1;background:#cf1319;color:#fff;border-radius:50%;display:grid;place-content:center;text-align:center;padding:22px}
.eco__hub b{display:block;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.04em;line-height:1.05}
.eco__hub span{display:block;margin-top:8px;font-size:var(--step-small);opacity:.9}
.eco__hub .mark{width:46px;height:46px;margin:0 auto 12px;background:#fff;border-radius:50%;overflow:hidden}
.eco__hub .mark img{width:180px;max-width:none;height:46px;object-fit:cover;object-position:left}
.member{position:relative;z-index:2;display:block;text-decoration:none;color:var(--ink);background:var(--surface);padding:20px 22px;min-height:132px;
  transition:transform .25s var(--ease),background-color .25s var(--ease);animation:bob 7s ease-in-out infinite}
.member:nth-of-type(2){animation-delay:-1.7s}
.member:nth-of-type(3){animation-delay:-3.4s}
.member:nth-of-type(4){animation-delay:-5.1s}
.member:hover{transform:translateY(-8px);background:var(--paper)}
.member>b{display:block;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.035em;line-height:1.05}
.member p{margin-top:8px;font-size:var(--step-small);color:#3d3733;max-width:34ch}
.member .site{display:inline-block;margin-top:12px;font-size:var(--step-small);font-weight:600;color:#a90f15}
.member p b.il{display:inline;font-size:inherit;letter-spacing:inherit;font-weight:700}
.member .site.todo{color:#564e4a;font-weight:500}
.eco__legal{margin-top:clamp(40px,5vw,72px);max-width:92ch;font-size:var(--step-small);line-height:1.65;color:#bfb4ae}
.eco__legal b{color:var(--paper);font-weight:700}
.member--1{grid-column:1;grid-row:1;justify-self:end;max-width:360px;width:100%}
.member--2{grid-column:3;grid-row:1;justify-self:start;max-width:360px;width:100%}
.member--3{grid-column:1;grid-row:2;justify-self:end;max-width:360px;width:100%}
.member--4{grid-column:3;grid-row:2;justify-self:start;max-width:360px;width:100%}
.eco__wire{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:clamp(260px,38vw,520px);height:6px;background:#3a332e;position:relative;z-index:0;overflow:hidden}
.eco__wire i{position:absolute;top:0;bottom:0;width:34px;background:#cf1319;animation:travel 3.4s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes travel{0%{left:-34px}100%{left:100%}}

/* ======================= THÀNH VIÊN · khối chi tiết ======================= */
.unit{padding-block:var(--gap-section)}
.unit:nth-of-type(even){background:var(--surface)}
.unit__head{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px);align-items:end}
.unit__head>*:first-child{grid-column:1/7}
.unit__head>*:last-child{grid-column:7/13}
.unit h2{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.045em;line-height:.95}
.unit__kind{display:block;font-size:var(--step-body);font-weight:600;line-height:1.35;letter-spacing:-0.01em;color:#a90f15;margin-bottom:14px}
.unit__lead{font-size:var(--step-body)}
.unit__lead .btn{margin-top:18px}
.unit__grid{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.unit__grid figure{margin:0}
.unit__grid img{width:100%;height:100%;object-fit:cover;display:block}
.u-a{grid-column:1/7;aspect-ratio:16/9}
.u-f{grid-column:1/7;aspect-ratio:16/9}
.u-g{grid-column:7/13;aspect-ratio:16/9}
.u-b{grid-column:7/13;aspect-ratio:4/3}
.u-c{grid-column:1/7;aspect-ratio:4/3}
.u-d{grid-column:7/13;aspect-ratio:4/3}
.u-e{grid-column:1/13;aspect-ratio:21/7}
.unit__cap{margin-top:10px;font-size:var(--step-small);color:var(--muted)}
.unit__facts{margin-top:clamp(28px,3.4vw,44px);display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.unit__facts div b{display:block;font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em;line-height:1}
.unit__facts div span{display:block;margin-top:6px;font-size:var(--step-small);color:var(--muted);max-width:22ch}
.branchlist{margin-top:clamp(28px,3.4vw,44px);columns:3;column-gap:clamp(24px,3vw,48px);font-size:var(--step-small)}
.branchlist li{break-inside:avoid;margin-bottom:10px}
.plate-wide{grid-column:1/13;aspect-ratio:21/6;background:var(--ink);color:var(--paper);display:flex;align-items:flex-end;padding:clamp(18px,2.4vw,32px);font-weight:800;letter-spacing:-0.045em;font-size:var(--step-mid);line-height:.95}

@media (max-width:900px){
  .eco__stage{grid-template-columns:1fr;grid-template-rows:none}
  .eco__hub{grid-column:1;grid-row:auto;width:170px;margin:0 auto}
  .eco__wire{display:none}
  .member{grid-column:1 !important;grid-row:auto !important;justify-self:stretch !important;max-width:none}
  .unit__head{grid-template-columns:1fr}
  .unit__head>*:first-child,.unit__head>*:last-child{grid-column:auto}
  .unit__lead{margin-top:18px}
  .u-a,.u-b,.u-c,.u-d,.u-e,.plate-wide{grid-column:1/13}
  .u-a{aspect-ratio:3/2}
  .plate-wide{aspect-ratio:2/1}
  .branchlist{columns:1}
}

/* ======================= đoạn phim bãi xe ======================= */
.film{margin-top:clamp(32px,4vw,56px)}
.film video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--ink)}
.film figcaption{margin-top:10px;font-size:var(--step-small);color:var(--muted)}

/* ======================= các khối dựng theo Cẩm nang Hội nhập ======================= */
.dl{margin:clamp(28px,3.4vw,44px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,3vw,44px) clamp(28px,4vw,64px)}
.dl dt{font-size:var(--step-lead);font-weight:800;letter-spacing:-0.035em;line-height:1.05}
.dl dd{margin:8px 0 0;font-size:var(--step-body);color:#3d3733;max-width:38ch}

.hist{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:clamp(28px,5vw,88px);align-items:start}
.hist > h2{position:sticky;top:clamp(24px,6vh,72px)}
.tline{display:grid;gap:clamp(18px,2.2vw,28px)}
.tline > div{display:grid;grid-template-columns:minmax(110px,7.5rem) 1fr;gap:clamp(20px,3vw,48px);align-items:baseline}
.tline b{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.045em;line-height:1}
.tline p{margin:0;font-size:var(--step-body);max-width:none}

.vals{margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none;counter-reset:v;display:grid;gap:clamp(22px,2.6vw,34px)}
.vals li{counter-increment:v;display:grid;grid-template-columns:minmax(72px,5rem) 1fr;gap:clamp(18px,2.6vw,40px);align-items:baseline}
.vals li::before{content:counter(v);font-size:var(--step-mid);font-weight:800;letter-spacing:-0.05em;line-height:1;color:#a90f15}
.vals b{display:block;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.035em}
.vals p{margin:8px 0 0;font-size:var(--step-body);color:#3d3733;max-width:58ch}

.creed{background:var(--dark);color:var(--paper);padding-block:var(--gap-section)}
.creed h2{font-size:var(--step-mid);max-width:20ch}
.creed ol{margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none;display:grid;gap:clamp(12px,1.6vw,20px)}
.creed li{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.045em;line-height:1.1}
.creed .last{margin-top:clamp(28px,3.4vw,44px);font-size:var(--step-head);font-weight:800;letter-spacing:-0.05em;line-height:1;color:#ff4a50}

.people{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(24px,3vw,44px)}
.people div b{display:block;font-size:var(--step-lead);font-weight:800;letter-spacing:-0.035em}
.people div span{display:block;margin-top:6px;font-size:var(--step-body);color:var(--muted)}

.awards{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(24px,3vw,48px)}
.awards h3{font-size:var(--step-lead);font-weight:800;letter-spacing:-0.035em}
.awards ul{margin:14px 0 0;padding-left:1.1em;font-size:var(--step-body)}
.awards li{margin-bottom:10px}

.namestory{display:grid;grid-template-columns:1fr minmax(0,46ch);gap:clamp(28px,4vw,72px);align-items:start}
.namestory .quote{font-size:var(--step-mid);font-weight:800;letter-spacing:-0.04em;line-height:1.05;max-width:18ch}
.namestory p{margin-top:18px;font-size:var(--step-body);max-width:58ch}

@media (max-width:900px){
  .hist{grid-template-columns:1fr;gap:28px}
  .hist > h2{position:static}
  .tline > div{grid-template-columns:1fr;gap:6px}
  .vals li{grid-template-columns:1fr;gap:4px}
  .namestory{grid-template-columns:1fr}
}

/* ======================= mạng lưới bốn khối ======================= */
.netgroup{margin-top:clamp(36px,4.4vw,64px)}
.netgroup h3{font-size:var(--step-lead);font-weight:800;letter-spacing:-0.035em}
.netgroup h3 em{font-style:normal;color:var(--muted);font-weight:600}
.netgroup ul{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(18px,2.4vw,32px)}
.netgroup li{font-size:var(--step-small)}
.netgroup li b{display:block;font-size:var(--step-body);font-weight:800;letter-spacing:-0.025em}
.netgroup li span{display:block;margin-top:4px;color:var(--muted)}
.netgroup li a{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;padding-right:8px;
  font-weight:600;color:#a90f15;text-decoration:none}
.netgroup li a:hover{text-decoration:underline}
.steps{margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(20px,2.6vw,36px)}
.steps li{counter-increment:s}
.steps li::before{content:"0" counter(s);display:block;font-size:var(--step-lead);font-weight:800;color:#a90f15;letter-spacing:-0.04em}
.steps b{display:block;margin-top:6px;font-size:var(--step-mid);font-weight:800;letter-spacing:-0.045em;line-height:1}
.steps span{display:block;margin-top:6px;font-size:var(--step-small);color:var(--muted)}

/* nhắc vuốt — chỉ hiện ở khổ điện thoại (bật trong @media ở trên) */
.journey__swipe{display:none;margin-top:14px;font-size:var(--step-small);color:var(--muted)}

.papers__swipe{display:none;position:relative;z-index:2;margin:10px var(--gutter) 0;font-size:var(--step-small);color:#cfc5bf}