/* ============================================================
   base.css — design system DÙNG CHUNG cho mọi trang.
   Chỉ sửa file này khi muốn đổi toàn site. Style riêng từng trang
   để ở assets/css/<page>.css hoặc inline trong trang đó.

   SKELETON: đổi các biến --brand* và gradient theo brand thật
   (đồng bộ với assets/js/tailwind.config.js) trước khi build.
   ============================================================ */

:root{
  /* Brand LogiSuite — đồng bộ với assets/js/tailwind.config.js */
  --brand:      #9D04D5;   /* Violet, màu thương hiệu chính */
  --brand-l:    #F8489F;   /* Hot Pink, đầu sáng của gradient brand */
  --ink:        #0A0414;   /* Near-black */
  --grad:       linear-gradient(135deg, #9D04D5 0%, #D42BB2 55%, #F8489F 100%); /* buttons, theo brand kit */
  --grad-text:  linear-gradient(120deg, #F8489F, #C24DEF 55%, #9D04D5);         /* gradient text trên nền tối */
}
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
/* theme site: SÁNG chủ đạo, vùng tối là section có chủ đích (hero, ROI, footer) */
body{ background:#F7F5FB; color:#1C1230; font-family:"Be Vietnam Pro",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:color-mix(in srgb, var(--brand) 35%, transparent); color:#fff; }
.font-display{ font-family:"Space Grotesk",sans-serif; }
.font-mono{ font-family:"JetBrains Mono",monospace; }

.text-grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fill-grad{ background:var(--grad); }

/* nền khí quyển tối - giữ RẤT kiềm chế (luật Lila: neutral chủ đạo, không glow) */
.aura{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(64% 38% at 50% -12%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
    var(--ink); }
.grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* viền gradient mảnh */
.ring-grad{ position:relative; }
.ring-grad::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, color-mix(in srgb, var(--brand-l) 60%, transparent), rgba(255,255,255,.05) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

.glass{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px); }

/* buttons — mọi element bấm được phải có hover/focus-visible/active */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; font-weight:600; letter-spacing:.01em; border-radius:9999px;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .25s, border-color .25s; will-change:transform; }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 10px 28px -14px color-mix(in srgb, var(--brand) 45%, transparent); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px color-mix(in srgb, var(--brand) 58%, transparent); }
.btn-ghost{ color:#fff; border:1.5px solid color-mix(in srgb, var(--brand-l) 50%, transparent); background:color-mix(in srgb, var(--brand) 6%, transparent); }
.btn-ghost:hover{ border-color:color-mix(in srgb, var(--brand-l) 95%, transparent); background:color-mix(in srgb, var(--brand) 16%, transparent); transform:translateY(-2px); }

a:focus-visible,button:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }

.navlink{ position:relative; color:#CFCFDA; transition:color .2s; }
.navlink:hover{ color:#fff; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--grad); transition:transform .3s cubic-bezier(.16,1,.3,1); border-radius:2px; }
.navlink:hover::after{ transform:scaleX(1); }

/* nav dropdown - desktop hover, mobile nằm trong hamburger */
.navdrop{ position:relative; }
.navdrop-panel{ position:absolute; top:100%; left:50%; padding-top:14px; transform:translateX(-50%) translateY(6px); min-width:230px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, transform .22s cubic-bezier(.16,1,.3,1); }
.navdrop:hover .navdrop-panel, .navdrop:focus-within .navdrop-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* reveal on scroll (base.js gắn .in khi vào viewport; ?revealall hiện hết)
   Chỉ ẩn khi JS chạy (html.js do inline script trong <head> gắn sớm, không nhấp nháy).
   Không JS → không có .js → reveal hiện luôn, không bao giờ ship section trắng. */
html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0s); }
html.js .reveal.in{ opacity:1; transform:none; }

/* hero entrance */
@keyframes riseIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
.rise{ opacity:0; animation:riseIn .85s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0s); }

/* chuyển động lơ lửng nhẹ (transform-only) */
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-15px) rotate(.6deg) } }
.float-a{ animation:float 6.5s ease-in-out infinite; }
.parallax{ transform:translate3d(calc(var(--px,0px)*var(--depth,1)),calc(var(--py,0px)*var(--depth,1)),0); transition:transform .15s ease-out; }

/* marquee logo/khách hàng */
.marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee-track{ animation:marquee 36s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }

