/* ==========================================================================
   CODELAB — Công ty phần mềm outsourcing / product studio (Hà Nội & Đà Nẵng)
   PHONG CÁCH: SWISS / INTERNATIONAL TYPOGRAPHIC STYLE (Thụy Sĩ quốc tế).
   Trang được dựng như một tờ poster / báo cáo thường niên in ấn: LƯỚI 12 CỘT
   HIỆN RÕ (các đường dọc mảnh vẽ bằng repeating-linear-gradient, nút "Lưới"
   trên header bật/tắt), mọi thứ canh theo lưới, chữ canh trái, phân cấp bằng
   CỠ CHỮ + KHOẢNG TRẮNG + ĐƯỜNG KẺ 1px. Chỉ 4 màu: mực #111, giấy trắng, xám
   #8A8A8A và đỏ #E10600 (dùng rất tiết chế: một từ, một đường kẻ, nav đang
   active). KHÔNG card, KHÔNG bóng, KHÔNG bo góc, KHÔNG icon (dùng ký tự
   → ↗ ● và số thứ tự). Không ảnh hero — ảnh chỉ là ô chữ nhật nhỏ, đen trắng,
   nằm trong ô lưới.
   Font: "Inter Tight" cho tiêu đề (rất lớn, tracking âm, weight 600) +
   "Inter" cho thân chữ; số dùng tabular figures (font-variant-numeric).
   Bố cục: header = 1 đường kẻ mảnh, logo trái, nav giữa chữ hoa nhỏ đánh số
   "01 Dịch vụ", phải là giờ Hà Nội (JS) + "Liên hệ ↗". Hero = câu tuyên ngôn
   khổ lớn xếp 3 cỡ chữ trên lưới + số chỉ mục đỏ + cột meta. Các mục: dịch vụ
   dạng DANH SÁCH đánh số (hover hiện mô tả), case study dạng BẢNG, số liệu
   4 con số khổng lồ, vòng lặp sprint vẽ bằng đường kẻ + chữ, tech stack lưới
   chữ, máy tính giờ công (bảng thuần), khách hàng = logo chữ, footer = kẻ +
   cột chữ nhỏ.
   ========================================================================== */
:root{
  --ink:#111111; --paper:#FFFFFF; --gray:#8A8A8A; --red:#E10600;
  --rule:#111111; --rule-soft:#D9D9D9; --grid-line:rgba(225,6,0,.16);
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ff-h:'Inter Tight','Inter',system-ui,Arial,sans-serif;
  --gut:24px; --cols:12;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0}
h1,h2,h3,h4{font-family:var(--ff-h);font-weight:600;line-height:1;letter-spacing:-.03em}
strong,b{font-weight:600}
.red{color:var(--red)}
.gray{color:var(--gray)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.container{width:min(1280px,94%);margin:0 auto}

/* ---------- Lưới 12 cột hiện rõ (overlay cố định, nút "Lưới" bật/tắt) ---------- */
.gridlines{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(1280px,94%);pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to right,var(--grid-line) 0 1px,transparent 1px calc(100% / var(--cols)));
  border-right:1px solid var(--grid-line)}
body.grid-off .gridlines{display:none}
.g{display:grid;grid-template-columns:repeat(12,1fr)}
.g>*{min-width:0;padding-right:var(--gut)}
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.s2{grid-column-start:2}.s3{grid-column-start:3}.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}.s10{grid-column-start:10}
main{position:relative;z-index:1}

