/* =============================================================================
   petek.vn — site.css   ·  Phuong an C: Split canvas
   -----------------------------------------------------------------------------
   NGUON SU THAT CUA MAU: src/brand-tokens.web.json
   Muon them mau thi sua file token TRUOC, sua file nay SAU. `npm run verify`
   doi chieu tung ma hex trong day voi file token va chan neu co ma la.

   8 mau khoa theo CIP R11 + 1 mau nhan rieng cho giao dien web (--flame).

   LUAT MAU — DOC TRUOC KHI SUA BAT KY DONG NAO:

   --flame (#C2410C) la mau NHAN, dung THUA THOT.
     Duoc: chu tren nen sang (5.18 tren paper, 4.69 tren wash — dat AA)
           nen voi chu trang (5.18 — dat AA)
           vach, gach chan, dau cham, vien tren BAT KY nen nao
     CAM:  lam mau CHU tren nen ink — chi 3.41:1, truot AA.
           Tren nen toi, cam chi duoc xuat hien dang NEN hoac VACH.
     CAM:  cham vao logo duoi moi hinh thuc. Logo monochrome, khoa theo CIP R11.

   --brand (#0E6B78) la mau NEN nut cap 1 — 6.19:1 voi chu trang.
   Chu mau brand tren nen sang -> LUON dung --brand-ink (#0A505A), 9.10:1.
   --line (#DBE1E5) chi la duong ke. 1.32:1 — khong bao gio lam chu.

   HOAT CANH — nguyen tac:
   Class .rise / .wipe / .count do JS GAN VAO, khong viet san trong HTML.
   JS chet hoac bi chan thi noi dung van hien binh thuong, khong an vinh vien.
   Phan tren man hinh dau KHONG cho hoat canh cho — LCP quan trong hon.
   Tieu de hero chi dich chuyen (transform), khong mo dan (opacity), vi
   opacity tu 0 lam tre thoi diem trinh duyet tinh LCP.
   ========================================================================== */

/* Tu host. Font goi tu fonts.googleapis.com la tai nguyen CHAN RENDER.
   Thieu file -> trinh duyet im lang rot ve font he thong, trang van doc duoc.
   Cach lay: tools/get-fonts.md

   Day la BON FILE TINH, moi weight mot file — khong phai font bien thien.
   Vi vay phai khai bon @font-face rieng. Neu khai mot file voi
   font-weight:300 700 nhu font bien thien thi trinh duyet chi nhan mot weight
   va tu keo beo cac weight con lai (faux bold), chu nhin day va be. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/be-vietnam-pro-v12-latin_vietnamese-regular.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/be-vietnam-pro-v12-latin_vietnamese-500.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/be-vietnam-pro-v12-latin_vietnamese-600.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/be-vietnam-pro-v12-latin_vietnamese-700.woff2") format("woff2")}

:root{
  /* 8 mau khoa — CIP R11 */
  --paper:#FFFFFF;
  --wash:#F1F4F6;
  --line:#DBE1E5;
  --ink:#16191C;
  --ink-2:#4B545B;
  --brand:#0E6B78;
  --brand-ink:#0A505A;
  --brand-tint:#DCEDEF;
  /* rieng giao dien web — KHONG thuoc he logo */
  --flame:#C2410C;

  /* lop phu: alpha cua chinh --ink / --paper, khong sinh mau moi */
  --hair:rgba(22,25,28,.12);
  --hair-dark:rgba(255,255,255,.16);
  --veil:rgba(22,25,28,.04);

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:44px; --s8:64px; --s9:88px;  --s10:116px;

  --container:1280px;
  --measure:62ch;
  --radius:2px;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-weight:400;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:2px}
::selection{background:var(--brand-tint);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:var(--s3) var(--s4);z-index:100}
.skip:focus{left:0}

/* ---------------------------------------------------------------- khung */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s6)}
.section{padding:var(--s10) 0;position:relative}
.section--tight{padding:var(--s9) 0}
.section--wash{background:var(--wash)}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark p{color:var(--brand-tint)}
.section--dark a{color:var(--paper)}
.section--flat{padding:0}
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ------------------------------------------------------------------ chu */
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.02em}
.display{font-size:clamp(40px,5.6vw,80px);font-weight:700;letter-spacing:-.042em;
  line-height:1.0;max-width:13ch}
