/* ==========================================================================
   CRABOR — HỆ THỐNG THIẾT KẾ "TECHNICAL MINIMALIST"
   Blueprint kỹ thuật · 1px hairline · không đổ bóng · bo góc 0px/2px
   Dùng chung cho cả 4 landing page: index · user · shipper · partner
   ========================================================================== */

/* ── 1. TOKEN ─────────────────────────────────────────────────────────── */
:root {
  /* Màu nền tảng */
  --paper:        #F7F7F5;   /* nền giấy */
  --forest:       #B33630;   /* xanh rừng — màu thương hiệu chính */
  --grid:         #3A3A38;   /* xám kỹ thuật */

  /* Màu nhấn */
  --coral:        #FF8C69;
  --mint:         #e9b6b4;
  --gold:         #F4D35E;

  /* Đường kẻ 1px */
  --hair:         rgba(58, 58, 56, .20);
  --hair-soft:    rgba(58, 58, 56, .12);
  --hair-strong:  rgba(58, 58, 56, .30);
  --hair-forest:  rgba(179, 54, 48, .20);

  /* Trạng thái */
  --forest-deep:  #8E2A24;
  --paper-white:  #FFFFFF;

  /* Chữ */
  --f-display: 'Space Grotesk', 'Be Vietnam Pro', system-ui, sans-serif;
  --f-body:    'General Sans', 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Kích thước */
  --nav-h:      68px;
  --wrap:       1240px;
  --gap:        1px;          /* khe ô của Bento Grid = 1px */
}

/* ── 2. NỀN ────────────────────────────────────────────────────────────────
   Nền giấy phẳng, không hoạ tiết ô gạch. Trước đây body đặt
   background-image: var(--mosaic) — ô SVG 240×240 chứa các hình chữ nhật
   xếp lệch nhau, lặp liền mạch thành lưới ô thấy rõ trên màn hình và gây
   rối khi đọc chữ. Nền giấy #F7F7F5 là đủ để tạo khoảng thở.             */

/* ── 3. RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-radius: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--paper);
  color: var(--grid);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
/* height:auto ở đây là BẮT BUỘC, không phải cho đẹp.
   Thuộc tính height="1884" trong thẻ <img> là presentational hint — độ ưu tiên
   thấp hơn CSS, nên nó bị CSS đè khi có width, nhưng lại THẮNG khi CSS không
   đặt height. Khi đó chiều cao cố định 1884px làm aspect-ratio bị bỏ qua,
   object-fit:cover cắt ảnh thành một dải dọc ở kích thước gốc. Đã gặp đúng
   lỗi này ở ảnh hero. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }

/* Ảnh: chuyển thành đơn sắc theo độ sáng, hover mới lên màu thật */
img.lum {
  mix-blend-luminosity;
  opacity: .9;
  transition: mix-blend-mode .18s ease-out, opacity .18s ease-out;
}
img.lum:hover { mix-blend-mode: normal; opacity: 1; }

::selection { background: var(--forest); color: var(--paper); }

/* ── 4. CHỮ KỸ THUẬT ─────────────────────────────────────────────────── */
.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono-sm { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

.section-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.section-label::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--forest);
  flex: none;
}

.sec-head { max-width: 760px; margin-bottom: 52px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .section-label { justify-content: center; }

.sec-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--forest);
}
.sec-title em { font-style: normal; color: var(--coral); }

.sec-sub {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(58, 58, 56, .72);
  max-width: 62ch;
}
.sec-head.center .sec-sub { margin-inline: auto; }

