/* ============================================================
   OfficeAI - Landing page public (Home/Index.cshtml, layout _Home)
   Tach tu inline <style> 2026-07-16 (docs/plans/28 Phase 3).
   ============================================================ */

  @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

  /* ===== Light-theme palette scoped to landing (mockup officeai-landing.html) ===== */
  :root{
    --bg:#F7F7FB;
    --surface:#FFFFFF;
    --surface-2:#F3F1FF;
    --ink:#15131F;
    --muted:#6E6C79;
    --muted-2:#9997A3;
    --border:#E7E5EF;
    --border-strong:#D9D5EA;
    --accent:#5B3DF5;
    --accent-2:#9B7BFF;
    --accent-soft:#EFEBFF;
    --violet-l:#5B3DF5;
    --magenta:#9B7BFF;
    --grad-btn:linear-gradient(135deg,#5B3DF5,#9B7BFF);
    --success:#12B76A;
    --warm:#FF8F65;
    --warm-2:#FFB199;
    --skin:#F4C9A0;
    --hair:#2B2A3D;
  }

  /* ===== Single-screen light layout, overriding the dark shell ===== */
  html,body{ height:100%; overflow:hidden; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    display:flex;
    flex-direction:column;
    position:relative;
  }
  /* hide dark atmospheric mesh + grain from the shared layout */
  .mesh{ display:none !important; }
  body::before, body::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
    pointer-events:none;
    background-image:none;
    mix-blend-mode:normal;
    opacity:1;
  }
  body::before{
    width:640px; height:640px; top:-220px; left:-160px;
    background:radial-gradient(circle,rgba(91,61,245,.14),transparent 70%);
  }
  body::after{
    width:520px; height:520px; bottom:-200px; right:-120px;
    background:radial-gradient(circle,rgba(155,123,255,.16),transparent 70%);
  }

  /* ===== Restyle the shared dynamic header to the light mockup nav ===== */
  header#header{
    position:relative;
    z-index:5;
    flex-shrink:0;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  header#header.scrolled{ background:rgba(255,255,255,.85); border-bottom:1px solid var(--border); }
  header#header nav{ height:82px; }
  header#header .logo{ color:var(--ink); }
  /* Ẩn menu điều hướng giữa header trên trang landing.
     Cần mở lại: xóa (hoặc comment) khối rule dưới đây. */
  header#header .nav-links{ display:none !important; }
  header#header .nav-links a.lnk,
  header#header .dropdown>button{ color:var(--muted); }
  header#header .nav-links a.lnk:hover,
  header#header .dropdown>button:hover,
  header#header .dropdown.open>button{ color:var(--ink); background:var(--accent-soft); }
  header#header .btn-ghost{ color:var(--ink); background:transparent; border:1px solid var(--border); }
  header#header .btn-ghost:hover{ background:var(--accent-soft); border-color:var(--accent); }
  header#header .btn-primary{
    color:var(--brand-on-primary, #ffffff); background:var(--grad-btn);
    box-shadow:0 8px 20px -6px rgba(91,61,245,.55);
  }
  header#header .btn-primary:hover{ box-shadow:0 10px 24px -6px rgba(91,61,245,.65); }
  header#header .hamburger{ color:var(--ink); border:1px solid var(--border); }
  header#header .hamburger svg{ stroke:var(--ink); }
  /* dropdown + mobile menu → light */
  header#header .menu{
    background:rgba(255,255,255,.98);
    border:1px solid var(--border);
    box-shadow:0 30px 70px rgba(91,61,245,.18);
  }
  header#header .menu a:hover{ background:var(--accent-soft); }
  header#header .menu .t{ color:var(--ink); }
  header#header .menu .ic{ background:var(--accent-soft); border:1px solid var(--border); }
  header#header .menu .ic svg{ stroke:var(--accent); }
  .mmenu{ background:rgba(255,255,255,.98); }
  .mmenu a,.mmenu button.macc{ color:var(--ink); border-bottom:1px solid var(--border); }
  .mmenu .sub a{ color:var(--muted); }
  .mclose{ color:var(--ink); border:1px solid var(--border); }
  /* hide nav links in mobile menu on the landing page */
  .mmenu a.mlink,
  .mmenu button.macc,
  .mmenu .sub{ display:none !important; }
  /* polished action button (full-width) */
  .mmenu .mact{ margin-top:16px; }
  .mmenu .mact .btn{
    width:100%; padding:16px; font-size:1rem; font-weight:600;
    border-radius:14px; transition:all .18s ease;
  }
  .mmenu .mact .btn-primary{
    color:var(--brand-on-primary, #ffffff); background:var(--grad-btn);
    box-shadow:0 10px 24px -6px rgba(91,61,245,.55);
  }
  .mmenu .mact .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -6px rgba(91,61,245,.65); }

  /* ===== HERO ===== */
  .oai-hero{
    position:relative; z-index:1;
    flex:1;
    display:flex;
    align-items:center;
    gap:clamp(40px,5vw,96px);
    padding:0 clamp(28px,4vw,88px);
    min-height:0;
  }
  .oai-copy{ max-width:600px; flex-shrink:0; }
  .oai-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; letter-spacing:.08em;
    color:var(--accent); background:var(--accent-soft);
    padding:6px 14px; border-radius:100px; margin-bottom:22px;
  }
  .oai-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .oai-h1{
    font-family:'Be Vietnam Pro',sans-serif; letter-spacing:-.02em;
    font-size:clamp(36px,3.4vw,52px); line-height:1.12; font-weight:800;
    color:var(--ink); margin-bottom:20px;
  }
  .oai-grad{
    background:linear-gradient(120deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .oai-sub{ font-size:16.5px; line-height:1.65; color:var(--muted); max-width:520px; margin-bottom:32px; }
  .oai-cta{ display:flex; align-items:center; gap:14px; margin-bottom:40px; }
  .oai-cta .btn{ padding:13px 24px; font-size:15px; border-radius:9px; }
  .oai-cta .btn svg{ width:14px; height:14px; }
  .oai-stat-row{ display:flex; align-items:center; }
  .oai-stat{ padding-right:28px; margin-right:28px; border-right:1px solid var(--border); }
  .oai-stat:last-child{ border-right:none; }
  .oai-stat .n{ font-family:'Be Vietnam Pro',sans-serif; font-weight:700; font-size:22px; color:var(--ink); }
  .oai-stat .l{ font-size:12.5px; color:var(--muted-2); margin-top:2px; }

  /* ===== VISUAL ===== */
  .oai-visual{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0; height:100%; }
  .oai-panel{ width:100%; max-width:620px; max-height:90%; display:flex; align-items:center; justify-content:center; }
  .oai-cover{
    width:100%; height:auto; max-height:100%; object-fit:contain;
    border-radius:24px;
    animation:oaiFloat 6s ease-in-out infinite;
  }
  @keyframes oaiFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  @media (prefers-reduced-motion: reduce){ .oai-cover{ animation:none !important; } }

  /* ===== MODULE STRIP ===== */
  .oai-strip{
    position:relative; z-index:2; flex-shrink:0; height:96px;
    border-top:1px solid var(--border); background:rgba(255,255,255,.6);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(28px,4vw,88px);
  }
  .oai-strip-label{
    font-size:12px; font-weight:600; letter-spacing:.07em; color:var(--muted-2);
    text-transform:uppercase; flex-shrink:0; margin-right:40px;
  }
  .oai-chips{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
  .oai-chip{
    display:flex; align-items:center; justify-content:center; height:38px;
    background:var(--surface); border:1px solid var(--border); border-radius:100px; flex-shrink:0;
  }
  .oai-chip.solid{ background:var(--accent-soft); border-color:transparent; }
  .oai-chip .bar{ height:3px; border-radius:2px; background:var(--accent); opacity:.35; }
  .oai-chip.dashed{ border-style:dashed; background:transparent; }
  .oai-chip.plus{ width:38px; color:var(--accent); font-size:16px; font-weight:600; border-color:var(--accent-soft); }

  /* ===== FOOTER ===== */
  .oai-footer{
    position:relative; z-index:2; flex-shrink:0; height:52px;
    border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(28px,4vw,88px);
    font-size:12.5px; color:var(--muted-2);
  }
  .oai-footer a{ color:inherit; text-decoration:none; }
  .oai-footer a:hover{ color:var(--ink); }
  .oai-footer-links{ display:flex; gap:24px; }

  /* ===== Small screens: allow scroll & stack ===== */
  @media (max-width:920px){
    html,body{ overflow:auto; height:auto; }
    .oai-hero{ flex-direction:column; align-items:flex-start; padding:48px clamp(28px,4vw,88px); gap:40px; }
    .oai-visual{ order:-1; width:100%; height:auto; }
    .oai-panel{ max-height:none; }
    .oai-strip{ height:auto; flex-direction:column; align-items:flex-start; gap:14px; padding:24px clamp(28px,4vw,88px); }
    .oai-strip-label{ margin-right:0; }
    .oai-chips{ flex-wrap:wrap; }
    .oai-footer{ height:auto; flex-direction:column; align-items:flex-start; gap:8px; padding:20px clamp(28px,4vw,88px); }
    /* hero stat row: cho phép xuống dòng, giảm gutter để không tràn trên mobile (2.2) */
    .oai-stat-row{ flex-wrap:wrap; gap:12px 0; }
    .oai-stat{ padding-right:20px; margin-right:20px; }
  }

  @media (max-width:430px){
    .oai-stat{ padding-right:14px; margin-right:14px; }
    .oai-stat .n{ font-size:20px; }
  }