.display em{font-style:normal;color:var(--brand-ink)}
.section--dark .display em{color:var(--brand-tint)}
h2,.h2{font-size:clamp(28px,4.2vw,52px);font-weight:600;letter-spacing:-.032em;line-height:1.06}
h3,.h3{font-size:clamp(19px,1.5vw,23px);font-weight:600;letter-spacing:-.015em}
p{margin:0 0 var(--s4);max-width:var(--measure)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-2);max-width:52ch}
.section--dark .lede{color:var(--brand-tint)}
.small{font-size:14px;color:var(--ink-2);line-height:1.6}

/* Eyebrow co dau cham cam dan dau — mot trong nhung cho cam xuat hien */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 var(--s5);display:flex;align-items:center;gap:var(--s3)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--flame);flex:0 0 auto}
.section--dark .eyebrow{color:var(--brand-tint)}

/* -------------------------------------------------------------- nut 3 cap */
.btn{display:inline-flex;align-items:center;gap:var(--s3);font:inherit;font-size:16px;
  font-weight:600;border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  padding:18px 32px;line-height:1.2;position:relative;overflow:hidden;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn--1{background:var(--brand);color:var(--paper)}
.btn--1:hover{background:var(--brand-ink);transform:translateY(-1px)}
/* Vach cam chay ngang chan nut cap 1 khi hover */
.btn--1::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;
  background:var(--flame);transition:right .32s var(--ease-out)}
.btn--1:hover::after{right:0}
.btn--2{background:none;color:var(--brand-ink);padding:18px 2px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.btn--2:hover{text-decoration-color:var(--flame);text-decoration-thickness:2px}
.btn--3{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:17px 30px}
.btn--3:hover{box-shadow:inset 0 0 0 1px var(--flame)}
.section--dark .btn--1{background:var(--paper);color:var(--ink)}
.section--dark .btn--2{color:var(--paper)}
.section--dark .btn--3{color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair-dark)}
.section--dark .btn--3:hover{box-shadow:inset 0 0 0 1px var(--flame)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;margin-top:var(--s7)}

/* --------------------------------------------------- nut sang Terra Nova */
/* Yeu cau la "chop chop". KHONG lam nhap nhay bat/tat:
   WCAG 2.3.1 cam noi dung nhap nhay qua 3 lan mot giay (nguy co dong kinh),
   va nhap nhay cung nhin re tien. Thay bang vong sang toa ra ~0,45 Hz —
   mat van bat duoc chuyen dong o ngoai tam nhin, ma khong giat.
   Khoi @media prefers-reduced-motion o cuoi file tat toan bo animation. */
.btn--tn{background:var(--ink);color:var(--paper);padding:18px 30px;position:relative;
  isolation:isolate;box-shadow:inset 0 0 0 1px var(--ink)}
.btn--tn:hover{background:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand-ink);
  transform:translateY(-1px)}
/* Vong sang toa ra tu vien nut */
.btn--tn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius);
  box-shadow:0 0 0 0 rgba(194,65,12,.55);animation:tnpulse 2.2s var(--ease-out) infinite}
@keyframes tnpulse{
  0%{box-shadow:0 0 0 0 rgba(194,65,12,.55)}
  70%{box-shadow:0 0 0 14px rgba(194,65,12,0)}
  100%{box-shadow:0 0 0 0 rgba(194,65,12,0)}}
/* Cham cam nhay theo — cung nhip, lech pha mot chut cho co lop */
.btn--tn .dot{width:8px;height:8px;border-radius:50%;background:var(--flame);
  flex:0 0 auto;animation:tndot 2.2s var(--ease) infinite}
@keyframes tndot{0%,100%{opacity:1;transform:scale(1)}
  45%{opacity:.35;transform:scale(.7)}}
/* Mui ten di ra khi ro chuot — bao day la link RA NGOAI site */
.btn--tn .arr{transition:transform .28s var(--ease-out);flex:0 0 auto}
.btn--tn:hover .arr{transform:translate(3px,-3px)}
.section--dark .btn--tn{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--paper)}
.section--dark .btn--tn:hover{background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-tint)}