.lift{ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; }
.lift:hover{ transform:translateY(-6px); }
.imgzoom img{ transition:transform .7s cubic-bezier(.16,1,.3,1); }
.imgzoom:hover img{ transform:scale(1.05); }

/* faq accordion bằng <details class="faq"> */
details.faq{ border-bottom:1px solid rgba(255,255,255,.1); }
details.faq summary{ list-style:none; cursor:pointer; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq .chev{ transition:transform .25s ease; }
details.faq[open] .chev{ transform:rotate(180deg); }

/* browser mockup bọc 1 ảnh UI thật */
.mockup-browser{ border-radius:16px; overflow:hidden; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.07), 0 30px 64px -28px color-mix(in srgb, var(--brand) 50%, transparent); }
.mockup-browser__bar{ display:flex; align-items:center; gap:7px; padding:10px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.08); }
.mockup-browser__dot{ width:9px; height:9px; border-radius:50%; }
.mockup-browser__url{ margin-left:8px; flex:1; height:18px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.05); }
.mockup-browser__view{ display:block; width:100%; height:auto; }

/* sticky CTA desktop: hiện khi hero rời viewport (body.cta-stuck do base.js) */
.sticky-cta{ position:fixed; z-index:50; left:50%; bottom:22px; transform:translateX(-50%) translateY(160%);
  opacity:0; pointer-events:none; transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .3s; }
body.cta-stuck .sticky-cta{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
/* mobile/tablet: sticky CTA thành thanh đáy full-width (80% người dùng là mobile) */
@media (max-width:1023px){
  .sticky-cta{ left:0; right:0; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%); background:rgba(10,4,20,.92); backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.1); }
  .sticky-cta .btn{ width:100%; }
  body.cta-stuck .sticky-cta{ transform:translateY(0); }
}

/* lớp phủ ảnh (guardrail): gradient + tint màu brand */
.img-treat{ position:relative; }
.img-treat::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.62) 100%);
  pointer-events:none; }
.img-tint{ position:relative; }
.img-tint::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 28%, transparent), color-mix(in srgb, var(--brand-l) 14%, transparent));
  mix-blend-mode:multiply; pointer-events:none; }

/* ẢNH duotone tím: ảnh thật (cảng/kho/người) hòa vào theme tối-tím, chữ vẫn đọc rõ.
   .duo bọc <img> phủ toàn khối; nội dung chữ đặt trong .duo-content (z trên overlay). */
.duo{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink); }
.duo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.82); }
.duo::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(135deg,#6E0ABE,#9D04D5 45%,#F8489F); mix-blend-mode:screen; opacity:.52; }
.duo::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,4,20,.55), rgba(10,4,20,.9)); }
.duo-content{ position:relative; z-index:3; }
/* biến thể nhẹ cho hero (ảnh chỉ là texture nền, không lấn demo) */
.duo--hero > img{ filter:grayscale(1) contrast(1.05) brightness(.6); opacity:.5; }
.duo--hero::after{ background:linear-gradient(180deg, rgba(10,4,20,.7), rgba(10,4,20,.55) 55%, rgba(10,4,20,.92)); }
/* biến thể band NGƯỜI: ảnh hiện rõ hơn, gradient tối lệch trái cho chữ, người/laptop bên phải lộ ra */
.duo--people > img{ filter:grayscale(1) contrast(1.04) brightness(1); opacity:.9; object-position:center 30%; }
.duo--people::before{ opacity:.38; }
.duo--people::after{ background:linear-gradient(100deg, rgba(10,4,20,.93) 26%, rgba(10,4,20,.5) 68%, rgba(10,4,20,.66)); }

@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; }
  .parallax{ transform:none !important; }
}

/* ============================================================
   COMPONENT DÙNG CHUNG (tách từ index.html)
   Hệ bo góc thống nhất: nút = pill, panel/card = 16px, input = 10px.
   Section sáng bọc class .zl để override component trên nền sáng.
   ============================================================ */
