/* Tesla Coffee — Shared Stylesheet
   Bộ nhận diện: Reflex Blue C #29317D · Orange 021C #F05322 · Space Mono + Mulish
   Dùng chung cho toàn bộ các trang của website. */

  :root{
    /* ===== Bộ nhận diện chính thức Tesla Coffee (2022) ===== */
    --blue:#29317d;          /* Pantone Reflex Blue C — màu chủ đạo */
    --blue-light:#4b55b0;    /* sắc thái sáng hơn của xanh dương, dùng cho hover/liên kết */
    --blue-pale:#8b92d1;
    --orange:#f05322;        /* Pantone Orange 021C — màu nhấn */
    --white:#ffffff;
    --black:#000000;

    /* nền tối phái sinh từ xanh dương chủ đạo, giữ tinh thần "không gian" */
    --ink:#06081c;
    --panel:#0d0f2b;
    --panel-2:#12153a;
    --ash:#eceefc;
    --ash-dim:#a9adcf;
    --stone:#7579a3;
    --line: rgba(236,238,252,0.13);
    --maxw: 1180px;
    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--ash);
    font-family:'Mulish', sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

  ::selection{background:var(--orange); color:var(--white);}

  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(236,238,252,.3) 0, transparent 100%),
      radial-gradient(1px 1px at 70% 65%, rgba(236,238,252,.22) 0, transparent 100%),
      radial-gradient(1.5px 1.5px at 85% 15%, rgba(236,238,252,.28) 0, transparent 100%),
      radial-gradient(1px 1px at 45% 80%, rgba(236,238,252,.18) 0, transparent 100%),
      radial-gradient(1px 1px at 10% 90%, rgba(236,238,252,.22) 0, transparent 100%),
      radial-gradient(1.5px 1.5px at 55% 10%, rgba(236,238,252,.18) 0, transparent 100%);
    pointer-events:none;
    z-index:1;
    opacity:.5;
  }

  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--orange);
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    margin-bottom:20px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--orange);
    display:inline-block;
    flex-shrink:0;
  }
  .on-light .eyebrow{ color:var(--orange); }

  h1,h2,h3{
    font-family:'Space Mono', monospace;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.08;
    color:var(--ash);
    text-transform:uppercase;
  }
  .on-light h1, .on-light h2, .on-light h3{ color:var(--blue); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    border-radius:2px;
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:13.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
    transition:all .35s var(--ease);
    border:1px solid transparent;
    cursor:pointer;
  }
  .btn-primary{
    background:var(--orange);
    color:var(--white);
    box-shadow:0 8px 26px -8px rgba(240,83,34,.55);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(240,83,34,.7);}
  .btn-ghost{
    border-color:rgba(236,238,252,.28);
    color:var(--ash);
  }
  .btn-ghost:hover{ border-color:var(--ash); background:rgba(236,238,252,.06); }
  .on-light .btn-ghost{ border-color:rgba(41,49,125,.35); color:var(--blue); }
  .on-light .btn-ghost:hover{ background:rgba(41,49,125,.06); border-color:var(--blue); }

  /* ===== NAV ===== */
  header{
    position:fixed; top:0; left:0; right:0;
    z-index:160;
    padding:20px 0;
    transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(6,8,28,.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:14px 0;
    border-color:var(--line);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand img{ height:28px; width:auto; }
  .navlinks{ display:flex; gap:34px; font-size:13.5px; font-weight:600; letter-spacing:.01em; font-family:'Space Mono',monospace; text-transform:uppercase;}
  .navlinks a{ position:relative; padding:4px 0; color:var(--ash-dim); transition:color .25s; font-size:12.5px;}
  .navlinks a:hover{ color:var(--ash); }
  .navlinks a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--orange); transition:width .3s var(--ease);
  }
  .navlinks a:hover::after{ width:100%; }
  .navlinks a.active{ color:var(--orange); }
  .navlinks a.active::after{ width:100%; background:var(--orange); }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:160px 0 90px;
    overflow:hidden;
  }
  .hero-media{ position:absolute; inset:0; z-index:0; }
  .hero-media video, .hero-media img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(1.05) contrast(1.05) brightness(.55);
  }
  .hero-media::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(6,8,28,.6) 0%, rgba(6,8,28,.4) 30%, rgba(6,8,28,.6) 65%, var(--ink) 100%),
      linear-gradient(90deg, rgba(6,8,28,.8) 0%, rgba(6,8,28,.15) 45%, rgba(6,8,28,.15) 55%, rgba(6,8,28,.8) 100%);
  }
  .hero-inner{ position:relative; z-index:2; }
  .hero-brandmark{ height:52px; margin-bottom:28px; opacity:.92; }
  .hero h1{
    font-size:clamp(36px, 5.8vw, 80px);
    max-width:16ch;
    margin-bottom:26px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--orange);
  }
  .hero p{
    font-size:18px;
    color:var(--ash-dim);
    max-width:46ch;
    margin-bottom:40px;
    font-weight:300;
  }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px;}
  .hero-scroll{
    display:flex; align-items:center; gap:14px;
    font-family:'Space Mono', monospace;
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--stone);
  }
  .hero-scroll .line{ width:60px; height:1px; background:var(--stone); position:relative; overflow:hidden;}
  .hero-scroll .line::after{
    content:""; position:absolute; left:-100%; top:0; width:100%; height:100%;
    background:var(--orange); animation:scrollline 2.4s ease-in-out infinite;
  }
  @keyframes scrollline{ 0%{left:-100%;} 50%{left:0;} 100%{left:100%;} }

  /* ===== SECTION GENERIC ===== */
  section{ position:relative; padding:130px 0; z-index:2;}
  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head h2{ font-size:clamp(28px,3.6vw,46px); }
  .section-head p{ color:var(--ash-dim); font-size:16.5px; margin-top:20px; max-width:56ch; font-weight:300;}
  .on-light .section-head p{ color:#4a4e73; }

  .ridge{ position:relative; z-index:3; width:100%; height:56px; display:block; margin-top:-1px; }
  .ridge svg{ width:100%; height:100%; display:block; }

  /* ===== BRAND IDENTITY ===== */
  .identity{ background:var(--white); color:var(--blue); }
  .identity-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
  .identity-logo{
    display:flex; flex-direction:column; align-items:flex-start; gap:34px;
  }
  .identity-logo img{ width:100%; max-width:380px; }
  .mission-block{ border-left:3px solid var(--orange); padding-left:22px; }
  .mission-block h4{
    font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.15em; text-transform:uppercase;
    color:var(--orange); margin-bottom:10px; font-weight:700;
  }
  .mission-block p{ font-size:15.5px; color:#33375c; font-weight:400; max-width:44ch;}
  .mission-block + .mission-block{ margin-top:26px; }

  .swatches{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#e2e3ee; border:1px solid #e2e3ee; margin-bottom:36px;}
  .swatch{ background:var(--white); padding:0; }
  .swatch .chip{ height:88px; }
  .swatch .info{ padding:16px 18px; }
  .swatch .info .name{ font-family:'Space Mono',monospace; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; color:var(--blue);}
  .swatch .info .code{ font-family:'Space Mono',monospace; font-size:11px; color:#7c80a0; line-height:1.7;}

  .type-sample{ margin-top:10px; }
  .type-row{ display:flex; align-items:baseline; gap:16px; padding:16px 0; border-top:1px solid #e2e3ee;}
  .type-row:last-child{ border-bottom:1px solid #e2e3ee; }
  .type-row .tname{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9497b3; width:110px; flex-shrink:0;}
  .type-row .tsample{ font-size:19px; color:var(--blue); }
  .type-row.mono .tsample{ font-family:'Space Mono',monospace; font-weight:700; }
  .type-row.body .tsample{ font-family:'Mulish',sans-serif; font-weight:400; color:#33375c;}

  /* ===== STORY ===== */
  .story{ background:var(--panel); }
  .story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
  .story-copy p{ color:var(--ash-dim); font-size:16.5px; margin-bottom:20px; font-weight:300; max-width:52ch;}
  .story-copy p strong{ color:var(--ash); font-weight:700; }
  .story-source{
    font-family:'Space Mono', monospace;
    font-size:11.5px; color:var(--stone); margin-top:10px; display:inline-block;
    border-bottom:1px solid rgba(117,121,163,.4);
  }
  .story-source:hover{ color:var(--orange); border-color:var(--orange); }

  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  .stat{ background:var(--panel); padding:30px 26px; }
  .stat .num{
    font-family:'Space Mono', monospace;
    font-size:clamp(24px,2.4vw,32px);
    font-weight:700;
    color:var(--orange);
    display:block;
    margin-bottom:8px;
    line-height:1;
  }
  .stat .lbl{ font-size:13.5px; color:var(--ash-dim); font-weight:400; }

  /* ===== MARS SCIENCE ===== */
  .mars{ background:var(--ink); }
  .mars-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:center; }
  .mars-visual{ position:relative; border-radius:3px; overflow:hidden; border:1px solid var(--line); }
  .mars-visual img{ width:100%; display:block; }
  .mars-visual .tag{
    position:absolute; left:18px; bottom:18px;
    font-family:'Space Mono', monospace;
    font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    background:rgba(6,8,28,.72); backdrop-filter:blur(6px);
    padding:8px 12px; border:1px solid var(--line); color:var(--ash-dim);
  }
  .mars-copy p{ color:var(--ash-dim); font-weight:300; font-size:16.5px; margin-bottom:18px; max-width:54ch;}
  .mars-copy p strong{ color:var(--ash); font-weight:700;}
  .compare{ display:flex; gap:0; margin-top:34px; border:1px solid var(--line); }
  .compare > div{ flex:1; padding:22px 24px; }
  .compare > div:first-child{ border-right:1px solid var(--line); }
  .compare h4{ font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; font-weight:700;}
  .compare .nam h4{ color:var(--orange); }
  .compare .sao h4{ color:var(--blue-pale); }
  .compare p{ font-size:14px; color:var(--ash-dim); font-weight:300; margin:0; }

  /* ===== PRODUCTS ===== */
  .products{ background:var(--panel); }
  .products-visual{ margin-bottom:60px; border:1px solid var(--line); overflow:hidden; }
  .products-visual img{ width:100%; display:block; }

  .prod-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .prod-card{
    background:var(--panel);
    padding:30px 28px;
    transition:background .3s;
  }
  .prod-card:hover{ background:var(--panel-2); }
  .prod-card .prod-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .prod-card .planet{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    box-shadow:inset -6px -6px 10px rgba(0,0,0,.5);
  }
  .prod-card h4{
    font-family:'Space Mono',monospace;
    font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; color:var(--ash);
  }
  .prod-card .spec{
    font-family:'Space Mono', monospace;
    font-size:11.5px; color:var(--stone);
    margin-left:auto;
    text-align:right;
  }
  .prod-card .story{
    background:none; padding:0;
    font-size:14.5px; color:var(--ash-dim); font-weight:300; line-height:1.65;
  }

  /* ===== EXPERIENCE ===== */
  .experience{ background:var(--ink); }
  .exp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
  .exp-visual{ border:1px solid var(--line); overflow:hidden; }
  .exp-visual img{ width:100%; display:block; }
  .exp-copy p{ color:var(--ash-dim); font-weight:300; font-size:16.5px; margin-bottom:18px; max-width:52ch;}
  .exp-copy p strong{ color:var(--ash); font-weight:700;}
  .exp-list{ margin-top:30px; display:flex; flex-direction:column; gap:0; }
  .exp-list div{ padding:18px 0; border-top:1px solid var(--line); display:flex; gap:18px; align-items:baseline;}
  .exp-list div:last-child{ border-bottom:1px solid var(--line); }
  .exp-list .n{ font-family:'Space Mono',monospace; color:var(--orange); font-weight:700; font-size:13px; width:26px; flex-shrink:0;}
  .exp-list .t{ font-size:14.5px; color:var(--ash-dim); font-weight:300; }
  .exp-list .t strong{ color:var(--ash); font-weight:700; }

  /* ===== NEWS & EVENTS ===== */
  .news{ background:var(--panel); }
  .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .news-card{ background:var(--panel); padding:0; display:flex; flex-direction:column; transition:background .3s; }
  .news-card:hover{ background:var(--panel-2); }
  .news-card .news-tag{
    font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--orange); padding:24px 26px 0;
  }
  .news-card .news-date{
    font-family:'Space Mono',monospace; font-size:11px; color:var(--stone); padding:8px 26px 0;
  }
  .news-card h4{
    font-family:'Space Mono',monospace; font-size:16.5px; font-weight:700; text-transform:none;
    color:var(--ash); padding:14px 26px 0; line-height:1.35;
  }
  .news-card p{ font-size:14px; color:var(--ash-dim); font-weight:300; line-height:1.65; padding:12px 26px 26px; flex:1;}
  .news-card .news-link{
    font-family:'Space Mono',monospace; font-size:11.5px; color:var(--blue-pale);
    padding:0 26px 24px; display:inline-block;
  }

  /* ===== CONTACT FORM + MAP ===== */
  .contact-section{ background:var(--ink); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
  .cform{ display:flex; flex-direction:column; gap:18px; }
  .cform .frow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .cform label{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--stone); margin-bottom:8px; display:block;
  }
  .cform input, .cform select, .cform textarea{
    width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ash);
    padding:13px 14px; font-family:'Mulish',sans-serif; font-size:14.5px; border-radius:2px;
    transition:border-color .25s;
  }
  .cform input:focus, .cform select:focus, .cform textarea:focus{ outline:none; border-color:var(--orange); }
  .cform textarea{ resize:vertical; min-height:110px; }
  .cform .field{ display:flex; flex-direction:column; }
  .cform .cform-note{ font-size:12.5px; color:var(--stone); font-weight:300; }
  .cform-status{ font-family:'Space Mono',monospace; font-size:12.5px; min-height:18px; }
  .cform-status.ok{ color:#3ddc84; }
  .cform-status.err{ color:var(--orange); }
  .hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

  .contact-info{ display:flex; flex-direction:column; gap:0; }
  .cinfo-row{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
  .cinfo-row:first-child{ border-top:none; }
  .cinfo-row .k{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--orange); width:110px; flex-shrink:0; padding-top:2px;
  }
  .cinfo-row .v{ font-size:14.5px; color:var(--ash-dim); font-weight:300; }
  .cinfo-row .v a{ color:var(--ash); border-bottom:1px solid var(--line); }
  .cinfo-row .v a:hover{ color:var(--orange); border-color:var(--orange); }
  .map-frame{ margin-top:26px; border:1px solid var(--line); overflow:hidden; filter:grayscale(.3) invert(.92) contrast(.92); }
  .map-frame iframe{ width:100%; height:260px; border:0; display:block; }

  /* ===== CTA STRIP ===== */
  .ctastrip{ background:var(--blue); padding:110px 0; text-align:center; position:relative; }
  .ctastrip .eyebrow{ color:rgba(255,255,255,.75); }
  .ctastrip .eyebrow::before{ background:var(--white); }
  .ctastrip h2{ color:var(--white); font-size:clamp(28px,4vw,50px); max-width:16ch; margin:0 auto 24px; }
  .ctastrip p{ color:rgba(255,255,255,.78); font-weight:300; max-width:52ch; margin:0 auto 40px; font-size:16.5px;}
  .ctastrip .hero-ctas{ justify-content:center; margin-bottom:0;}
  .ctastrip .btn-ghost{ border-color:rgba(255,255,255,.4); color:var(--white); }
  .ctastrip .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }

  /* ===== FOOTER ===== */
  footer{ background:var(--ink); border-top:1px solid var(--line); padding:70px 0 30px; }
  .foot-grid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:50px; border-bottom:1px solid var(--line);
  }
  .foot-brand img{ height:28px; margin-bottom:18px;}
  .foot-brand p{ color:var(--stone); font-size:14px; max-width:32ch; font-weight:300;}
  .foot-social{ display:flex; gap:10px; margin-top:22px; }
  .foot-social a{
    width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all .25s var(--ease);
  }
  .foot-social a:hover{ border-color:var(--orange); background:rgba(240,83,34,.1); transform:translateY(-2px); }
  .foot-social a svg{ width:16px; height:16px; stroke:var(--ash-dim); transition:stroke .25s; }
  .foot-social a:hover svg{ stroke:var(--orange); }
  .foot-col h5{
    font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
    margin-bottom:18px; font-weight:700;
  }
  .foot-col a, .foot-col p{
    display:block; color:var(--ash-dim); font-size:14.5px; margin-bottom:12px; font-weight:300;
    transition:color .25s;
  }
  .foot-col a:hover{ color:var(--orange); }
  .foot-bottom{
    padding-top:26px; display:flex; justify-content:space-between; align-items:center;
    font-size:12px; color:var(--stone); flex-wrap:wrap; gap:12px; font-family:'Space Mono',monospace;
  }

  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ===== AI COFFEE EXPERT WIDGET ===== */
  #ai-fab{
    position:fixed; right:24px; bottom:24px; z-index:200;
    width:60px; height:60px; border-radius:50%;
    background:var(--orange); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px -6px rgba(240,83,34,.6);
    transition:transform .3s var(--ease);
  }
  #ai-fab:hover{ transform:scale(1.06); }
  #ai-fab svg{ width:26px; height:26px; }
  #ai-fab .ai-dot{
    position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%;
    background:#3ddc84; border:2px solid var(--ink);
  }

  #ai-panel{
    position:fixed; right:24px; bottom:96px; z-index:200;
    width:360px; max-width:calc(100vw - 32px);
    height:500px; max-height:calc(100svh - 140px);
    background:var(--panel); border:1px solid var(--line);
    display:flex; flex-direction:column;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
    opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  #ai-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

  .ai-head{
    background:var(--blue); padding:16px 18px; display:flex; align-items:center; gap:12px;
    flex-shrink:0;
  }
  .ai-head .ai-avatar{
    width:36px; height:36px; border-radius:50%; background:var(--orange);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .ai-head .ai-avatar svg{ width:19px; height:19px; }
  .ai-head .ai-title{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.02em;}
  .ai-head .ai-sub{ font-size:11.5px; color:rgba(255,255,255,.7); margin-top:2px; }
  .ai-head .ai-close{
    margin-left:auto; background:none; border:none; color:rgba(255,255,255,.8); cursor:pointer;
    width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:18px;
  }
  .ai-head .ai-close:hover{ color:#fff; }

  .ai-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
  .ai-msg{ display:flex; gap:10px; max-width:88%; }
  .ai-msg.bot{ align-self:flex-start; }
  .ai-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
  .ai-msg .bubble{
    padding:11px 14px; border-radius:3px; font-size:13.8px; line-height:1.6; font-weight:300;
  }
  .ai-msg.bot .bubble{ background:var(--panel-2); color:var(--ash-dim); border:1px solid var(--line); }
  .ai-msg.user .bubble{ background:var(--orange); color:#fff; }
  .ai-msg .avatar-sm{
    width:24px; height:24px; border-radius:50%; flex-shrink:0; margin-top:2px;
    display:flex; align-items:center; justify-content:center;
  }
  .ai-msg.bot .avatar-sm{ background:var(--orange); }
  .ai-msg.bot .avatar-sm svg{ width:13px; height:13px; }

  .ai-suggest{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; flex-shrink:0; }
  .ai-chip{
    font-family:'Space Mono',monospace; font-size:11px; padding:8px 12px; border-radius:20px;
    background:var(--panel-2); border:1px solid var(--line); color:var(--ash-dim); cursor:pointer;
    transition:all .2s;
  }
  .ai-chip:hover{ border-color:var(--orange); color:var(--orange); }

  .ai-inputrow{
    display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line); flex-shrink:0;
  }
  .ai-inputrow input{
    flex:1; background:var(--ink); border:1px solid var(--line); color:var(--ash);
    padding:11px 13px; font-family:'Mulish',sans-serif; font-size:13.8px; border-radius:2px;
  }
  .ai-inputrow input:focus{ outline:none; border-color:var(--orange); }
  .ai-inputrow button{
    background:var(--orange); border:none; color:#fff; width:40px; height:40px; border-radius:2px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .ai-inputrow button:hover{ background:#d4451a; }
  .ai-inputrow button svg{ width:17px; height:17px; }

  .ai-typing{ display:flex; gap:4px; padding:11px 14px; }
  .ai-typing span{ width:6px; height:6px; border-radius:50%; background:var(--stone); animation:aityping 1.2s infinite ease-in-out; }
  .ai-typing span:nth-child(2){ animation-delay:.15s; }
  .ai-typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes aityping{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

  @media (max-width:480px){
    #ai-panel{ right:16px; left:16px; width:auto; bottom:88px; }
    #ai-fab{ right:16px; bottom:16px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .hero-scroll .line::after{ animation:none; }
  }

  @media (max-width:980px){
    .story-grid, .mars-grid, .exp-grid, .identity-grid, .contact-grid{ grid-template-columns:1fr; gap:44px; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .prod-grid{ grid-template-columns:1fr; }
    .news-grid{ grid-template-columns:1fr; }
  }
  /* ===== MOBILE NAV (hamburger + overlay drawer) ===== */
  .burger{
    display:none; width:40px; height:40px; border:1px solid var(--line); background:none;
    border-radius:2px; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0;
  }
  .burger span{ display:block; width:18px; height:1.5px; background:var(--ash); position:relative; transition:all .25s var(--ease); }
  .burger span::before, .burger span::after{
    content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ash); transition:all .25s var(--ease);
  }
  .burger span::before{ top:-6px; }
  .burger span::after{ top:6px; }
  .burger.open span{ background:transparent; }
  .burger.open span::before{ top:0; transform:rotate(45deg); }
  .burger.open span::after{ top:0; transform:rotate(-45deg); }

  .mobile-nav{
    position:fixed; inset:0; z-index:150; background:var(--ink);
    display:flex; flex-direction:column; justify-content:center; padding:32px;
    opacity:0; pointer-events:none; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .mobile-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .mobile-nav a{
    font-family:'Space Mono',monospace; font-size:26px; text-transform:uppercase; color:var(--ash);
    padding:16px 0; border-bottom:1px solid var(--line);
  }
  .mobile-nav a.active{ color:var(--orange); }
  .mobile-nav .btn{ margin-top:28px; align-self:flex-start; }

  @media (max-width:720px){
    .navlinks{ display:none; }
    .burger{ display:flex; }
    .navcta{ display:none; }
    .wrap{ padding:0 22px; }
    section{ padding:90px 0; }
    .stat-grid, .swatches{ grid-template-columns:1fr; }
    .compare{ flex-direction:column; }
    .compare > div:first-child{ border-right:none; border-bottom:1px solid var(--line); }
    .foot-grid{ grid-template-columns:1fr; gap:34px;}
    .foot-bottom{ flex-direction:column; align-items:flex-start; }
    .hero{ padding-top:120px; }
    .prod-card .prod-top{ flex-wrap:wrap; }
    .prod-card .spec{ margin-left:0; text-align:left; }
    .cform .frow{ grid-template-columns:1fr; }
  }

/* ============================================================
   BỔ SUNG CHO WEBSITE NHIỀU TRANG
   Page banner, breadcrumb, trang chi tiết sản phẩm/tin tức, 404
   ============================================================ */

/* ===== PAGE BANNER (dùng cho mọi trang con thay cho hero video) ===== */
.page-banner{
  position:relative; padding:170px 0 64px; overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(240,83,34,.16), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(75,85,176,.22), transparent 55%),
    var(--ink);
  border-bottom:1px solid var(--line);
}
.page-banner .wrap{ position:relative; z-index:2; }
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.04em;
  color:var(--stone); margin-bottom:22px; text-transform:uppercase;
}
.breadcrumb a{ color:var(--stone); transition:color .2s; }
.breadcrumb a:hover{ color:var(--orange); }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .here{ color:var(--orange); }
.page-banner h1{ font-size:clamp(32px,4.4vw,56px); max-width:18ch; margin-bottom:16px; }
.page-banner .lead{ color:var(--ash-dim); font-size:17px; font-weight:300; max-width:60ch; }

/* ===== PRODUCT DETAIL ===== */
.pd-hero{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.pd-sphere{
  width:118px; height:118px; border-radius:50%; flex-shrink:0;
  box-shadow:inset -18px -18px 34px rgba(0,0,0,.55), 0 0 60px -10px var(--pd-glow, rgba(240,83,34,.5));
}
.pd-spec-badge{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.05em;
  color:var(--ash-dim); border:1px solid var(--line); padding:8px 14px; border-radius:20px;
  display:inline-block;
}
.pd-body{ background:var(--panel); }
.pd-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:70px; align-items:start; }
.pd-copy p{ color:var(--ash-dim); font-size:16.5px; font-weight:300; line-height:1.75; margin-bottom:20px; max-width:58ch; }
.pd-copy p strong{ color:var(--ash); font-weight:700; }
.pd-specs{ border:1px solid var(--line); margin-top:10px; }
.pd-specs .row{ display:flex; justify-content:space-between; gap:20px; padding:16px 20px; border-top:1px solid var(--line); }
.pd-specs .row:first-child{ border-top:none; }
.pd-specs .row .k{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.pd-specs .row .v{ font-size:14px; color:var(--ash); font-weight:600; text-align:right; }

.pd-side{ display:flex; flex-direction:column; gap:28px; }
.pd-card{ background:var(--panel-2); border:1px solid var(--line); padding:26px; }
.pd-card h5{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; font-weight:700;}
.pd-card p{ font-size:14px; color:var(--ash-dim); font-weight:300; line-height:1.7; margin-bottom:0; }
.pd-card .btn{ margin-top:18px; width:100%; justify-content:center; }

.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px; }
.related-card{ background:var(--panel); padding:20px; display:flex; flex-direction:column; gap:10px; transition:background .25s; }
.related-card:hover{ background:var(--panel-2); }
.related-card .planet{ width:30px; height:30px; border-radius:50%; box-shadow:inset -6px -6px 10px rgba(0,0,0,.5); }
.related-card .name{ font-family:'Space Mono',monospace; font-size:13.5px; font-weight:700; color:var(--ash); }
.related-card .spec{ font-family:'Space Mono',monospace; font-size:10.5px; color:var(--stone); }

/* ===== PRODUCT LISTING PAGE ===== */
.plist-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.plist-card{ background:var(--panel); padding:32px; display:flex; gap:20px; align-items:flex-start; transition:background .25s; }
.plist-card:hover{ background:var(--panel-2); }
.plist-card .planet{ width:46px; height:46px; border-radius:50%; flex-shrink:0; box-shadow:inset -9px -9px 16px rgba(0,0,0,.5); }
.plist-card h3{ font-family:'Space Mono',monospace; font-size:18px; text-transform:uppercase; margin-bottom:6px; }
.plist-card .spec{ font-family:'Space Mono',monospace; font-size:11px; color:var(--stone); margin-bottom:10px; display:block;}
.plist-card p{ font-size:14px; color:var(--ash-dim); font-weight:300; line-height:1.65; margin-bottom:12px; }
.plist-card .more{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--blue-pale); }

/* ===== NEWS LISTING / DETAIL ===== */
.nlist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.article-banner{
  height:220px; border-radius:0; position:relative; overflow:hidden; margin-bottom:0;
  display:flex; align-items:flex-end; border-bottom:1px solid var(--line);
}
.article-banner .ridge-pattern{ position:absolute; inset:0; opacity:.5; }
.article-body{ background:var(--ink); }
.article-grid{ display:grid; grid-template-columns:2fr 1fr; gap:70px; align-items:start; }
.article-copy p{ color:var(--ash-dim); font-size:16.5px; font-weight:300; line-height:1.8; margin-bottom:20px; max-width:62ch; }
.article-copy p strong{ color:var(--ash); font-weight:700; }
.article-copy h3{ font-size:19px; text-transform:none; margin:34px 0 14px; color:var(--ash); }
.article-meta{ display:flex; gap:16px; align-items:center; margin-bottom:28px; font-family:'Space Mono',monospace; font-size:11.5px; color:var(--stone); }
.article-meta .tag{ color:var(--orange); }
.article-side .pd-card{ margin-bottom:20px; }
.share-row{ display:flex; gap:10px; margin-top:30px; }
.share-row a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.share-row a:hover{ border-color:var(--orange); background:rgba(240,83,34,.1); }
.share-row a svg{ width:15px; height:15px; stroke:var(--ash-dim); }
.share-row a:hover svg{ stroke:var(--orange); }

/* ===== ABOUT PAGE (Giới thiệu) ===== */
.timeline{ display:flex; flex-direction:column; margin-top:10px; }
.tl-item{ display:grid; grid-template-columns:110px 1fr; gap:28px; padding:28px 0; border-top:1px solid var(--line); }
.tl-item:first-child{ border-top:none; }
.tl-year{ font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:var(--orange); }
.tl-text h4{ font-family:'Space Mono',monospace; font-size:15px; text-transform:uppercase; color:var(--ash); margin-bottom:8px; }
.tl-text p{ font-size:14.5px; color:var(--ash-dim); font-weight:300; line-height:1.7; max-width:56ch; }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card{ background:var(--panel); padding:28px; }
.value-card .vnum{ font-family:'Space Mono',monospace; color:var(--orange); font-size:12px; margin-bottom:12px; display:block;}
.value-card h4{ font-family:'Space Mono',monospace; font-size:16px; text-transform:uppercase; margin-bottom:10px; }
.value-card p{ font-size:14px; color:var(--ash-dim); font-weight:300; line-height:1.65; }

/* ===== CONTACT PAGE extras ===== */
.contact-depts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px; }
.dept-card{ background:var(--panel); padding:26px; }
.dept-card h5{ font-family:'Space Mono',monospace; font-size:12.5px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; font-weight:700;}
.dept-card p{ font-size:13.5px; color:var(--ash-dim); font-weight:300; margin-bottom:4px; }
.dept-card a{ color:var(--ash); border-bottom:1px solid var(--line); }
.dept-card a:hover{ color:var(--orange); border-color:var(--orange); }

/* ===== 404 ===== */
.err404{ min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:160px 24px 80px; position:relative; overflow:hidden;}
.err404::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 500px at 50% 20%, rgba(240,83,34,.14), transparent 60%), var(--ink);
}
.err404-inner{ position:relative; z-index:2; max-width:560px; }
.err404 .code{ font-family:'Space Mono',monospace; font-size:clamp(70px,14vw,140px); font-weight:700; color:var(--orange); line-height:1; margin-bottom:10px; }
.err404 h1{ font-size:clamp(22px,3vw,32px); margin-bottom:16px; }
.err404 p{ color:var(--ash-dim); font-weight:300; font-size:16px; margin-bottom:34px; }

@media (max-width:980px){
  .pd-grid, .article-grid{ grid-template-columns:1fr; gap:40px; }
  .related-grid, .values-grid{ grid-template-columns:1fr; }
  .contact-depts{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .plist-grid, .nlist-grid{ grid-template-columns:1fr; }
  .plist-card{ flex-direction:column; }
  .tl-item{ grid-template-columns:1fr; gap:10px; }
  .page-banner{ padding-top:120px; }
}