/* Bói Cá — CSS nền dùng chung cho 8 trang (2026-10-17) */
/* Design tokens — nguồn duy nhất */
:root{
  --bg:#FFF8EE;
  --bg-raise:#FFFFFF;
  --bg-raise2:#F0EADC;
  --ink:#14303B;
  --line:#9F9E9B;
  --line-strong:#86847F;
  --muted:#5A6B72;
  --muted2:#7C8C92;
  --river:#1E9CC7;
  --river-deep:#0B4F66;
  --ember:#F0782C;
  --ember-text:#B04E10;
  --wrap:1180px;
  --r:4px;
  /* bổ sung vào bộ nhận diện (2026-10-17) */
  --ember-strong:#D2601A;   /* số liệu lớn màu cam trên nền sáng (var(--ember) chỉ đạt 2.7:1) */
  --on-dark:#9FB6BD;        /* chữ phụ trên nền tối */
  --on-dark-strong:#C7D6DA; /* link trên nền tối */
  --on-dark-subtle:#7E97A0; /* nhãn nhỏ trên nền tối */
  --river-light:#5BBDE0;    /* nhãn xanh trên nền tối */
  --river-pale:#CFE7F0;     /* chữ trên nền xanh đậm */
  --dark-line:#3C5560;      /* đường kẻ trên nền tối */
  --success:#2E9E5B;
  --danger:#B3261E;          /* thông báo lỗi form */
  --ember-hover:#F48C4A;     /* nút cam khi rê chuột */        /* chấm trạng thái "đang nhận khách" */
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:96px 0;border-bottom:1px solid var(--line)}
@media (max-width:1024px){section{padding:56px 0}}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);flex-shrink:0}
h2.t{font-size:clamp(28px,3.6vw,42px);line-height:1.2;max-width:680px}
.dek{margin-top:16px;color:var(--muted);font-size:17px;max-width:620px;line-height:1.6}
/* reveal-on-scroll (single orchestrated motion, not per-card spam) */
.reveal{opacity:.5;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
::selection{background:var(--ember);color:#fff}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r);padding:14px 24px;font-weight:700;font-size:15px;cursor:pointer;border:1.5px solid transparent;line-height:1.2;letter-spacing:.01em;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover{background:var(--ember-hover);transform:translateY(-1px)}
.btn-line{border-color:var(--line-strong);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--bg-raise)}
:focus-visible{outline:2px solid var(--river);outline-offset:2px}
/* header */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:stretch}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--ember);z-index:60;transition:width .1s linear}
@media (prefers-reduced-motion: reduce){.scroll-progress{transition:none}}
.nav{flex:1;display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;min-width:0}
.nav-cta{display:flex;align-items:center;justify-content:center;height:72px;padding:0 30px;background:var(--ember);color:#fff;font-weight:700;font-size:15px;letter-spacing:.01em;flex-shrink:0;transition:background .15s ease}
.nav-cta:hover{background:var(--ember-hover)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--ink)}
.logo svg{width:26px;height:26px}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:15px;font-weight:600;color:var(--muted);display:flex;gap:7px;align-items:center;border-bottom:2px solid transparent;padding:3px 0;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);border-color:var(--ember)}
.nav-links .ix{font-size:12px;color:var(--river)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:4px;padding:8px;cursor:pointer;line-height:0}
.nav-toggle svg{width:20px;height:20px;color:var(--ink)}
/* ===== hero (rebuilt as a static, always-visible block — no scroll-reveal fade,
   since it is the first thing on screen and a fade-in here only produces a
   flash of half-opacity/shifted text before JS catches up) ===== */