/* ── 5. THANH ĐIỀU HƯỚNG ───────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 900;
  background: rgba(247, 247, 245, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
  transition: background .2s ease-out, border-color .2s ease-out;
}
.nav.scrolled { background: rgba(247, 247, 245, .985); border-bottom-color: var(--hair-strong); }

.nav-in {
  max-width: var(--wrap);
  height: 100%;
  margin-inline: auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.nav-brand { display: flex; align-items: center; gap: 12px; }
/* Ô logo 32×32. Bên trong đặt LOGO THẬT của CRABOR (logo-512.webp) chứ không
   phải icon SVG vẽ tay — bản cũ có logo thật, bản dựng lại đầu tiên đã thay
   bằng SVG nên mất hẳn nhận diện. Giữ khung vuông 1px cho đúng ngôn ngữ
   thiết kế, không ép nền xám vào ảnh. */
.nav-mark {
  width: 32px; height: 32px;
  border: 1px solid var(--hair-strong);
  background: var(--paper-white);
  display: grid; place-items: center;
  flex: none;
  overflow: hidden;
}
.nav-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-mark svg { width: 18px; height: 18px; }
.nav-word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--forest);
}

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(58, 58, 56, .70);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease-out, border-color .15s ease-out;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.nav-links a i { font-style: normal; color: var(--coral); margin-right: 5px; }

.nav-act { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

/* Nút */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--forest);
  white-space: nowrap;
  transition: background .15s ease-out, color .15s ease-out;
}
.btn-ghost { color: var(--forest); }
.btn-ghost:hover { background: var(--forest); color: var(--paper); }
.btn-solid { background: var(--forest); color: var(--paper); }
.btn-solid:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn-coral { background: var(--coral); border-color: var(--coral); color: var(--forest-deep); }
.btn-coral:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn-mint { background: var(--mint); border-color: var(--mint); color: var(--forest-deep); }
.btn-mint:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
.btn-gold:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn-lg { padding: 14px 26px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Nút mở menu trên di động */
.burger { display: none; width: 32px; height: 32px; border: 1px solid var(--forest); padding: 8px 7px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 1px; background: var(--forest); transition: transform .2s ease-out, opacity .2s ease-out; }
.burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu di động */
.mnav {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hair-strong);
  z-index: 890;
  padding: 8px 28px 22px;
  display: none;
}
.mnav.on { display: block; }
.mnav a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mnav a i { font-style: normal; color: var(--coral); margin-right: 8px; }
.mnav .btn { margin-top: 16px; }

/* ── 6. KHUNG SECTION ──────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding: 0 28px; }

section { position: relative; padding: 108px 0; border-top: 1px solid var(--hair); }
section.flush { border-top: none; }

/* ── 7. HERO ─────────────────────────────────────────────────────────── */
.hero { padding: calc(var(--nav-h) + 76px) 0 96px; border-top: none; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 64px;
  align-items: center;
}

.hero-badge { margin-bottom: 26px; }

.hero-h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(46px, 8.4vw, 96px);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--forest);
}
.hero-h1 span { display: block; }
.hero-h1 em { font-style: normal; color: var(--coral); }

/* Subtext mono, viết hoa, gạch dọc 1px bên trái */
.hero-sub {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 1px solid var(--hair-strong);
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(58, 58, 56, .80);
  max-width: 46ch;
}
.hero-sub strong { color: var(--forest); font-weight: 700; }

.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Dải số liệu */
.hero-stats {
  margin-top: 46px;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-stat { padding: 18px 16px 0 0; border-right: 1px solid var(--hair-soft); }
.hero-stat:last-child { border-right: none; }
.hero-stat b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.03em;
  color: var(--forest);
  line-height: 1;
}
/* Stat có chữ thay vì số ("Hằng ngày", "Theo kỳ") — cỡ chữ số 30px sẽ
   xuống dòng vì cột chỉ rộng 1/4. Dùng cỡ nhỏ hơn cho vừa một dòng. */
.hero-stat b.txt { font-size: 17px; letter-spacing: -.01em; line-height: 1.15; }
.hero-stat span {
  display: block;
  margin-top: 7px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(58, 58, 56, .60);
}

