/* ============================================================
   ORBIZ · DARK LIME-AGENCY — HTML design system (v1.1, 2026-07-25)
   CHANGELOG v1.1 (Quốc Anh chốt 25/7): bộ LỒI-LÕM neumorphic học từ
   CEO Cockpit (soft-minimal dark) — nút đục khối bằng cặp bóng
   sáng/tối, ấn giữ LÕM (inset); .btn-ghost viền → .btn-neu lồi thuần;
   thêm --line-strong (viền UI ≥3:1), .well/.bar/.chip; .panel-light--neu.
   Phong cách landing/sales "digital-agency" học từ template "Orbiz"
   (Masuder Rahaman, Behance 202923745). KHÁC 10X Soft-Minimal (sạch/lạnh/đỏ)
   và Wabi-Sabi (ấm/mộc/thiền): đây là DARK + LIME rực + typography
   condensed to-bản, "punchy", trẻ, agency-bold.

   DÙNG KHI: landing/sales page muốn gây chú ý mạnh, tông tech-forward,
   khán giả trẻ. KHÔNG dùng cho dashboard (→ soft-minimal dark) hay
   bài viết chiêm nghiệm (→ wabi-sabi).

   CÁCH DÙNG:
   - Tự chứa: copy :root + component cần dùng vào <style> của trang.
   - Hoặc <link rel="stylesheet" href="html-orbiz-agency.css">.
   - Font: Oswald (display condensed) + Be Vietnam Pro (thân).
     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap" rel="stylesheet">

   ⚠️ BẪY FONT (đọc kỹ): template gốc dùng ANTON cho heading — nhưng
   ANTON KHÔNG có dấu tiếng Việt (đ, ă, ơ, dấu chồng vỡ). Nên MẶC ĐỊNH
   display = OSWALD (condensed, đủ dấu VN, thay Anton an toàn). Chỉ đổi
   sang Anton khi heading THUẦN tiếng Anh (--font-display).

   QUY TẮC VÀNG (đừng phá):
   - Đúng 3 màu: nền navy / chữ / 1 accent lime. Accent < 5% diện tích —
     lime CHỈ dùng cho: 1 keyword bôi trong heading + CTA chính + icon
     badge + số giá nổi bật. Bôi nhiều lime = mất "punch", thành rẻ tiền.
   - Heading = condensed IN HOA + bôi lime ĐÚNG 1 keyword/section (chữ ký).
   - Nền tối → chữ SÁNG (--text ≥4.5:1). Đừng để chữ xám-mờ chìm.
   - CTA lime nền ĐẶC + chữ ĐEN (contrast cao). Đừng làm nút mờ cùng nền.
   - Section xen kẽ: khối navy tối ↔ khối trắng sạch, đều BO GÓC LỚN.
   ============================================================ */

:root{
  /* — Màu (nền navy / chữ sáng / accent lime) — */
  --bg:        #0E1621;   /* navy gần đen — nền trang chủ đạo (đo từ hero) */
  --surface:   #27363D;   /* slate xanh-đen — mặt card, khối nhấn (brand: Secondary) */
  --surface-2: #182028;   /* card tối hơn nền chút, cho lớp giữa */
  --text:      #F4F6F5;   /* ink sáng — contrast cao trên navy */
  --text-muted:#9AA6AB;   /* chữ phụ — vẫn ≥4.5:1 trên --bg */
  --accent:    #EDFF71;   /* ACCENT DUY NHẤT — lime rực (brand: Primary). Đổi brand chỉ sửa ở đây */
  --accent-ink:#0E1621;   /* CHỮ trên nền lime = navy đậm (KHÔNG để chữ trắng trên lime → chìm) */
  --cyan:      #D0EFEF;   /* tertiary — pill phụ "View Work", chi tiết mềm */
  --line:      #2C3A42;   /* hairline mờ — CHỈ cho kẻ trang trí (1,4:1 — cấm dùng cho viền nút/icon) */
  --line-strong:#64747E;  /* ★v1.1 viền NÚT/UI component — đo 3,4:1 trên panel, 3,8:1 trên bg */

  /* ★v1.1 — BỘ LỒI-LÕM neumorphic (đo theo panel --surface-2 #182028, học từ CEO Cockpit):
     phần tử CÙNG MÀU NỀN, hình khối đục bằng cặp bóng tối #060B10 + sáng #24343F */
  --neu-raise:    6px 6px 13px #060B10, -6px -6px 13px #24343F;   /* LỒI đậm — nút */
  --neu-raise-sm: 4px 4px 9px  #060B10, -4px -4px 9px  #22303B;   /* LỒI nhẹ — chip/eyebrow */
  --neu-inset:    inset 4px 4px 9px #060B10, inset -4px -4px 9px #22303B; /* LÕM — ô/bar/nút đang ấn */

  --card-shadow:   0 8px 28px rgba(0,0,0,.40);
  --card-shadow-h: 0 18px 44px rgba(0,0,0,.52);
  --glow:      radial-gradient(60% 80% at 50% 100%, rgba(160,200,90,.16), transparent 70%); /* glow xanh-lá mờ đáy section tối */

  /* — Hình học & nhịp — */
  --radius:    16px;
  --radius-lg: 24px;
  --pill:      999px;
  --space-section: 104px;    /* dọc giữa section ≥104 desktop / 64 mobile */
  --max-content: 1120px;
  --max-prose:   680px;

  /* — Font — */
  --font-display:'Oswald','Anton',Impact,sans-serif;  /* condensed VN-safe. Đổi 'Anton' lên đầu nếu heading thuần Anh */
  --font-body:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--max-content);margin:0 auto;padding:0 24px}