/* ---------- Kiểu chữ ---------- */
.caps{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.idx{font-family:var(--ff-h);font-variant-numeric:tabular-nums;color:var(--red);font-size:12px;letter-spacing:.08em;font-weight:600}
.small{font-size:13px}
.lead{font-size:20px;line-height:1.4;letter-spacing:-.01em;max-width:34em}
.t-xxl{font-size:clamp(56px,9vw,150px);line-height:.92;letter-spacing:-.045em}
.t-xl{font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.04em}
.t-l{font-size:clamp(30px,4vw,60px);line-height:1;letter-spacing:-.035em}
.t-m{font-size:clamp(22px,2.4vw,32px);line-height:1.1;letter-spacing:-.025em}
.num{font-family:var(--ff-h);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.rule{border:0;border-top:1px solid var(--rule)}
.rule--soft{border-top-color:var(--rule-soft)}
.rule--red{border-top-color:var(--red)}
p+p{margin-top:1em}
.prose p{max-width:40em}
.prose h3{margin:2em 0 .6em;font-size:22px}
.prose li{padding:.35em 0;border-top:1px solid var(--rule-soft)}
.prose li::before{content:"● ";font-size:8px;vertical-align:middle;color:var(--red);margin-right:6px}

/* Liên kết dạng chữ + mũi tên */
.arrow{display:inline-block;font-weight:500}
.arrow::after{content:" →";display:inline-block;transition:transform .2s}
.arrow:hover::after{transform:translateX(4px)}
.ext::after{content:" ↗"}
.btn{display:inline-block;border:1px solid var(--ink);padding:12px 20px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;line-height:1}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--red);border-color:var(--red)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.header .g{align-items:center;height:56px}
.logo{font-family:var(--ff-h);font-weight:600;font-size:20px;letter-spacing:-.04em}
.logo i{font-style:normal;color:var(--red)}
.nav{display:flex;gap:28px}
.nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:inline-flex;gap:8px;align-items:baseline;padding:20px 0;border-bottom:1px solid transparent;margin-bottom:-1px}
.nav a b{font-weight:600;color:var(--gray);font-variant-numeric:tabular-nums}
.nav a:hover{text-decoration:none;border-bottom-color:var(--ink)}
.nav a.is-active{color:var(--red);border-bottom-color:var(--red)}
.nav a.is-active b{color:var(--red)}
.hright{display:flex;justify-content:flex-end;align-items:center;gap:22px;padding-right:0!important}
.clock{font-size:12px;letter-spacing:.06em;color:var(--gray);font-variant-numeric:tabular-nums;white-space:nowrap}
.clock b{color:var(--ink);font-weight:500}
.gridbtn{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:inline-flex;gap:6px;align-items:center}
.gridbtn::before{content:"●";font-size:8px;color:var(--red)}
body.grid-off .gridbtn::before{color:var(--gray)}
.burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.burger span{display:block;width:22px;height:1px;background:var(--ink);transition:.2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Khối mục: hàng tiêu đề nhỏ + đường kẻ ---------- */
.sec{padding:72px 0 0}
.sec__head{display:grid;grid-template-columns:repeat(12,1fr);border-top:1px solid var(--rule);padding-top:10px;margin-bottom:36px}
.sec__head>*{min-width:0;padding-right:var(--gut)}
.sec__head .caps{display:flex;gap:12px;align-items:baseline}
.sec__head .caps .idx{font-size:11px}
.sec__head .note{color:var(--gray);font-size:13px;grid-column:9/13}
.sec__title{margin:0 0 28px}

/* ---------- Hero: tuyên ngôn 3 cỡ chữ + meta ---------- */
.hero{padding:64px 0 48px}
.hero .g{align-items:start}
.hero__idx{grid-column:1/2;padding-top:14px}
.hero__idx .idx{font-size:14px}
.hero__stmt{grid-column:2/12}
.hero__stmt .l1{display:block;font-size:clamp(48px,7vw,100px);letter-spacing:-.05em;line-height:.9}
.hero__stmt .l2{display:block;font-size:clamp(32px,5vw,72px);letter-spacing:-.04em;line-height:.95;margin-top:.12em}
.hero__stmt .l3{display:block;font-size:clamp(22px,2.8vw,40px);letter-spacing:-.03em;line-height:1.05;margin-top:.3em;font-weight:500;color:var(--gray)}
.hero__stmt .l3 em{font-style:normal;color:var(--red)}
.hero__meta{grid-column:2/13;display:grid;grid-template-columns:repeat(11,1fr);row-gap:22px;margin-top:56px;border-top:1px solid var(--rule);padding-top:14px}
.hero__meta>div{grid-column:span 2;padding-right:var(--gut)}
.hero__meta>div:last-child{grid-column:8/12}
.meta-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:6px}
.meta-v{font-family:var(--ff-h);font-size:28px;letter-spacing:-.03em;font-weight:600;line-height:1}
.meta-v small{font-size:13px;letter-spacing:0;font-family:var(--ff);font-weight:400;color:var(--gray);margin-left:4px}
.hero__meta p{font-size:13px;color:var(--gray);line-height:1.5;max-width:30em}