/* Khung wireframe bên phải: container vuông + quỹ đạo tròn đứt + ảnh */
.wire {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--hair-strong);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wire-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.wire-orbit::before {
  content: "";
  width: 78%;
  aspect-ratio: 1;
  border: 1px dashed var(--hair-strong);
  border-radius: 50%;
  animation: spin 26s linear infinite;
}
.wire-orbit::after {
  content: "";
  position: absolute;
  top: 11%;
  right: 11%;
  width: 10px; height: 10px;
  background: var(--coral);
}
@keyframes spin { to { transform: rotate(360deg); } }

.wire-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--hair-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-soft) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  pointer-events: none;
}
.wire-shot {
  position: relative;
  z-index: 1;
  width: 46%;
  border: 1px solid var(--hair-strong);
  background: var(--paper-white);
  padding: 5px;
}
.wire-shot img { width: 100%; aspect-ratio: 870 / 1884; object-fit: cover; }
.wire-tag {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
}
.wire-idx {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(58, 58, 56, .55);
}

/* ── 8. HUY HIỆU TRẠNG THÁI ───────────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--hair-forest);
  background: var(--paper);
}
.badge-status i { width: 8px; height: 8px; background: var(--forest); flex: none; animation: blink 2.2s steps(1) infinite; }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.badge-status span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 500;
}
.badge-status.coral i { background: var(--coral); }
.badge-status.gold  i { background: var(--gold); }

/* ── 9. BENTO GRID 2×2 ────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  background: var(--hair);
  border: 1px solid var(--hair);
}
.bento-cell {
  background: var(--paper);
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 268px;
  transition: background .18s ease-out;
}
.bento-cell:hover { background: var(--paper-white); }

.bento-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--grid);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--forest);
}
.bento-head.coral { border-left-color: var(--coral); }
.bento-head.mint  { border-left-color: var(--mint); }
.bento-head.gold  { border-left-color: var(--gold); }
.bento-head b { color: rgba(58, 58, 56, .40); font-weight: 500; margin-right: 2px; }

.bento-t {
  margin-top: 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--forest);
}
.bento-d { margin-top: 10px; font-size: 14px; line-height: 1.65; color: rgba(58, 58, 56, .72); }

/* Hộp mô phỏng kỹ thuật */
.mockup {
  margin-top: auto;
  padding-top: 22px;
}
.mock-box {
  border: 1px solid var(--hair);
  background: var(--paper-white);
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.75;
  color: rgba(58, 58, 56, .82);
  overflow: hidden;
}
.mock-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mock-row .k { color: rgba(58, 58, 56, .45); }
.mock-row .ok { color: var(--forest); font-weight: 700; }
.mock-row .warn { color: #C4552F; font-weight: 700; }
.chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest-deep);
  /* Nhãn dài như "ĐẦU THÁNG 12" không được xuống dòng, nếu không chip cao
     hơn hàng và làm lệch danh sách dịch vụ. */
  white-space: nowrap;
}
.chip-coral { background: var(--coral); }
.chip-mint  { background: var(--mint); }
.chip-gold  { background: var(--gold); }
.chip-forest{ background: var(--forest); color: var(--paper); }
.chip-line  { border: 1px solid var(--hair-strong); background: transparent; color: rgba(58,58,56,.6); }

.bar { height: 4px; background: var(--hair-soft); position: relative; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--forest); display: block; }
.bar > i.coral { background: var(--coral); }
.bar > i.mint  { background: var(--mint); }
.bar > i.gold  { background: var(--gold); }