.prose{max-width:var(--max-prose);margin-inline:auto}
section{padding:var(--space-section) 0}
@media(max-width:720px){ section{padding:64px 0} :root{--space-section:64px} }

/* — Frame: cả trang/section nằm trong khung bo góc lớn (nét nhận diện Orbiz) — */
.frame{border-radius:var(--radius-lg);overflow:hidden;position:relative}

/* — Panel tối có glow đáy (section chủ đạo) — */
.panel{background:var(--surface-2);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.panel>*{position:relative;z-index:1}
/* — Panel sáng (section trắng xen kẽ) — chữ đổi sang navy — */
.panel-light{background:#FFFFFF;color:#141C22;border-radius:var(--radius-lg)}
.panel-light .muted{color:#5C6B72}
.panel-light h1,.panel-light h2,.panel-light h3{color:#141C22}

/* — Typography: hierarchy bằng cỡ + condensed uppercase; bôi lime 1 keyword — */
/* ⚠️ line-height ≥1.3 cho heading IN HOA — SỬA 07/09/2026, đừng hạ lại.
   Chữ IN HOA tiếng Việt có DẤU CHỒNG (Ộ Ữ Ề Ẫ: mũ đội thêm dấu thanh) cao hơn hẳn
   chữ Latin, mà Oswald lại là font hẹp nên thân chữ đã cao sẵn. Số cũ 1.02/1.06 lấy
   từ mẫu tiêu đề tiếng Anh — để vậy thì heading xuống 2 dòng là dấu dòng dưới ĐÂM
   VÀO CHÂN dòng trên. Phát hiện khi QA soi trang chủ 10xos.net 7/9. */
h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
   font-size:clamp(38px,6.4vw,72px);line-height:1.3;letter-spacing:.005em}
h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
   font-size:clamp(30px,4.4vw,52px);line-height:1.3;letter-spacing:.005em}
h3{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
p{font-size:18px;line-height:1.65}
.lead{font-size:clamp(17px,2.1vw,20px);color:var(--text-muted);line-height:1.6}
.muted{color:var(--text-muted)}
a{color:var(--accent);text-underline-offset:3px}
/* ★ CHỮ KÝ: bôi lime đúng 1 keyword trong heading */
.hl{color:var(--accent)}

/* — Eyebrow: pill nhỏ có emoji, marker đầu section — */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
         letter-spacing:.06em;color:var(--text);padding:8px 16px;border-radius:var(--pill);
         background:rgba(255,255,255,.06);border:1px solid var(--line)}
.panel-light .eyebrow{background:#F1F4F3;border-color:#E3E8E7;color:#141C22}

/* — ★v1.1 CTA: pill lime nền ĐẶC, LỒI (neu) + glow · hover NHẤC · ấn giữ LÕM — */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);
     font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;
     padding:17px 30px;border-radius:var(--pill);text-decoration:none;cursor:pointer;border:0;
     box-shadow:var(--neu-raise), 0 6px 16px rgba(237,255,113,.14);
     transition:transform .15s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);
     box-shadow:7px 7px 15px #060B10, -7px -7px 15px #263642, 0 10px 24px rgba(237,255,113,.24)}
.btn:active{transform:translateY(0);filter:none;
     box-shadow:inset 4px 4px 9px #B4C44A, inset -4px -4px 9px #FCFFB0}
.btn::after{content:"↗";font-size:15px}
/* nút phụ cyan — cùng cơ chế lồi-lõm */
.btn-cyan{background:var(--cyan);color:#12303A;box-shadow:var(--neu-raise), 0 6px 16px rgba(208,239,239,.12)}
.btn-cyan:hover{box-shadow:7px 7px 15px #060B10, -7px -7px 15px #263642, 0 10px 22px rgba(208,239,239,.20)}
.btn-cyan:active{box-shadow:inset 4px 4px 9px #9FBFBF, inset -4px -4px 9px #F0FFFF}
/* ★v1.1 nút NEU — lồi thuần kiểu eyebrow cockpit: cùng màu nền, KHÔNG viền,
   hình khối 100% từ bóng; hover chữ lime; ấn giữ LÕM. (.btn-ghost cũ = alias,
   trang cũ không vỡ; biến thể .lime = chữ lime sẵn) */
.btn-neu,.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--text);
     font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;
     padding:17px 30px;border-radius:var(--pill);text-decoration:none;cursor:pointer;border:0;
     box-shadow:var(--neu-raise);
     transition:transform .15s ease,box-shadow .18s ease,color .18s ease}
.btn-neu:hover,.btn-ghost:hover{transform:translateY(-1px);color:var(--accent);
     box-shadow:7px 7px 15px #060B10, -7px -7px 15px #263642}
.btn-neu:active,.btn-ghost:active{transform:translateY(0);box-shadow:var(--neu-inset);color:var(--accent)}
.btn-neu.lime{color:var(--accent)}

/* — ★v1.1 Ô LÕM + BAR LÕM + CHIP LỒI (kiểu countdown/progress/eyebrow cockpit) — */
.well{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--neu-inset);padding:18px 22px}
.bar{height:10px;border-radius:var(--pill);background:var(--surface-2);box-shadow:var(--neu-inset);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:var(--pill)}
.chip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      color:var(--accent);padding:9px 16px;border-radius:var(--pill);background:var(--surface-2);box-shadow:var(--neu-raise-sm)}

/* — ★v1.1 Trên NỀN SÁNG: neu cần "đất" → dùng .panel-light--neu (#EFF2F1, KHÔNG trắng tinh).
   CTA lime phải có viền lime-đậm #6E7529 (5,0:1) vì mép lime/trắng chỉ 1,1:1. — */
.panel-light--neu{background:#EFF2F1;color:#141C22;border-radius:var(--radius-lg)}
.panel-light .btn,.panel-light--neu .btn{border:1px solid #6E7529;
     box-shadow:6px 6px 13px #C9CECC, -6px -6px 13px #FFFFFF, 0 6px 14px rgba(140,160,40,.18)}
.panel-light .btn:hover,.panel-light--neu .btn:hover{box-shadow:7px 7px 15px #C4C9C7, -7px -7px 15px #FFFFFF, 0 10px 22px rgba(140,160,40,.28)}
.panel-light .btn:active,.panel-light--neu .btn:active{box-shadow:inset 4px 4px 9px #B4C44A, inset -4px -4px 9px #FCFFB0}
.panel-light--neu .btn-neu,.panel-light--neu .btn-ghost{background:#EFF2F1;color:#141C22;
     box-shadow:6px 6px 13px #C9CECC, -6px -6px 13px #FFFFFF}
.panel-light--neu .btn-neu:hover,.panel-light--neu .btn-ghost:hover{color:#4F5800;box-shadow:7px 7px 15px #C4C9C7, -7px -7px 15px #FFFFFF}
.panel-light--neu .btn-neu:active,.panel-light--neu .btn-ghost:active{box-shadow:inset 4px 4px 9px #C9CECC, inset -4px -4px 9px #FFFFFF;color:#4F5800}
.panel-light--neu .well{background:#EFF2F1;box-shadow:inset 4px 4px 9px #C9CECC, inset -4px -4px 9px #FFFFFF}
.panel-light--neu .bar{background:#EFF2F1;box-shadow:inset 3px 3px 7px #C9CECC, inset -3px -3px 7px #FFFFFF}
.panel-light--neu .bar>i{background:#5F6900}

/* — Card nội dung: slate bo góc + icon badge lime — */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:24px;box-shadow:var(--card-shadow);
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-h);border-color:#3A4A52}
.card h3{margin:16px 0 8px}
/* ★ icon badge: ô vuông bo góc màu lime, icon navy */
.icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
      border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:20px}

/* — Pricing: 3 cột, cột giữa đảo màu (featured) — */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){ .price-grid{grid-template-columns:1fr} }
.price-card{background:#FFFFFF;color:#141C22;border-radius:var(--radius-lg);padding:32px 28px;border:1px solid #E7ECEB}
.price-card .amount{font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:.01em}
.price-card.featured{background:var(--surface);color:var(--text);border-color:var(--line);transform:scale(1.03)}
.price-card.featured .amount{color:var(--accent)}
@media(max-width:820px){ .price-card.featured{transform:none} }

/* — Footer trên nền tối — */
.footer{background:var(--surface-2);border-radius:var(--radius-lg);padding:48px 40px;position:relative;overflow:hidden}
.footer::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.footer>*{position:relative;z-index:1}

/* — Motion — reveal nhẹ; tôn trọng reduced-motion — */
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:reveal .6s ease both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}
@media(prefers-reduced-motion:reduce){ .reveal{animation:none} html{scroll-behavior:auto} }