/* ---------- Ảnh: ô chữ nhật nhỏ, đen trắng ---------- */
.ph{background:var(--img,#DDD) center/cover no-repeat;filter:grayscale(1) contrast(1.05);aspect-ratio:4/3;display:block}
.ph--wide{aspect-ratio:3/2}.ph--tall{aspect-ratio:3/4}.ph--sq{aspect-ratio:1}
.cap{font-size:11px;color:var(--gray);letter-spacing:.04em;margin-top:8px;display:flex;justify-content:space-between;gap:12px}
.cap b{color:var(--ink);font-weight:500}
.strip{margin-top:48px;align-items:end}
.strip figure{margin:0}

/* ---------- Dịch vụ: danh sách đánh số, hover hiện mô tả ---------- */
.rows{border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:repeat(12,1fr);border-top:1px solid var(--rule);padding:22px 0;align-items:baseline;text-decoration:none!important;color:inherit}
.row>*{min-width:0;padding-right:var(--gut)}
.row .idx{grid-column:span 1;font-size:13px}
.row h3{grid-column:span 5;font-size:clamp(24px,3vw,44px);letter-spacing:-.035em}
.row .desc{grid-column:span 4;font-size:14px;color:var(--gray);opacity:0;transform:translateY(4px);transition:.25s}
.row .go{grid-column:span 2;text-align:right;padding-right:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.row:hover .desc,.row:focus-within .desc{opacity:1;transform:none}
.row:hover h3{color:var(--red)}
.row:hover .go::after{content:" →"}

/* ---------- Bảng kiểu Swiss ---------- */
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px var(--gut) 14px 0;border-top:1px solid var(--rule-soft)}
.tbl th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--gray);border-top:0;padding-top:10px;padding-bottom:10px}
.tbl tr>*:last-child{padding-right:0}
.tbl td.big{font-family:var(--ff-h);font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;font-weight:600;line-height:1;white-space:nowrap}
.tbl td.big small{font-size:12px;letter-spacing:.04em;font-family:var(--ff);font-weight:400;color:var(--gray);margin-left:6px}
.tbl td.name{font-family:var(--ff-h);font-size:20px;letter-spacing:-.02em;font-weight:600}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tr.is-hidden{display:none}
.tbl--tight th,.tbl--tight td{padding-top:10px;padding-bottom:10px;font-size:14px}
.tbl tbody tr.link{cursor:pointer}
.tbl tbody tr.link:hover td{color:var(--red)}

/* Case study mở rộng (JS) */
.exp{display:none}
.exp.is-open{display:table-row}
.exp td{border-top:0;padding-top:0;padding-bottom:28px}
.exp__grid{display:grid;grid-template-columns:repeat(12,1fr)}
.exp__grid>div{padding-right:var(--gut);min-width:0}
.exp__grid .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:8px}
.exp__grid p{font-size:14px;max-width:32em}
.exp__grid .c4:first-child{grid-column:2/5}
tr.link td:first-child::before{content:"+";display:inline-block;width:18px;color:var(--gray)}
tr.link.is-open td:first-child::before{content:"–";color:var(--red)}

