/* ============================================================
   base.css — SoloForwarder design system v2 (2026-08-06).
   Direction: REFERENCE CLONE (PROJECT-BRIEF §12b): layout theo
   _reference/image copy.png (Biztop) + image copy 2.png (SMM course),
   hệ xanh của ảnh đổi sang hệ tím. Tokens sync với assets/js/tailwind.config.js.
   Cả 4 trang đã dùng grammar v2; os-frame + quote-sheet giữ lại (đã restyle),
   photo-treat giữ cho style-preview.html cũ, không dùng trên 4 trang chính.
   ============================================================ */

/* ---------- mechanical reset (template contract, keep) ---------- */
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{ -webkit-font-smoothing:antialiased; }

/* ---------- tokens (mirror of tailwind.config.js) ---------- */
:root{
  --signal:#5B3DF5; --signal-deep:#4526D9; --signal-light:#9D8BFA; --mist:#EFECFE;
  --sky:#F8F9FC; --line:#E6E4F2; --night:#17142E; --dusk:#4D4966;
  --command:#120E2A; --command-2:#1A1442; --fog:#EFEDFA; --fog-mut:#B9B4D6;
  --mint:#0F9D6C; --mint-ink:#0C7E57;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ---------- global type & surfaces ---------- */
body{ background:var(--sky); color:var(--dusk); font-family:"Be Vietnam Pro",system-ui,sans-serif;
  font-size:1.0625rem; line-height:1.7; overflow-x:hidden; }
h1,h2,h3,h4{ font-family:Manrope,"Bricolage Grotesque",system-ui,sans-serif; color:var(--night); text-wrap:balance; }
p{ text-wrap:pretty; }
::selection{ background:rgba(91,61,245,.22); }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--signal); outline-offset:3px; border-radius:6px; }

/* ---------- buttons v2 (pill + mũi tên tròn theo ref Biztop) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.625rem;
  font-weight:700; font-size:.9375rem; line-height:1; border-radius:999px; padding:13px 22px; min-height:48px;
  transition:background .2s, border-color .2s, color .2s, transform .18s var(--ease-out), box-shadow .25s;
  will-change:transform; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-solid{ background:var(--signal); color:#fff; }
.btn-solid:hover{ background:var(--signal-deep); transform:translateY(-1px); }
.btn-night{ background:var(--command); color:#fff; }
.btn-night:hover{ background:var(--command-2); transform:translateY(-1px); }
.btn-line{ background:#fff; color:var(--night); border:1px solid var(--line); }
.btn-line:hover{ border-color:var(--signal); color:var(--signal-deep); transform:translateY(-1px); }
/* chip mũi tên tròn bên trong nút (dấu ≫ của ref) */
.btn__arrow{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; flex:none;
  transition:transform .2s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(2px); }
.btn-solid .btn__arrow{ background:#fff; color:var(--signal-deep); }
.btn-night .btn__arrow{ background:var(--signal); color:#fff; }
.btn-line .btn__arrow{ background:var(--mist); color:var(--signal-deep); }

/* ---------- kicker (eyebrow nhỏ có hoa thị, theo ref; waiver §12b) ---------- */
.kicker{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:600; color:var(--night);
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px; }
.kicker::before{ content:"✳"; color:var(--signal); font-size:.75rem; line-height:1; }
.kicker--on-dark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--fog); }