/* Khoi thuong hieu trong nhom: co vach cam doc ben trai cho ra mot mang rieng */
.endorse{border-left:3px solid var(--flame);padding-left:var(--s6)}

.badge{display:inline-block;background:var(--brand-tint);color:var(--brand-ink);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:2px}
.badge--flame{background:var(--flame);color:var(--paper)}

/* ------------------------------------------------------------------- nav */
body>header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--hair);
  transition:min-height .3s var(--ease)}
body>header.site .bar{display:flex;align-items:center;gap:var(--s6);min-height:84px;
  max-width:var(--container);margin:0 auto;padding:0 var(--s6);
  transition:min-height .3s var(--ease)}
body>header.site.shrunk .bar{min-height:64px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);
  flex:0 0 auto;padding:var(--s3) 0}
/* CIP R11: toi thieu 96px cho wordmark day du. Logo KHONG duoc to mau. */
.brand img{width:132px;min-width:96px;height:auto;transition:width .3s var(--ease)}
body>header.site.shrunk .brand img{width:112px}
.site-foot .brand img{width:150px}

.menu{display:flex;align-items:center;gap:var(--s6);margin-left:auto;list-style:none;
  padding:0;margin-block:0}
.menu>li{position:relative}

/* MOI PHAN TU TRONG .menu PHAI CO MAT TRONG SELECTOR NAY.
   Nut xo xuong tung la <button> khong class -> khong khop selector nao ->
   trinh duyet ve dang mac dinh: hop xam co vien, font he thong. Tren nav no
   lac hoan toan so voi cac muc con lai. Nay button mang class .navtrigger. */
.menu a,.menu .navlink,.menu .planned,.menu .navtrigger{font-size:14.5px;font-weight:500;color:var(--ink);
  text-decoration:none;padding:var(--s2) 0;display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;border-radius:0;font-family:inherit;letter-spacing:-.005em;
  cursor:pointer;position:relative;-webkit-appearance:none;appearance:none;
  transition:color .2s var(--ease)}

/* Gach chan cam chay ra tu trai — nhan dien cua thuong hieu, ap cho CA link
   VA nut xo xuong. Truoc day chi `.menu a::after` nen "Dich vu" tro tro. */
.menu a::after,.menu .navtrigger::after{content:"";position:absolute;left:0;right:100%;
  bottom:0;height:2px;background:var(--flame);transition:right .3s var(--ease-out)}
.menu a:hover::after,.menu .navtrigger:hover::after,
.menu .navtrigger[aria-expanded="true"]::after{right:0}
.menu a:hover,.menu .navtrigger:hover{color:var(--brand-ink)}

/* Mui ten xo xuong — bao cho nguoi doc biet muc nay con muc con */
.caret{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease),border-color .2s var(--ease);flex:0 0 auto}
.navtrigger:hover .caret{border-color:var(--flame)}
.navtrigger[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px)}

/* Trang dang mo: gach chan cam DUNG YEN, khong doi ro chuot */
.menu .here{color:var(--brand-ink);font-weight:600}
.menu .here::after{right:0}

/* Muc chua co trang: khong phai link hong, la muc chua mo. Noi ro bang chu. */
.menu .planned{color:var(--ink-2);cursor:default}
.menu .planned::after{display:none}
.planned__tag{font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--flame);box-shadow:inset 0 0 0 1px currentColor;border-radius:2px;
  padding:3px 5px;flex:0 0 auto}

.menu .lang{padding-left:var(--s6);font-weight:600;color:var(--brand-ink);
  box-shadow:inset 1px 0 0 var(--hair)}

.subpanel{position:absolute;top:calc(100% + 14px);left:0;min-width:290px;
  max-width:calc(100vw - 32px);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 18px 50px rgba(22,25,28,.13);padding:var(--s3);
  list-style:none;margin:0;visibility:hidden;opacity:0;transform:translateY(-8px) scale(.99);
  transition:opacity .18s var(--ease),transform .18s var(--ease-out)}
.subpanel.flip{left:auto;right:0}
.subpanel.open{visibility:visible;opacity:1;transform:none}
.subpanel li a{display:block;padding:var(--s3) var(--s4);border-radius:2px;font-weight:400;
  font-size:15px;border-left:2px solid transparent;transition:border-color .18s,background .18s}