/* ── 10. ĐỒ THỊ MẠNG ──────────────────────────────────────────────────── */
.net {
  /* width:100% là bắt buộc: trong cột lưới, khung này co về ~0 vì chỉ có
     max-width + aspect-ratio, khi đó 3 nút quay đệm (bán kính 140px) tràn ra
     ngoài khung và phần chú thích bị bóp còn một sọt chữ. */
  width: 100%;
  max-width: 450px;
  margin-inline: auto;
  border: 1px solid var(--hair-strong);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.net svg { width: 100%; height: 100%; }
/* Vòng nét đứt phải trùng với quỹ đạo của 3 nút: bán kính 140px → đường kính
   280px. Nếu để theo % (46% = 207px) thì vòng lệch vào trong, 3 nút bay ngoài
   vòng và trông như lỗi dàn trải chứ không phải mô phỏng mạng. */
.net-ring {
  position: absolute;
  width: 280px; height: 280px;
  border: 1px dashed var(--hair-strong);
  border-radius: 50%;
}
.net-core { width: 16px; height: 16px; background: var(--forest); position: relative; z-index: 2; }
.net-orbit { position: absolute; inset: 0; animation: spin 20s linear infinite; }
.net-orbit i {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  background: var(--coral);
  transform-origin: 0 0;
}
.net-orbit i:nth-child(1) { transform: rotate(0deg)    translate(140px) translate(-50%, -50%); }
.net-orbit i:nth-child(2) { transform: rotate(120deg)  translate(140px) translate(-50%, -50%); background: var(--mint); }
.net-orbit i:nth-child(3) { transform: rotate(240deg)  translate(140px) translate(-50%, -50%); background: var(--gold); }
.net-cap {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(58, 58, 56, .5);
  white-space: nowrap;
}

/* ── 11. THẺ CHỨNG KIẾN ───────────────────────────────────────────────── */
.tcard {
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.tcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tcard-quote { width: 14px; height: 14px; opacity: .5; }
.stars { display: flex; gap: 3px; }
.stars i { width: 10px; height: 10px; background: var(--gold); display: block; }
.tcard-body {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(58, 58, 56, .82);
  margin-bottom: 20px;
}
.tcard-foot {
  margin-top: auto;          /* đẩy chân thẻ xuống đáy để các thẻ ngang hàng */
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 12px;
}
.tcard-av { width: 34px; height: 34px; object-fit: cover; flex: none; }
/* Avatar dạng chữ cái. Dùng thay ảnh chụp trong thẻ chứng kiến: ảnh shipper
   chỉ có MỘT tấm duy nhất (shipper-card.webp và food-card.webp là cùng file),
   nên đặt ảnh đó ở mọi thẻ sẽ lặp lại một khuôn mặt. */
.mono-av {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong);
  background: var(--paper-white);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--forest);
}
.tcard-who b {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 700;
}
.tcard-who span {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(58, 58, 56, .50);
  margin-top: 2px;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); background: var(--hair); border: 1px solid var(--hair); }
/* Hàng 2 cột: cột trái là chữ, cột phải là sơ đồ mạng lưới */
.net-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
/* Hàng 4 ô (quy trình 4 bước) */
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── 12. BẢNG DỊCH VỤ ────────────────────────────────────────────────── */
.svc-list { border: 1px solid var(--hair); background: var(--hair); }
.svc-row {
  background: var(--paper);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hair);
  transition: background .16s ease-out;
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: var(--paper-white); }
/* Bảng mức tiền (shipper): cột đầu là con số dài "200.000₫–800.000₫" chứ
   không phải ảnh 58px, nên phải cho cột này rộng hơn nếu không sẽ vỡ dòng. */
.svc-row.earn { grid-template-columns: 148px minmax(0, 1fr) auto; }
.svc-row.earn > .mono { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.svc-ic { width: 58px; height: 58px; object-fit: cover; }
.svc-nm {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--forest);
}
.svc-ds { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: rgba(58, 58, 56, .68); }