.panel{ background:#100722; border:1px solid rgba(255,255,255,.09); border-radius:16px; }
.panel-light{ background:#FFFFFF; border:1px solid rgba(36,10,70,.10); border-radius:16px; }
.hairline-x{ border-color:rgba(255,255,255,.08); }
.demo-row{ transition:opacity .25s, background .2s; }
.demo-row:hover{ background:rgba(255,255,255,.03); }
.zl .demo-row:hover{ background:rgba(36,10,70,.04); }
input[type="checkbox"].tick{ appearance:none; width:18px; height:18px; border-radius:5px; border:1.5px solid rgba(255,255,255,.28); background:transparent; cursor:pointer; display:inline-grid; place-items:center; transition:background .18s, border-color .18s; flex-shrink:0; }
.zl input[type="checkbox"].tick{ border-color:rgba(28,18,48,.35); }
input[type="checkbox"].tick:checked{ background:var(--grad); border-color:transparent; }
input[type="checkbox"].tick:checked::after{ content:""; width:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translateY(-1px); }
input[type="checkbox"].tick:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.zl .btn-ghost{ color:#1C1230; border-color:rgba(157,4,213,.4); background:rgba(157,4,213,.04); }
.zl .btn-ghost:hover{ border-color:rgba(157,4,213,.8); background:rgba(157,4,213,.09); }
.num-input{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; padding:10px 14px; width:100%; font-family:"JetBrains Mono",monospace; font-size:15px; transition:border-color .2s; }
.num-input:focus{ outline:none; border-color:#C24DEF; }
.num-input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
input[type="range"].slider{ -webkit-appearance:none; width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.14); cursor:pointer; }
input[type="range"].slider::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--grad); border:2px solid #fff2; transition:transform .15s; }
input[type="range"].slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
input[type="range"].slider:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.pdf-progress{ position:relative; overflow:hidden; }
.pdf-progress::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.25); transform:translateX(-100%); animation:pdfFill 1.6s ease-out forwards; }
@keyframes pdfFill{ to{ transform:translateX(0); } }

/* toggle switch (dùng cho ROI khối vận hành, billing toggle...) */
input[type="checkbox"].switch{ appearance:none; position:relative; width:40px; height:22px; border-radius:9999px; background:rgba(255,255,255,.16); transition:background .2s; cursor:pointer; flex-shrink:0; }
input[type="checkbox"].switch::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.16,1,.3,1); }
input[type="checkbox"].switch:checked{ background:var(--grad); }
input[type="checkbox"].switch:checked::after{ transform:translateX(18px); }
input[type="checkbox"].switch:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.zl input[type="checkbox"].switch{ background:rgba(28,18,48,.22); }