/* Bộ lọc dạng chữ */
.filters{display:flex;flex-wrap:wrap;gap:0 24px;margin-bottom:24px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.filters button{padding:8px 0;border-bottom:1px solid transparent;font-weight:500;color:var(--gray)}
.filters button:hover{color:var(--ink)}
.filters button.is-active{color:var(--red);border-bottom-color:var(--red)}
.filters .cnt{margin-left:auto;color:var(--gray);align-self:center;font-variant-numeric:tabular-nums}

/* ---------- Số liệu: 4 con số khổng lồ ---------- */
.stats{border-top:1px solid var(--rule)}
.stats>div{border-right:1px solid var(--rule-soft);padding:24px var(--gut) 40px 0}
.stats>div:last-child{border-right:0}
.stats .num{font-size:clamp(60px,8vw,132px);display:block;margin:18px 0 12px}
.stats .num sup{font-size:.32em;vertical-align:top;top:.35em;position:relative;color:var(--red);letter-spacing:0}
.stats .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.stats p{font-size:13px;color:var(--gray);max-width:24em}

/* ---------- Vòng lặp Sprint: chỉ đường kẻ + chữ ---------- */
.loop{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.loop>div{border-right:1px solid var(--rule);padding:20px var(--gut) 28px 0;min-height:220px;display:flex;flex-direction:column;position:relative}
.loop>div:last-child{border-right:0}
.loop .idx{font-size:12px}
.loop h4{font-size:22px;margin:26px 0 10px;letter-spacing:-.03em}
.loop p{font-size:13px;color:var(--gray);flex:1}
.loop .day{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:16px}
.loop>div::after{content:"→";position:absolute;right:-9px;top:14px;background:var(--paper);padding:0 2px;font-size:14px;line-height:1}
.loop>div:last-child::after{content:"↺";color:var(--red)}
.loop__back{display:flex;justify-content:space-between;padding:10px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);border-bottom:1px solid var(--rule-soft)}

/* ---------- Tech stack: lưới chữ theo lớp ---------- */
.stack{border-top:1px solid var(--rule)}
.stack>div{padding:16px var(--gut) 32px 0;border-right:1px solid var(--rule-soft)}
.stack>div:last-child{border-right:0}
.stack .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:flex;gap:10px}
.stack .k .idx{font-size:11px}
.stack ul{margin-top:18px}
.stack li{font-family:var(--ff-h);font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;font-weight:500;line-height:1.5;border-top:1px solid var(--rule-soft);padding:6px 0;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stack li span{font-family:var(--ff);font-size:11px;letter-spacing:.08em;color:var(--gray);text-transform:uppercase;white-space:nowrap}

/* ---------- Máy tính giờ công (bảng thuần) ---------- */
.calc{border-top:1px solid var(--rule);align-items:start}
.calc__form{padding:24px var(--gut) 24px 0}
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;font-size:18px;padding:8px 0;border-radius:0;color:var(--ink);font-variant-numeric:tabular-nums;outline:none}
.field select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23111'/></svg>") no-repeat right center}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--red)}
.field textarea{min-height:100px;resize:vertical}
.field .hint{font-size:12px;color:var(--gray);margin-top:6px}
.calc__out{padding:24px var(--gut) 24px 0;border-left:1px solid var(--rule)}
.calc__out .tbl{border-top:0}
.total{margin-top:24px;display:grid;grid-template-columns:1fr auto;align-items:end;border-top:1px solid var(--rule);padding-top:12px}
.total .num{font-size:clamp(40px,5vw,72px)}
.total .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.total .vnd{font-size:14px;color:var(--gray);text-align:right}
.calc__note{font-size:12px;color:var(--gray);margin-top:14px;max-width:36em}

/* ---------- Khách hàng: logo chữ ---------- */
.clients{border-top:1px solid var(--rule);border-left:1px solid var(--rule-soft)}
.clients>div{grid-column:span 3;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:28px var(--gut) 28px 18px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.clients .lg{font-family:var(--ff-h);font-size:26px;letter-spacing:-.04em;font-weight:600}
.clients .lg.wide{letter-spacing:.08em;font-weight:500;font-size:20px;text-transform:uppercase}
.clients .lg.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:-.02em;font-size:22px;font-weight:500}
.clients .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-top:14px}

/* ---------- Tuyển dụng: danh sách ---------- */
.jobs .row{padding:18px 0}
.jobs .row h3{grid-column:span 5;font-size:clamp(20px,2.2vw,30px)}
.jobs .row .loc{grid-column:span 2;font-size:13px;color:var(--gray)}
.jobs .row .lvl{grid-column:span 2;font-size:13px;color:var(--gray)}

/* ---------- Khối kết + Footer ---------- */
.cta{padding:96px 0 72px}
.cta h2{margin-bottom:28px}
.cta .g{align-items:start}
.footer{border-top:1px solid var(--ink);margin-top:72px;padding:28px 0 32px;font-size:12px;position:relative;z-index:1;background:var(--paper)}
.footer .g{row-gap:24px}
.footer .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:10px}
.footer li{padding:2px 0}
.footer__bot{border-top:1px solid var(--rule-soft);margin-top:28px;padding-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;color:var(--gray);font-size:11px;letter-spacing:.06em}
.footer .logo{font-size:28px}

/* ---------- Trang con: tiêu đề trang ---------- */
.page-head{padding:56px 0 40px}
.page-head .idx{font-size:14px;display:block;margin-bottom:18px}
.page-head h1{font-size:clamp(44px,7vw,112px);letter-spacing:-.045em;line-height:.92}
.page-head .lead{margin-top:22px}
.page-head .side{font-size:13px;color:var(--gray);padding-top:10px;border-top:1px solid var(--rule)}
.page-head .side b{color:var(--ink);display:block;font-weight:500}