/* ── 13. BIỂU MẪU KỸ THUẬT (CTA) ────────────────────────────────────── */
.cta-box {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  padding: 42px 38px 38px;
}
/* 4 dấu góc chữ L 10×10 */
.cta-box::before, .cta-box::after,
.cta-corner::before, .cta-corner::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 0 solid var(--forest);
}
.cta-box::before { top: -1px; left: -1px;  border-top-width: 2px; border-left-width: 2px; }
.cta-box::after  { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.cta-corner::before { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.cta-corner::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 500;
}
.form-row label b { color: var(--coral); font-weight: 500; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper-white);
  border: 1px solid var(--hair);
  font-size: 15px;
  color: var(--grid);
  transition: border-color .15s ease-out;
}
.form-row textarea { min-height: 96px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--forest);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(58, 58, 56, .35); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-note { margin-top: 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: rgba(58, 58, 56, .5); text-align: center; }
.form-msg { display: none; margin-top: 16px; padding: 12px 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; border: 1px solid var(--hair-strong); }
.form-msg.on { display: block; }
.form-msg.ok  { border-color: var(--forest); color: var(--forest); background: rgba(233,182,180, .14); }
.form-msg.err { border-color: var(--coral); color: #B4432A; background: rgba(255, 140, 105, .12); }

/* Ảnh dùng làm thẻ vai trò: file gốc 1254×1254 (vuông). Khung cũ đặt
   aspect-ratio 3/2 + object-fit:cover nên cắt mất đầu ảnh — mất phần trên
   chính là nơi có khuôn mặt. Vuông 1:1 là khung đúng với file gốc. */
.role-card { display: flex; flex-direction: column; }
.role-card img.cover-1x1 {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 16px;
}

/* Ô thay thế khi KHÔNG có ảnh riêng cho một dịch vụ.
   food-card.webp và shipper-card.webp trong dự án là CÙNG MỘT FILE (trùng
   md5), nên không thể dùng shipper-card cho "Xe công nghệ" — sẽ ra ảnh y hệt
   dòng "Giao đồ ăn". Ô này giữ đúng ngôn ngữ thiết kế thay vì lặp ảnh. */
.tile-id {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  gap: 2px;
  background: var(--paper-white);
  border: 1px solid var(--hair);
  margin-bottom: 16px;
}
.tile-id b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--coral);
}
.tile-id span {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(58, 58, 56, .5);
}
   /* ── 14. VÒNG QUAY ẢNH TRONG APP ───────────────────────────────────────
   Ảnh chụp màn hình gốc đều 870×1884 (tỉ lệ 0.4618). Khung trước đây đặt
   9/17.5 = 0.514 và 3/2 = 0.667 nên object-fit:cover cắt mất phần trên —
   đầu màn hình, nơi có tiêu đề và logo, bị mất sạch. Dùng đúng tỉ lệ gốc. */
.shots { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); background: var(--hair); border: 1px solid var(--hair); }
.shot { background: var(--paper); padding: 14px 14px 10px; }
.shot img { width: 100%; aspect-ratio: 870 / 1884; object-fit: cover; }
.shot span { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(58, 58, 56, .45); text-align: center; }

/* ── 15. TIN TỨC ─────────────────────────────────────────────────────── */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.news-wrap { border: 1px solid var(--hair); background: var(--paper); overflow: hidden; }
.news-track { display: flex; gap: 0; width: max-content; animation: slide 46s linear infinite; }
.news-track:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.news-item {
  border-right: 1px solid var(--hair);
  padding: 20px 24px;
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.news-item h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--forest);
}
.news-item p { font-size: 13px; line-height: 1.55; color: rgba(58, 58, 56, .68); }
.news-item .mono-sm { color: rgba(58, 58, 56, .45); }
.news-empty { padding: 26px; font-family: var(--f-mono); font-size: 11px; color: rgba(58, 58, 56, .5); }

/* ── 16. NÚT TẢI ỨNG DỤNG ────────────────────────────────────────────── */
.dl-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--hair-strong);
  background: var(--paper);
  transition: background .16s ease-out, border-color .16s ease-out;
}
.dl:hover { background: var(--paper-white); border-color: var(--forest); }
.dl svg { width: 20px; height: 20px; flex: none; }
.dl small { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(58, 58, 56, .55); }
.dl b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--forest); margin-top: 1px; }
.dl-badge { height: 52px; }