/* nhãn minh bạch cho nội dung mock (logo/case/testimonial minh họa) — dùng cả nền sáng lẫn tối */
.mock-note{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; line-height:1.5; color:#8E86A4; }
.mock-note svg, .mock-note i{ flex:none; }
.zl .mock-note{ color:#5A5273; }

/* slider trên nền sáng: track lộ rõ (tránh di sản trắng .14 vô hình), thumb to + viền trắng + bóng tím.
   .roi-band .slider (nền band tím) giữ track sáng riêng nhờ specificity cao hơn. */
.zl .slider{ background:#E4DCF2; height:6px; border-radius:3px; }
.zl .slider::-webkit-slider-thumb{ width:22px; height:22px; border:3px solid #fff; box-shadow:0 2px 8px rgba(157,4,213,.40); }
.zl .slider::-moz-range-thumb{ width:22px; height:22px; border:3px solid #fff; box-shadow:0 2px 8px rgba(157,4,213,.40); background:var(--grad); }
.zl .slider::-moz-range-track{ background:#E4DCF2; height:6px; border-radius:3px; }

/* ============================================================
   V3 — THEME SÁNG TOÀN TRANG (07/2026, theo _reference/index.png)
   Trang v3 đặt class "zl" trên <body>: mọi override .zl bên dưới
   thành mặc định của cả trang. Trang cũ (chưa xây lại) không có
   body.zl nên giữ nguyên giao diện tối, không regression.
   ============================================================ */
/* khí quyển sáng: wash pastel tím + hồng trên nền lavender */
.day-aura{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(52% 44% at 12% 0%, rgba(157,4,213,.10), transparent 70%),
    radial-gradient(46% 40% at 88% 6%, rgba(248,72,159,.09), transparent 72%),
    radial-gradient(60% 46% at 50% 108%, rgba(110,10,190,.07), transparent 70%),
    #F6F3FB; }
/* nav trên nền sáng */
.zl .navlink{ color:#5A5273; }
.zl .navlink:hover{ color:#1C1230; }
/* header sáng: mobile bỏ blur nhưng giữ nền sáng (override rule tối bên dưới) */
@media (max-width:767px){
  body.zl header{ background:rgba(253,252,255,.97) !important; }
}
/* card sáng chuẩn v3 */
.card-day{ background:#FFFFFF; border:1px solid #E7DFF2; border-radius:20px; }
/* blob hữu cơ sau ảnh người (kiểu Adiyo) */
.blob{ border-radius:46% 54% 58% 42% / 50% 44% 56% 50%;
  background:linear-gradient(135deg, #9D04D5 0%, #D42BB2 55%, #F8489F 100%); }
.blob-soft{ border-radius:46% 54% 58% 42% / 50% 44% 56% 50%;
  background:linear-gradient(135deg, rgba(157,4,213,.16), rgba(248,72,159,.12)); }
/* gradient text bản đủ đậm cho nền sáng */
.zl .text-grad{ background:linear-gradient(120deg,#C21B72,#9D04D5 55%,#6E0ABE);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* glass sáng */
.zl .glass{ background:rgba(255,255,255,.72); border:1px solid rgba(36,10,70,.08); backdrop-filter:blur(10px); }
/* mockup browser trên nền sáng */
.zl .mockup-browser{ background:#FFFFFF; border:1px solid rgba(36,10,70,.10);
  box-shadow:0 34px 70px -32px rgba(110,10,190,.24), 0 8px 22px -12px rgba(36,10,70,.10); }
.zl .mockup-browser__bar{ background:linear-gradient(180deg,#FBF9FE,#F3EFFA); border-bottom:1px solid rgba(36,10,70,.08); }
.zl .mockup-browser__url{ background:rgba(36,10,70,.05); border:1px solid rgba(36,10,70,.06); }
/* inputs sáng */
.zl .num-input{ background:#FFFFFF; border:1px solid #E0D8EE; color:#1C1230; }
.zl .num-input:focus{ border-color:#9D04D5; }
.zl input[type="range"].slider{ background:rgba(36,10,70,.14); }
.zl input[type="range"].slider::-webkit-slider-thumb{ border-color:#fff; }
/* faq + hairline sáng */
.zl details.faq{ border-color:rgba(36,10,70,.12); }
.zl .hairline-x{ border-color:rgba(36,10,70,.09); }
/* sticky CTA mobile trên nền sáng */
@media (max-width:1023px){
  body.zl .sticky-cta{ background:rgba(253,252,255,.95); border-top:1px solid rgba(36,10,70,.10); }
}
/* panel gradient pastel cho hàng giải pháp (kiểu _reference/feature.png): sọc dọc mờ + mockup nghiêng.
   Dùng chung index + 4 trang giải pháp. */
.feat-panel{ position:relative; border-radius:28px; overflow:hidden; }
.feat-panel::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 44px, rgba(255,255,255,0) 44px 88px); }
.feat-shot{ position:absolute; background:#fff; padding:6px; border-radius:14px;
  box-shadow:0 26px 52px -22px rgba(36,10,70,.38); }
.feat-shot img{ display:block; width:100%; height:auto; border-radius:9px; }
/* steps đường cong (kiểu _reference/steps.png): badge lục giác trên sóng + số watermark to */
.hex-wrap{ filter:drop-shadow(0 14px 26px rgba(110,10,190,.28)); }
.hex{ clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background:#fff; width:62px; height:66px; display:grid; place-items:center; }
.ghost-num{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(90px,10vw,150px);
  line-height:1; color:#EFE8F9; user-select:none; }
/* slider trên nền gradient đậm (band ROI) */
.roi-band input[type="range"].slider{ background:rgba(255,255,255,.32); }

/* ═══════════ MOBILE / TOUCH (80% người dùng là điện thoại) ═══════════ */
/* touch không có hover thật → bỏ hover-transform dính sau khi chạm, giữ :active làm phản hồi */
@media (hover:none){
  .lift:hover{ transform:none; }
  .imgzoom:hover img{ transform:none; }
  .navlink:hover::after{ transform:scaleX(0); }
  .btn-primary:hover{ transform:none; }
  .btn-ghost:hover{ transform:none; }
}
/* phản hồi chạm cho card/hàng tương tác */
.lift:active{ transform:translateY(-2px); }
.demo-row:active{ background:rgba(36,10,70,.06); }
@media (max-width:767px){
  .grain{ display:none; }                                   /* bỏ lớp grain mix-blend nặng trên mobile */
  header{ backdrop-filter:none !important; background:rgba(10,4,20,.96) !important; }  /* bỏ backdrop-blur repaint mỗi frame */
}