/* Dịch vụ chi tiết: khối theo lưới */
.svc{border-top:1px solid var(--rule);padding:32px 0 48px;align-items:start}
.svc .idx{font-size:14px}
.svc h2{font-size:clamp(30px,4vw,56px);letter-spacing:-.04em;margin-bottom:18px}
.svc .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:8px}
.svc ul.dl li{border-top:1px solid var(--rule-soft);padding:7px 0;font-size:14px;display:flex;justify-content:space-between;gap:12px}
.svc ul.dl li span{color:var(--gray);white-space:nowrap;font-variant-numeric:tabular-nums}
.svc .time{font-family:var(--ff-h);font-size:40px;letter-spacing:-.04em;font-weight:600;line-height:1}
.svc .time small{font-family:var(--ff);font-size:12px;color:var(--gray);letter-spacing:.04em;font-weight:400;margin-left:6px}
.svc p{font-size:14px;max-width:34em}
.svc .price{font-size:13px;margin-top:14px}
.svc .price b{display:block;font-family:var(--ff-h);font-size:22px;letter-spacing:-.03em;font-weight:600}

/* Chi tiết case: cột meta trái, chữ dài phải */
.case .meta{border-top:1px solid var(--rule);padding-top:12px;font-size:13px;position:sticky;top:76px}
.case .meta dl{display:grid;grid-template-columns:1fr;row-gap:12px}
.case .meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.case .meta dd{font-weight:500}
.case .body p{font-size:17px;line-height:1.55;max-width:38em}
.case .body h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;margin:56px 0 18px}
.case .body h2:first-child{margin-top:0}
.callouts{align-items:start;margin:32px 0}
.callouts>div{border-top:1px solid var(--red);padding-top:12px}
.callouts .num{font-size:clamp(48px,6vw,96px);display:block}
.callouts .k{font-size:12px;color:var(--gray);margin-top:8px;max-width:20em;display:block}
.figs{margin:40px 0;align-items:start}
.nextcase{border-top:1px solid var(--rule);margin-top:72px;padding-top:16px}
.nextcase a{display:grid;grid-template-columns:repeat(12,1fr);align-items:baseline;text-decoration:none}
.nextcase a:hover h3{color:var(--red)}
.nextcase h3{grid-column:2/9;font-size:clamp(32px,5vw,72px);letter-spacing:-.04em}
.nextcase .k{grid-column:span 1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.nextcase .go{grid-column:9/13;text-align:right;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}

/* Quy trình: giai đoạn */
.phases{border-top:1px solid var(--rule)}
.phase{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:1px solid var(--rule);padding:28px 0 36px}
.phase>*{min-width:0;padding-right:var(--gut)}
.phase .idx{grid-column:span 1;font-size:14px}
.phase h3{grid-column:span 4;font-size:clamp(28px,3.6vw,52px);letter-spacing:-.04em}
.phase h3 small{display:block;font-family:var(--ff);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);font-weight:500;margin-top:10px}
.phase .txt{grid-column:span 4;font-size:14px}
.phase .out{grid-column:span 3;font-size:13px;padding-right:0}
.phase .out li{border-top:1px solid var(--rule-soft);padding:6px 0}
.phase .out .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:6px}
.sla{border-top:1px solid var(--rule)}
.sla>div{border-right:1px solid var(--rule-soft);padding:18px var(--gut) 28px 0}
.sla>div:last-child{border-right:0}
.sla .num{font-size:clamp(40px,5vw,72px);display:block;margin:14px 0 8px}
.sla .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.sla p{font-size:13px;color:var(--gray)}