/* ---------- nav ---------- */
.navlink{ color:var(--dusk); transition:color .2s; }
.navlink:hover{ color:var(--night); }
.navlink[aria-current="page"]{ color:var(--signal-deep); box-shadow:inset 0 -2px 0 0 var(--signal); }
/* nav trên nền tối (header Biztop đặt trên hero đậm) */
.navlink--dark{ color:var(--fog-mut); transition:color .2s; }
.navlink--dark:hover{ color:#fff; }
.navlink--dark[aria-current="page"]{ color:#fff; box-shadow:inset 0 -2px 0 0 var(--signal); }

/* ---------- form fields (label TRÊN input, contract giữ) ---------- */
.field{ width:100%; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; color:var(--night); font-size:1rem; transition:border-color .2s, box-shadow .2s; }
.field::placeholder{ color:#6E6A8F; }
.field:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(91,61,245,.18); }
.field-err{ border-color:#C43D3D; }
.field-errmsg{ color:#C43D3D; font-size:.875rem; margin-top:6px; }
select.field{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234D4966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; }

/* ---------- reveal-on-scroll + hero entrance (mechanics contract, keep) ---------- */
html.js .reveal{ opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay:var(--d,0s); }
html.js .reveal.in{ opacity:1; transform:none; }
@keyframes swRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
html.anim .rise{ opacity:0; animation:swRise .7s var(--ease-out) forwards; animation-delay:var(--d,0s); }

/* ---------- ảnh người v2: khung bo lớn, KHÔNG tint; blend chân ảnh khi đặt trên nền đậm ---------- */
.photo-card{ position:relative; overflow:hidden; border-radius:20px; }
.photo-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-blend{ position:relative; overflow:hidden; }
.photo-blend::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(18,14,42,.6) 100%); }
/* (gradient chỉ được phép trong xử lý ảnh, không bao giờ trên UI/chữ/nút) */

/* ---------- hover raise ---------- */
.raiseable{ transition:box-shadow .25s, border-color .25s; }
.raiseable:hover{ box-shadow:0 12px 32px -16px rgba(23,20,46,.25); border-color:#D8D2FA; }

/* ============================================================
   Thủ pháp thị giác lấy từ _reference/image copy 2.png (map sang hệ tím)
   ============================================================ */

/* thẻ nổi quanh ảnh người trong hero (ref: 3 thẻ trắng bay quanh nhân vật) */
.float-note{ background:#fff; border-radius:16px; padding:14px 18px;
  box-shadow:0 18px 40px -22px rgba(23,20,46,.45), 0 2px 8px -4px rgba(23,20,46,.12); }

/* note nghiêng kiểu giấy dán (ref: "Your future self will thank you.") */
.tilt-note{ background:#fff; border-radius:16px; padding:18px 22px;
  box-shadow:0 18px 40px -22px rgba(23,20,46,.45); transform:rotate(-3deg); }
.tilt-note--right{ transform:rotate(3deg); }

/* ô icon màu trong card tính năng (ref: icon trong nền tròn/vuông màu) */
.icon-tile{ display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; background:var(--mist); color:var(--signal-deep); flex:none; }
.icon-tile--solid{ background:var(--signal); color:#fff; }
.icon-tile--deep{ background:var(--command); color:var(--signal-light); }

/* gạch tay dưới heading (ref: nét cong cam dưới tiêu đề) */
.swoosh{ position:relative; display:inline-block; }
.swoosh::after{ content:""; position:absolute; left:2%; right:2%; bottom:-.34em; height:.42em;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C42 3.2 92 1.8 140 4.2c20 1 40 3 57 5.6' fill='none' stroke='%235B3DF5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events:none; }

/* chấm trang trí rải quanh hero (ref: confetti cam/xanh) */
.deco-dot{ position:absolute; border-radius:999px; pointer-events:none; }

/* giấy tờ xếp chồng: dùng cho toolkit + tài sản tốt nghiệp */
.paper{ background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 14px 34px -22px rgba(23,20,46,.4); }

/* số lớn kiểu bảng giá (ref: $297 cỡ đại) */
.price-xl{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3rem); line-height:1; letter-spacing:-.02em; color:var(--night); }

/* đĩa nền khổng lồ làm sân khấu cho ảnh người (ref: đĩa xanh nhạt sau nhân vật) */
.stage-disc{ position:absolute; border-radius:999px; background:var(--mist); pointer-events:none; }

/* ảnh tan vào nền thay vì nằm trong hộp bo góc */
.photo-bleed{ -webkit-mask-image:linear-gradient(180deg,#17142E 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#17142E 68%,transparent 100%); }
.photo-bleed--r{ -webkit-mask-image:linear-gradient(90deg,#17142E 66%,transparent 100%);
  mask-image:linear-gradient(90deg,#17142E 66%,transparent 100%); }
.photo-bleed--l{ -webkit-mask-image:linear-gradient(270deg,#17142E 66%,transparent 100%);
  mask-image:linear-gradient(270deg,#17142E 66%,transparent 100%); }

/* biển số giai đoạn trên nền tối */
.stage-plate{ display:inline-flex; align-items:center; gap:.75rem; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:8px 14px; }
.stage-plate__no{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:600; font-size:1.5rem;
  line-height:1; color:var(--signal-light); }
.stage-plate--accent{ background:var(--signal); border-color:var(--signal); }
.stage-plate--accent .stage-plate__no{ color:#fff; }

/* thẻ giấy trắng đè lệch góc dưới khung hiện vật */
.slip{ background:#fff; border-radius:12px; padding:10px 14px;
  box-shadow:0 16px 36px -20px rgba(18,14,42,.7); }

/* bìa kẹp hồ sơ: tab + tờ */
.dossier__tab{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px;
  border:1px solid var(--line); border-bottom:0; background:var(--sky); color:var(--dusk);
  border-radius:16px 16px 0 0; font-weight:600; font-size:.875rem; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s; }
.dossier__tab[aria-selected="true"]{ background:#fff; color:var(--signal-deep);
  box-shadow:inset 0 3px 0 0 var(--signal); }
.dossier__sheet{ background:#fff; border:1px solid var(--line); border-radius:0 16px 16px 16px; padding:26px 28px; }

/* chip mã mono dùng lại khắp trang */
.chip-mono{ display:inline-flex; align-items:center; gap:.5rem; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.8125rem; border-radius:999px; padding:6px 14px; background:var(--mist); color:var(--signal-deep); }
.chip-mono--ghost{ background:transparent; border:1px solid var(--line); color:var(--dusk); }
.chip-mono--dark{ background:rgba(255,255,255,.08); color:var(--fog-mut); }

/* chấm trạng thái thở nhẹ trong màn OS */
@keyframes sfPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.dot-live{ width:8px; height:8px; border-radius:999px; background:var(--mint); flex:none;
  animation:sfPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .dot-live{ animation:none; opacity:1; } }


/* ---------- danh mục khóa học kiểu Brandcamp (trang Course) ---------- */
.phase-badge{ width:46px; height:46px; border-radius:999px; background:var(--signal); color:#fff;
  display:grid; place-items:center; flex:none;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:600; font-size:1.125rem; }



/* chú thích kiểu bản vẽ: chấm tím + nhãn (khối tốt nghiệp) */
.pin{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.94);
  border-radius:999px; padding:7px 14px 7px 9px; font-size:.8125rem; font-weight:600; color:var(--night);
  box-shadow:0 10px 26px -14px rgba(23,20,46,.5); }
.pin::before{ content:""; width:9px; height:9px; border-radius:999px; background:var(--signal); flex:none; }

/* con dấu tròn đóng nghiêng lên thẻ giá */
.stamp{ display:grid; place-items:center; text-align:center; width:112px; height:112px; border-radius:999px;
  border:2px solid var(--signal); color:var(--signal-deep); transform:rotate(-12deg);
  font-weight:700; font-size:.75rem; line-height:1.25; background:rgba(239,236,254,.92); }

/* tờ ghi chú của người dựng chương trình */
.note-paper{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.note-paper p + p{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }

/* thẻ thành viên mạng lưới */
.member-card{ background:var(--command); color:var(--fog); border-radius:20px; padding:26px;
  box-shadow:0 26px 60px -34px rgba(18,14,42,.75); }

/* ---------- UX danh mục khóa: hàng bài quét mắt được + neo cuộn ---------- */
.course-anchor{ scroll-margin-top:96px; }
.lesson{ display:flex; gap:18px; padding:14px 12px 14px 8px; border-bottom:1px solid var(--line);
  border-radius:12px; transition:background .18s; }
.lesson:hover{ background:#fff; }
.lesson__no{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.75rem; font-weight:600;
  color:var(--signal-deep); flex:none; width:34px; padding-top:3px; }
.lesson__desc{ max-width:58ch; }
/* chip nhảy tới từng khóa */
.jump-chip{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:8px 16px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--night);
  font-size:.875rem; font-weight:600; transition:border-color .2s, color .2s, background .2s; }
.jump-chip:hover{ border-color:var(--signal); color:var(--signal-deep); background:var(--mist); }
.jump-chip__no{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.75rem; color:var(--signal-deep); }


/* ---------- biển tên công ty chưa điền (hero trang Course) ---------- */
.nameplate{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px;
  box-shadow:0 20px 44px -24px rgba(23,20,46,.5); }

/* ---------- FAQ accordion <details class="faq"> (contract) ---------- */
details.faq{ }
details.faq summary{ list-style:none; cursor:pointer; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq .chev{ transition:transform .25s var(--ease-out); }
details.faq[open] .chev{ transform:rotate(180deg); }

/* ---------- khung sản phẩm Forwarder OS (dùng ở index, courses, forwarder-os) ---------- */
.os-frame{ border-radius:20px; overflow:hidden; background:var(--command-2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 32px 72px -40px rgba(18,14,42,.35), 0 4px 16px -8px rgba(91,61,245,.12); }
.os-frame__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--fog-mut); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; }
.os-frame__body{ background:#fff; }

/* ---------- panel giá kiểu tờ báo giá nghề (index, forwarder-os, mang-luoi) ---------- */
.quote-sheet{ background:#fff; border:1px solid var(--line); border-radius:24px;
  box-shadow:0 32px 72px -40px rgba(18,14,42,.35), 0 4px 16px -8px rgba(91,61,245,.12); }
.quote-sheet__row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:6px 16px; padding:14px 0; border-bottom:1px solid var(--line); }
.quote-sheet__row:last-of-type{ border-bottom:0; }

/* ============================================================
   Gia cố responsive (2026-08-13) — áp cho cả 4 trang
   ============================================================ */

/* Chống blowout: một chuỗi nowrap (tên file, mã lô, đường dẫn) từng đẩy
   track của grid rộng hơn container, gây tràn ngang ở 320-360px.
   min-width:0 cho item grid là cách sửa chuẩn: track co lại theo container,
   phần chữ dài tự truncate như thiết kế. */
.grid > *{ min-width:0; }

/* Thanh tiêu đề khung OS: cắt bớt đường dẫn dài thay vì nong khung ra */
.os-frame__bar{ min-width:0; }
.os-frame__bar > :first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-frame__bar > :last-child{ flex:none; }
/* Dòng trong màn OS: chữ dài co lại, chip trạng thái giữ nguyên */
.os-frame__body .truncate{ min-width:0; }

/* Vùng bấm tối thiểu 44px (WCAG target size) cho mọi link điều hướng */
.navlink, .navlink--dark{ display:inline-flex; align-items:center; min-height:44px; }
.navlink.block, .navlink--dark.block{ display:flex; }
.brandmark{ display:inline-flex; align-items:center; min-height:44px; }
details.faq summary{ min-height:44px; }

/* ---------- reduced motion (contract) ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .rise{ opacity:1 !important; }
}

/* ---------- touch: bỏ hover-transform dính sau tap (contract) ---------- */
@media (hover:none){
  .btn-solid:hover,.btn-line:hover,.btn-night:hover{ transform:none; }
}