.subpanel li a::after{display:none}
.subpanel li a:hover{background:var(--wash);border-left-color:var(--flame)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--radius);padding:10px var(--s4);font:inherit;font-size:14px;cursor:pointer}

/* ------------------------------- MO DAU TRANG TRONG (moi trang tru trang chu)
   `.hero` duoc dung o CA 12 trang trong nhung TRUOC DAY KHONG HE CO TRONG CSS.
   No khong mang class `.section` nen padding bang 0: tieu de trang dinh sat
   day thanh dieu huong dinh, khong co khoang tho nao. Loi nay song duoc lau
   vi trang van doc duoc — chi la nhin nhu chua lam xong.
   Nay `npm run verify` bao ngay khi mot class co trong HTML ma khong co
   trong CSS. */
.hero{padding:var(--s9) 0 var(--s8);position:relative}
.hero .container{position:relative}
/* Vach cam ngan ben trai, dat cung mach voi cham cam cua .eyebrow */
.hero .eyebrow{margin-bottom:var(--s6)}
.hero .display{max-width:16ch}
.hero .lede{margin-top:var(--s6);max-width:56ch}
.hero+.section{padding-top:0}

/* ================================================= HERO: SPLIT CANVAS ==== */
.stage{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(88vh,860px)}
/* container-type: co font tieu de hero do theo CHIEU RONG COT, khong theo vw.
   LY DO: cot trai chi chiem ~42% man hinh. Font khai theo vw (5.6vw) khong
   he biet dieu do, nen tren MOI man laptop 1280-1600 dong dau bi xuong hang,
   pha vo bo cuc ba dong da dung y. Chi tu ~1710px tro len moi vua.
   Voi cqw thi font do theo dung cai o chua no — khong the tinh sai duoc nua. */
.stage__l{padding:var(--s9) var(--s8) var(--s8) max(var(--s8),calc((100vw - var(--container))/2 + var(--s6)));
  display:flex;flex-direction:column;justify-content:center;container-type:inline-size}
/* 13.5cqw: dong dai nhat rong 6.95 lan co chu, nen tran an toan la 14.4cqw.
   Lay 13.5 de con bien. Doi loi tieu de hero thi do lai truoc khi tang so nay. */
.stage__l .display{font-size:clamp(38px,13.5cqw,80px)}
.stage__r{background:var(--ink);color:var(--paper);padding:var(--s9) var(--s8) var(--s7);
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.stage__r::after{content:"";position:absolute;left:-30%;top:-25%;width:130%;height:85%;
  background:radial-gradient(closest-side,rgba(14,107,120,.55),transparent 70%);pointer-events:none}
/* Vach cam doc chia doi hai mang — chi tiet cam thu hai */
.stage__r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--flame);z-index:2}
.stage__l .lede{margin-top:var(--s6)}

/* Mac dinh la mau cho NEN SANG. Mang ink ghi de ben duoi.
   Neu de mac dinh la --brand-tint thi dat nhan nay len nen trang se tang hinh. */
.rlabel{position:relative;z-index:1;font:600 11px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s6);
  display:flex;align-items:center;gap:var(--s3)}
.stage__r .rlabel,.section--dark .rlabel{color:var(--brand-tint)}
.rlabel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flame)}

.rfigs{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0}
.rfigs>div{padding:var(--s6) var(--s5);box-shadow:inset 0 0 0 1px var(--hair-dark);
  transition:background .3s var(--ease)}
.rfigs>div:hover{background:rgba(255,255,255,.04)}
.rfigs dt{font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--paper)}
.rfigs dd{margin:var(--s3) 0 0;font-size:13.5px;color:var(--brand-tint);line-height:1.5}