.hero{padding:0;border-bottom:none}
.hero h1 .dot-accent{color:var(--ember)}
.bar-chart i:last-child{background:var(--ember)}
/* this line — not .hero-grid's — is the single source of the seam above the ticker: .wrap (centered, with side gutters) is narrower than the full-bleed marquee row, so a border drawn on .hero-grid itself stopped short of the page edges while the ticker's own dividers ran edge-to-edge, leaving the outermost ticker dividers with no line to meet. Only a border on this full-width element can span the same edge-to-edge width as the ticker it sits above. */
.marquee-track{display:flex;width:max-content}
.marquee{display:flex;gap:0;white-space:nowrap;font-size:12px;letter-spacing:.04em;color:var(--muted2);text-transform:uppercase;animation:marquee 28s linear infinite}
.marquee-wrap:hover .marquee{animation-play-state:paused}
.marquee span{flex-shrink:0;padding:20px 26px;border-right:1px solid var(--line)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* reasons grid */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.reason .ix{font-size:13.5px;color:var(--river);font-weight:600}
.reason h3{font-size:17px;font-weight:700;margin:12px 0 8px}
.reason p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
/* services */
.svc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:8px}
.services{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc .ix{font-size:13.5px;color:var(--river);font-weight:600}
.svc h3{font-size:17px;margin:14px 0 8px}
.svc p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.capacity{display:inline-flex;align-items:center;gap:8px;margin-top:40px;background:var(--bg-raise);border:1px solid var(--line-strong);border-radius:30px;padding:9px 18px;font-size:12px;color:var(--river-deep);font-weight:600;letter-spacing:.03em}
.capacity .dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.qual .wrap{max-width:720px}
.pill{display:inline-flex;margin-top:24px;border:1px solid var(--river);color:var(--river-deep);border-radius:30px;padding:8px 18px;font-size:12px;font-weight:600}
.qual .btn{margin-top:28px}
/* case studies */
.case-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.cases{margin-top:40px;display:flex;flex-direction:column;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.case{background:var(--bg);display:grid;grid-template-columns:.9fr 1.6fr;gap:30px;padding:34px 0;align-items:center;transition:background .15s ease}
.case:hover{background:var(--bg-raise)}
.case .metric{font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--ember)}
.case .tag{display:block;margin-top:10px;font-size:12px;color:var(--river);text-transform:uppercase;letter-spacing:.05em}
.case h3{font-size:17px;margin:0 0 8px}
.case p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:460px}
.case .rd{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--river-deep)}
/* testimonials (clearly labeled illustrative — no invented real person) */
.testi-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.demo-flag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ember);border:1px solid var(--ember);border-radius:3px;padding:3px 9px;text-transform:uppercase;letter-spacing:.04em}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:40px;border:1px solid var(--line)}
.testi{background:var(--bg);padding:28px 26px}
.stars{display:flex;gap:3px;color:var(--ember)}
.stars svg{width:16px;height:16px}
.testi blockquote{margin:14px 0 0;font-size:15px;color:var(--ink);line-height:1.6;font-style:normal}
.testi-who{display:flex;align-items:center;gap:10px;margin-top:18px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-raise2);color:var(--river-deep);display:grid;place-items:center;font-weight:700;font-size:13.5px;flex-shrink:0}
.testi-who b{display:block;font-size:15px}
.testi-who span{display:block;font-size:12px;color:var(--muted)}
/* how this works — dark band, màu đen của bản gốc đổi thành ink Bói Cá */
.band-dark{background:var(--ink);border-bottom:1px solid var(--ink)}
.band-dark .eyebrow{color:var(--river)}
.band-dark h2.t{color:#fff}
.band-dark .dek{color:var(--on-dark)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);margin-top:40px;border:1px solid rgba(255,255,255,.1)}
.how>div{background:var(--ink);padding:30px 26px;transition:background .15s ease}
.how>div:hover{background:#132E38}
.how h3{font-size:20px;margin-bottom:10px;color:#fff}
.how p{margin:0;color:var(--on-dark);font-size:15px;line-height:1.6}
.how .btn{margin-top:36px}
/* faq */
.faq{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{color:var(--river);font-size:13.5px;flex-shrink:0;padding-top:2px}
.faq p{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.6;padding-left:38px}
/* blog preview */
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.blog{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.post{padding:26px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s ease}
.post:hover{background:var(--bg-raise)}
.post .tag{font-size:12px;color:var(--river);text-transform:uppercase;letter-spacing:.04em}
.post h3{font-size:17px;margin:12px 0 10px;line-height:1.35}
.post .rd{font-size:13.5px;font-weight:700;color:var(--muted)}
/* footer */
footer{padding:56px 0 110px;border-bottom:none;background:var(--ink)}
/* màu nền tối của Bói Cá (giống .band-dark), thay vì để trống/kế thừa nền sáng chung của trang */
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.foot .logo{color:#fff}
/* .logo mặc định dùng var(--ink) cho nền sáng ở header — trên nền tối của footer phải lật sang trắng, nếu không chữ "BÓI CÁ" sẽ chìm mất vào nền */
.foot p{margin-top:12px;color:var(--on-dark);font-size:15px;max-width:300px}
.foot h4{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark-subtle);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot a{color:var(--on-dark-strong)}
.foot a:hover{color:#fff}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:var(--on-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-bottom a{font-weight:700;color:var(--ember)}
/* var(--river-deep) cũ là xanh rất đậm — gần như cùng tông với nền tối mới nên chữ bị chìm; đổi sang cam ember để nổi bật đúng vai trò CTA */

.mobile-bar{display:none}
.float{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;gap:10px}
.float a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px rgba(16,36,44,.18);font-weight:800;font-size:12px}
.f-zalo{background:var(--river);color:#fff}
.f-call{background:var(--ember);color:#fff}
.f-call svg,.f-msg svg,.f-zalo svg{width:22px;height:22px}
.f-msg{background:#fff;color:var(--river-deep);border:2px solid var(--river-deep)}
@media (max-width:1024px){
  .reasons{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .blog{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .case{text-align:left}
  .form-card{padding:26px 20px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}