/* ── 17. CHÂN TRANG ───────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--hair-strong); background: var(--paper); }
.foot {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 62px 28px 0;
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 34px;
}
.foot-brand .fl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-brand p { font-size: 13px; line-height: 1.6; color: rgba(58, 58, 56, .65); }
.foot-brand .co { margin-top: 12px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; color: rgba(58, 58, 56, .45); text-transform: uppercase; }
.foot h4 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 700;
  margin-bottom: 14px;
}
.foot li { padding: 5px 0; font-size: 13.5px; color: rgba(58, 58, 56, .68); cursor: pointer; transition: color .14s ease-out; }
.foot li:hover { color: var(--forest); }
.foot-bot {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 26px 28px 34px;
  margin-top: 52px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(58, 58, 56, .5);
}
.foot-bot button { font-family: inherit; font-size: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 3px; color: var(--forest); }

/* ── 18. THANH DÍNH ĐÁY ──────────────────────────────────────────────── */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;
  background: rgba(247, 247, 245, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair-strong);
  transform: translateY(100%);
  transition: transform .24s ease-out;
}
.dock.on { transform: translateY(0); }
.dock-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 11px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dock-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(58, 58, 56, .6); margin-right: 4px; }

/* ── 19. HỘP THOẠI ────────────────────────────────────────────────────── */
.mbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(18, 41, 29, .55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 84px 20px 40px;
  overflow-y: auto;
}
.mbox.on { display: flex; }
.mbox-in {
  width: 100%;
  max-width: 700px;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  padding: 34px;
}
.mbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); margin-bottom: 22px; }
.mbox-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -.025em; color: var(--forest); }
.mbox-x { width: 30px; height: 30px; border: 1px solid var(--hair-strong); display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; color: var(--forest); flex: none; }
.mbox-x:hover { background: var(--forest); color: var(--paper); }
.mbox-body { font-size: 14px; line-height: 1.7; color: rgba(58, 58, 56, .82); }
.mbox-body h4 { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); margin: 22px 0 8px; font-weight: 700; }
.mbox-body h4:first-child { margin-top: 0; }
.mbox-body ol { padding-left: 20px; list-style: decimal; }
.mbox-body li { margin-bottom: 7px; }
.mbox-body a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }

/* Điều khoản pháp lý — đầu hộp thoại: tên bộ chính sách, công ty, hồ sơ ĐKKD */
.mbox-meta { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 22px; background: rgba(179, 54, 48, .04); border: 1px solid var(--hair-forest); border-left: 2px solid var(--forest); }
.mbox-meta b { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.mbox-meta span { font-size: 12.5px; line-height: 1.6; color: var(--grid); }
.mbox-scope { padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--hair); color: var(--forest); font-weight: 600; }

/* Tiêu đề mục con (mục 1, 2, 3… trong từng PHẦN) */
.mbox-body h5 { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--forest-deep); margin: 18px 0 6px; }

/* Danh sách gạch đầu dòng trong nội dung điều khoản */
.mbox-body .mbox-ul { padding-left: 18px; margin: 0 0 4px; list-style: none; }
.mbox-body .mbox-ul li { position: relative; padding-left: 14px; margin-bottom: 7px; }
.mbox-body .mbox-ul li::before { content: "—"; position: absolute; left: 0; color: var(--forest); }
.faq-item { border-bottom: 1px solid var(--hair-soft); padding: 14px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--forest); margin-bottom: 6px; letter-spacing: -.015em; }
.faq-item p { font-size: 13.5px; color: rgba(58, 58, 56, .72); }