/* ------------------------------------------- hang anh nua-nua (phuong an C) */
.rowsplit{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.rowsplit__txt{padding:var(--s8) var(--s7);display:flex;flex-direction:column;
  justify-content:center;background:var(--wash)}
.rowsplit--flip .rowsplit__txt{order:-1}

/* --------------------------------------------------- o cho anh chua co */
.figure{position:relative;overflow:hidden;background:var(--wash)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--wide{aspect-ratio:16/7}
.figure--43{aspect-ratio:4/3}
.figure--tall{aspect-ratio:3/4}
/* Dai anh full-bleed: cao theo viewport nhung khong bao gio qua cao tren man rong */
.figure--band{aspect-ratio:2.29/1;max-height:74vh}
.figure--band img{width:100%;height:100%;object-fit:cover}
/* Anh trong hang nua-nua phai cao bang cot chu ben canh */
.rowsplit>.figure{height:100%;min-height:100%}
.rowsplit>.figure img{height:100%}
.figure--empty{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--wash),var(--wash) 14px,var(--paper) 14px,var(--paper) 28px);
  box-shadow:inset 0 0 0 1px var(--hair)}
.figure--empty span{font:600 11px/1.6 var(--mono);letter-spacing:.08em;color:var(--ink-2);
  text-align:center;padding:var(--s5)}
.figure--empty span b{color:var(--flame);font-weight:600}

/* ---------------------------------------- muc luc danh so (thay luoi the) */
.index{list-style:none;padding:0;margin:0;counter-reset:idx;border-top:1px solid var(--hair)}
.index>li{counter-increment:idx;border-bottom:1px solid var(--hair);display:grid;
  grid-template-columns:4.5rem 1fr;gap:var(--s5);padding:var(--s6) 0;position:relative;
  transition:background .25s var(--ease)}
.index>li::before{content:counter(idx,decimal-leading-zero);font-family:var(--mono);
  font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-2);padding-top:.55em;
  transition:color .25s var(--ease)}
/* Vach cam chay ra tu trai khi ro chuot vao dong */
.index>li::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;
  background:var(--flame);transition:width .4s var(--ease-out)}
.index>li:hover{background:var(--veil)}
.index>li:hover::before{color:var(--flame)}
.index>li:hover::after{width:100%}
.index__body{max-width:var(--measure)}
.index h3{margin:0 0 var(--s3)}
.index h3 a{color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--flame),var(--flame));background-size:0 2px;
  background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease-out);padding-bottom:3px}
.index h3 a:hover{background-size:100% 2px}
.index p{margin:0;color:var(--ink-2);font-size:16px}
.section--dark .index,.section--dark .index>li{border-color:var(--hair-dark)}
.section--dark .index>li::before{color:var(--brand-tint)}
.section--dark .index p{color:var(--brand-tint)}

/* ------------------------------------------------- luoi hai cot / o vuong */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:var(--s7) var(--s9);align-items:start}
.split__aside{position:sticky;top:120px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.tiles>div{padding:var(--s6) var(--s5);border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);position:relative;transition:background .25s var(--ease)}
/* Vach cam moc len tu day o khi ro chuot */
.tiles>div::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--flame);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out)}
.tiles>div:hover{background:var(--veil)}
.tiles>div:hover::after{transform:scaleX(1)}
.tiles .num{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--ink-2);display:block;margin-bottom:var(--s5);transition:color .25s}
.tiles>div:hover .num{color:var(--flame)}
.tiles h3{margin:0 0 var(--s3)}
.tiles p{margin:0;font-size:15px;color:var(--ink-2);max-width:34ch}
.section--dark .tiles,.section--dark .tiles>div{border-color:var(--hair-dark)}
.section--dark .tiles .num{color:var(--brand-tint)}
.section--dark .tiles p{color:var(--brand-tint)}

/* ---------------------------------------------------------- buoc quy trinh */
/* QUAN TRONG: component nay phai TRUNG TINH voi nen.
   Ban dau no viet chet mau chu la --paper va --brand-tint vi chi dung trong
   section nen toi. Khi trang dich vu dat no tren nen TRANG thi thanh
   chu trang tren nen trang — mat sach noi dung, va khong script nao bat duoc.
   Luat: mac dinh la mau cho NEN SANG. Nen toi thi ghi de trong .section--dark. */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;border-top:1px solid var(--hair)}
.steps li{counter-increment:step;display:grid;grid-template-columns:4.5rem 1fr;gap:var(--s5);
  padding:var(--s6) 0;border-bottom:1px solid var(--hair);position:relative}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);
  font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-2);padding-top:.45em;
  transition:color .25s var(--ease)}