/* Liên hệ */
.form{border-top:1px solid var(--rule);padding-top:24px}
.check{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--rule-soft);padding:10px 0;font-size:14px}
.check input{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:1px solid var(--ink);margin:0;flex:none;position:relative;top:1px;cursor:pointer;border-radius:0}
.check input:checked{background:var(--red);border-color:var(--red)}
.offices>div{border-top:1px solid var(--rule);padding:14px var(--gut) 28px 0}
.offices h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;margin:10px 0 14px}
.offices p{font-size:14px}
.offices .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.form__ok{display:none;border-top:1px solid var(--red);padding-top:16px;margin-top:24px;font-size:14px}
.form__ok.is-show{display:block}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav{gap:18px}
  .lead{font-size:18px}
  .clients>div{grid-column:span 4}
}
@media (max-width:980px){
  :root{--cols:6}
  .g,.sec__head,.row,.phase,.exp__grid,.nextcase a{grid-template-columns:repeat(6,1fr)}
  .c7,.c8,.c9,.c10,.c11,.c12{grid-column-end:span 6}
  .s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10{grid-column-start:auto}
  .header .g{grid-template-columns:auto 1fr auto;grid-auto-rows:auto;height:auto;min-height:52px}
  .header .logo{grid-column:1/2}.header .hright{grid-column:3/4}
  .nav{display:none;grid-column:1/-1;grid-row:2;flex-direction:column;gap:0;border-top:1px solid var(--rule);padding:8px 0 12px}
  .nav.is-open{display:flex}
  .nav a{padding:10px 0}
  .burger{display:flex}
  .hero__stmt{grid-column:1/-1}
  .hero__meta{grid-column:1/-1;grid-template-columns:repeat(6,1fr)}
  .hero__meta>div{grid-column:span 2}
  .hero__meta>div:last-child{grid-column:1/-1;margin-top:16px}
  .sec__head .note{grid-column:1/-1;margin-top:8px}
  .row .desc{grid-column:2/-1;opacity:1;transform:none;margin-top:8px}
  .row .go{grid-column:2/-1;text-align:left;margin-top:10px}
  .stats>div{grid-column:span 3}
  .stats>div:nth-child(2){border-right:0}
  .loop>div{grid-column:span 3;min-height:0}
  .loop>div:nth-child(2)::after{content:"↓"}
  .loop>div:nth-child(2){border-right:0}
  .stack>div{grid-column:span 3}
  .stack>div:nth-child(2){border-right:0}
  .calc__out{border-left:0;border-top:1px solid var(--rule)}
  .clients>div{grid-column:span 3}
  .jobs .row .loc,.jobs .row .lvl{grid-column:2/-1}
  .phase h3{grid-column:span 5}.phase .txt{grid-column:2/-1;margin-top:14px}.phase .out{grid-column:2/-1;margin-top:18px}
  .exp__grid .c4:first-child{grid-column:1/-1}
  .exp__grid>div{grid-column:1/-1;margin-bottom:14px}
  .case .meta{position:static;margin-bottom:32px}
  .nextcase h3{grid-column:2/-1}.nextcase .go{grid-column:2/-1;text-align:left;margin-top:8px}
  .sla>div{grid-column:span 3}
  .sla>div:nth-child(2){border-right:0}
  .tbl .hide-m{display:none}
}
@media (max-width:640px){
  body{font-size:14px}
  .hero{padding:40px 0 32px}
  .hero__stmt .l1{font-size:clamp(40px,11vw,64px)}
  .hero__stmt .l2{font-size:clamp(30px,9vw,44px)}
  .hero__stmt .l3{font-size:clamp(20px,6vw,26px)}
  .hero__meta>div{grid-column:span 3}
  .sec{padding-top:48px}
  .c4,.c5,.c6{grid-column-end:span 6}
  .c3{grid-column-end:span 3}
  .row h3{font-size:24px}
  .stats>div{grid-column:span 6;border-right:0}
  .loop>div{grid-column:span 6;border-right:0}
  .loop>div::after{content:"↓"}
  .loop>div:last-child::after{content:"↺"}
  .stack>div{grid-column:span 6;border-right:0}
  .clients>div{grid-column:span 3;min-height:100px;padding-left:12px}
  .clients .lg{font-size:20px}
  .tbl th,.tbl td{padding:10px 12px 10px 0;font-size:13px}
  .tbl td.big{font-size:22px}
  .tbl td.name{font-size:16px}
  .tbl .hide-s{display:none}
  .filters{gap:0 16px}
  .clock{display:none}
  .hright{gap:14px}
  .footer .g>div{grid-column:span 3}
  .sla>div{grid-column:span 6;border-right:0}
  .offices>div{grid-column:span 6}
  .total{grid-template-columns:1fr}
  .total .vnd{text-align:left}
  .cta{padding:64px 0 40px}
}