/* ── 20. LỘI THEO KHI CUỘN ────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .5s ease-out, transform .5s ease-out; }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .07s; }
.rv.d2 { transition-delay: .14s; }
.rv.d3 { transition-delay: .21s; }

.no-js-note { max-width: var(--wrap); margin: 0 auto; padding: 0 28px 40px; font-family: var(--f-mono); font-size: 11px; color: var(--forest); }

/* ── 21. THÍCH ỨNG MÀN HÌNH ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-act .btn-ghost { display: none; }
  .burger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .wire { max-width: 440px; margin-inline: auto; }
  .foot { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .shots { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 820px) {
  section { padding: 76px 0; }
  .bento { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .net-row { grid-template-columns: 1fr; gap: 40px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Không cần co quỹ đạo theo màn hình: .net rộng tối đa 450px nên bán kính
     140px luôn nằm trong khung (450/2 = 225 > 140). translate() dùng px chứ
     không dùng %, vì % tính theo chính phần tử 12px chứ không theo khung. */
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .hero-stat { border-right: none; border-bottom: 1px solid var(--hair-soft); padding-bottom: 14px; }
  .form-2 { grid-template-columns: 1fr; gap: 0; }
  .cta-box { padding: 32px 22px 28px; }
  .svc-row { grid-template-columns: 46px 1fr; gap: 14px; padding: 16px; }
  .svc-ic { width: 44px; height: 44px; }
  .svc-row.earn { grid-template-columns: 1fr auto; }
  .svc-row.earn > .mono { grid-column: 1 / -1; margin-bottom: 4px; }
  .svc-row .mono-sm { grid-column: 2; margin-top: 8px; }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .dock-label { display: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .foot { grid-template-columns: 1fr 1fr; padding: 46px 18px 0; }
  .foot-bot { padding: 22px 18px 28px; margin-top: 36px; }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .mbox-in { padding: 24px 18px; }
  .nav-word { display: none; }
}

/* ── 22. WIDGET COCO AI ────────────────────────────────────────────────
   Widget có sẵn của hệ thống (Groq-powered), tự inject <style> với #cocoFab,
   #cocoBadge, #cocoWin. Giữ nguyên chức năng nhưng ép lại ngoại hình cho khớp
   design system: vuông, bo 2px, viền 1px, bỏ gradient và đổ bóng.
   Selector phải dùng ID vì widget gắn style qua id, không qua class. */
#cocoFab {
  bottom: 96px !important;      /* nhảy lên trên thanh dock dính đáy */
  width: 48px !important; height: 48px !important;
  border-radius: 2px !important;
  background: var(--forest) !important;
  border: 1px solid var(--forest) !important;
  box-shadow: none !important;
  font-size: 1.1rem !important;
}
#cocoFab:hover {
  background: var(--forest-deep) !important;
  transform: none !important;
}
#cocoBadge {
  width: 8px !important; height: 8px !important;
  border-radius: 0 !important;
  background: var(--mint) !important;
  border: 1px solid var(--forest) !important;
  top: -1px !important; right: -1px !important;
}
#cocoWin {
  bottom: 158px !important;
  border-radius: 2px !important;
  border: 1px solid var(--hair-strong) !important;
  box-shadow: none !important;
  font-family: var(--f-body) !important;
  overflow: hidden !important;
}
.coco-head {
  border-radius: 0 !important;
  background: var(--forest) !important;
  box-shadow: none !important;
}
.coco-msg { border-radius: 2px !important; font-family: var(--f-mono) !important; }
.coco-input {
  border-radius: 0 !important;
  border-top: 1px solid var(--hair) !important;
  font-family: var(--f-body) !important;
}
.coco-send { border-radius: 2px !important; background: var(--forest) !important; }
.coco-chip { border-radius: 2px !important; border-color: var(--hair-strong) !important; }

@media (max-width: 820px) {
  #cocoFab { bottom: 112px !important; right: 12px !important; }
  #cocoWin { right: 12px !important; }
}

/* ── 23. GIẢM CHUYỂN ĐỘNG ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}