/* Vach cam ben trai buoc dang duoc ro chuot */
.steps li::after{content:"";position:absolute;left:calc(-1 * var(--s5));top:var(--s6);bottom:var(--s6);
  width:2px;background:var(--flame);transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease-out)}
.steps li:hover::after{transform:scaleY(1)}
.steps li:hover::before{color:var(--flame)}
.steps h3{margin:0 0 var(--s2);color:var(--ink)}
.steps p{margin:0;font-size:16px;color:var(--ink-2);max-width:58ch}

/* Ghi de cho nen toi */
.section--dark .steps,.section--dark .steps li{border-color:var(--hair-dark)}
.section--dark .steps li::before{color:var(--brand-tint)}
.section--dark .steps h3{color:var(--paper)}
.section--dark .steps p{color:var(--brand-tint)}

.pull{font-size:clamp(22px,2.5vw,32px);font-weight:500;letter-spacing:-.022em;
  line-height:1.28;max-width:22ch;margin:0}

/* -------------------------------------------------------------- form RFQ */
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:var(--s2);letter-spacing:.02em}
.field .hint{font-weight:400;color:var(--ink-2)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;
  padding:15px var(--s4);border:0;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);
  transition:box-shadow .18s var(--ease)}
.field input:hover,.field textarea:hover,.field select:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:inset 0 0 0 2px var(--flame)}
.field textarea{min-height:150px;resize:vertical}

/* O tick dong y xu ly du lieu ca nhan. Bat buoc theo Luat 91/2025/QH15.
   KHONG duoc tick san va KHONG duoc gop chung vao mot dong ghi chu. */
.consent{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);align-items:start;
  margin:var(--s5) 0 var(--s6);padding:var(--s4);background:var(--wash);
  border-left:3px solid var(--flame)}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand);flex:0 0 auto}
.consent label{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;font-weight:400}
.consent label a{color:var(--brand-ink)}

.contactlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.contactlist li{border-bottom:1px solid var(--hair);padding:var(--s4) 0}
.contactlist strong{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.contactlist a{font-size:19px;font-weight:500;text-decoration:none;color:var(--ink)}
.contactlist a:hover{color:var(--flame)}

/* ---------------------------------------------------------------- footer */
/* Footer dung <div>, KHONG dung <nav>. Selector the tran cho nav da lam vo 11 trang. */
body>div.site-foot{background:var(--ink);color:var(--brand-tint);padding:var(--s9) 0 var(--s7);
  font-size:15px;border-top:3px solid var(--flame)}
body>div.site-foot a{color:var(--brand-tint);text-decoration:none}
body>div.site-foot a:hover{color:var(--paper);text-decoration:underline;text-decoration-color:var(--flame)}
body>div.site-foot h4{color:var(--paper);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 var(--s5);font-weight:600}
body>div.site-foot ul{list-style:none;padding:0;margin:0}
body>div.site-foot li{margin-bottom:var(--s3)}
/* --ink-2 (#4B545B) tren nen ink (#16191C) chi duoc 2.03:1 — truot AA xa.
   Chan trang la nen TOI nen muc chua mo phai dung tone sang mo di, khong
   phai tone toi. rgba tren nen ink cho ra ~7.4:1. */
body>div.site-foot .planned{color:rgba(220,237,239,.62);display:inline-flex;
  align-items:center;gap:7px}
/* Nhan "Sap co" mac dinh to cam. Cam tren nen ink chi 3.41:1 — truot AA.
   Trong chan trang phai doi sang tone sang; vach cam giu lai o phan VIEN,
   noi ma 3:1 la du va thuong hieu van con nhan ra. */
body>div.site-foot .planned__tag{color:rgba(220,237,239,.72);
  box-shadow:inset 0 0 0 1px rgba(194,65,12,.9)}
.foot-cols{display:grid;gap:var(--s8);grid-template-columns:1.4fr 1fr 1fr 1fr}
.foot-legal{border-top:1px solid var(--hair-dark);margin-top:var(--s8);padding-top:var(--s5);
  font-size:13px;color:var(--ink-2)}

.float-contact{display:none}

/* ====================================================== HOAT CANH ======== */
/* Tat ca class duoi day do JS gan vao. Khong JS = khong class = hien binh thuong. */

/* 1. Troi len — dung cho khoi chu */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rise.in{opacity:1;transform:none}

/* 2. Truot ngang tu trai — dung cho dong muc luc */
.slide{opacity:0;transform:translateX(-34px);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.slide.in{opacity:1;transform:none}

/* 3. Mo man theo chieu doc — dung cho anh va mang mau */
.wipe{clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease-out)}
.wipe.in{clip-path:inset(0 0 0 0)}

/* 4. Phong nhe — dung cho o vuong */
.pop{opacity:0;transform:scale(.965);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.pop.in{opacity:1;transform:none}

/* 6. Hero: tieu de truot len theo tung dong, CHI transform, khong opacity.
      Opacity tu 0 lam tre thoi diem trinh duyet tinh LCP — nen khong dung o day. */
.linemask{display:block;overflow:hidden}
.linemask>span{display:block;transform:translateY(0);
  transition:transform .85s var(--ease-out)}
.linemask.armed>span{transform:translateY(105%)}
.linemask.in>span{transform:translateY(0)}

/* 7. Vach cam doc cua mang ink: cao dan len */
.stage__r.in::before{animation:growline .9s var(--ease-out) .15s both}
@keyframes growline{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1)}}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .stage{grid-template-columns:1fr;min-height:0}
  .stage__l{padding:var(--s9) var(--s6) var(--s8)}
  .stage__r{padding:var(--s8) var(--s6)}
  .stage__r::before{width:100%;height:3px;bottom:auto}
  .rowsplit{grid-template-columns:1fr}
  .rowsplit--flip .rowsplit__txt{order:0}
  .rowsplit__txt{padding:var(--s8) var(--s6)}
  .split{grid-template-columns:1fr;gap:var(--s7)}
  .split__aside{position:static}
  .foot-cols{grid-template-columns:1fr 1fr}
}
/* NAV DOI SANG DANG XO O 1200px, KHONG PHAI 860px.
   Do that: logo 132 + hang muc 888 + khoang cach = 1116px. Nguong cu 860px
   nghia la o moi be ngang tu 860 den 1116 thanh nav bi chat, nut "Yeu cau
   bao gia" bi day ra ngoai hoac xuong hang. Do la khoang be ngang cua PHAN
   LON laptop dang dung. Nguong phai bam theo so do duoc, khong bam theo
   con so tron tinh doan. */
@media (max-width:1200px){
  .navtoggle{display:inline-block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s3) var(--s6) var(--s6);box-shadow:0 18px 40px rgba(22,25,28,.10)}
  .menu.open{display:flex}
  .menu>li{border-bottom:1px solid var(--hair)}
  .menu a,.menu .planned,.menu .navtrigger{padding:var(--s4) 0;width:100%;font-size:16px;
    justify-content:space-between}
  .menu a::after,.menu .navtrigger::after{display:none}
  /* Tren mobile khong co ro chuot, nen trang dang mo danh dau bang vach ben trai */
  .menu .here{box-shadow:inset 3px 0 0 var(--flame);padding-left:var(--s4)}
  .menu .lang{padding-left:0;box-shadow:none}
  .menu .btn--1{justify-content:center;margin-top:var(--s4)}
  .subpanel{position:static;visibility:visible;opacity:1;transform:none;border:0;
    box-shadow:none;padding:0 0 var(--s3) var(--s4);max-width:none;min-width:0}
}
@media (max-width:860px){
  .section{padding:var(--s9) 0}
  .container{padding:0 var(--s5)}
  .index>li,.steps li{grid-template-columns:2.6rem 1fr;gap:var(--s4);padding:var(--s6) 0}
  .rfigs{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr}
  .float-contact{display:flex;position:fixed;right:var(--s4);bottom:var(--s4);z-index:40;gap:var(--s2)}
  .float-contact a{background:var(--brand);color:var(--paper);border-radius:999px;
    padding:14px 22px;font-size:15px;font-weight:600;text-decoration:none;
    box-shadow:0 10px 28px rgba(22,25,28,.28);border-bottom:3px solid var(--flame)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rise,.slide,.pop{opacity:1;transform:none}
  .wipe{clip-path:none}
  .linemask.armed>span,.linemask>span{transform:none}
}