/* ========== HERO ========== */

    .hero-blob {
      position: absolute;
      right: -100px;
      top: -100px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 179, 237, 0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 620px) minmax(420px, 1fr);
      align-items: center;
      gap: 40px;
    }



    .hero-visual {
      position: relative;
   
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-ai-scene {
      position: relative;
      width: 100%;
      max-width: 620px;
      height: 520px;
      overflow: hidden;
      backdrop-filter: blur(4px);
    }

    .hero-ai-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(84, 120, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 120, 255, .08) 1px, transparent 1px);
      background-size: 120px 120px;
      mask-image: radial-gradient(circle at center, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 55%, transparent 80%);
      opacity: .18;
      pointer-events: none;
    }

    .hero-ai-ring,
    .hero-ai-ring-2 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(94, 138, 255, .16);
      border-radius: 28px;
      width: 300px;
      height: 220px;
      box-shadow: 0 0 40px rgba(58, 122, 255, .06);
    }

    .hero-ai-ring-2 {
      width: 390px;
      height: 300px;
      border-radius: 36px;
      opacity: .55;
    }

    .hero-ai-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 108px;
      height: 108px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
    }

    .hero-ai-core::before {
      content: '';
      position: absolute;
      inset: -10px;
      border: 1px solid rgba(88, 144, 255, .24);
      border-radius: 34px;
    }

    .hero-ai-core img {
      width: 66px;
      height: 66px;
      object-fit: contain;
      border-radius: 18px;
      filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
    }

    .hero-ai-spark {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      z-index: 7;
      animation: heroTwinkle 2.6s ease-in-out infinite;
      background: radial-gradient(circle at center, rgba(255, 255, 255, .95), rgba(255, 255, 255, .9) 18%, rgba(255, 255, 255, 0) 60%);
      clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8));
    }

    .hero-ai-chat {
      position: absolute;
      left: 50%;
      top: 128px;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 360px;
      max-width: 500px;
      background: linear-gradient(180deg, rgba(81, 98, 137, .92), rgba(54, 66, 100, .92));
      color: #fff;
      border-radius: 999px;
      padding: 12px 22px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 8px 24px rgba(0, 0, 0, .35), 0 0 24px rgba(110, 170, 255, .18);
    }

    .hero-ai-chat::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255, 96, 96, .85), rgba(255, 132, 80, 0) 18%);
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
      pointer-events: none;
    }

    .hero-ai-avatar {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(180deg, #ff7c66, #ef4c43);
      box-shadow: 0 0 0 3px rgba(255, 110, 110, .14);
      flex: 0 0 auto;
    }

    .hero-ai-text {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .1px;
      white-space: nowrap;
      overflow: hidden;
    }

    .hero-ai-cursor {
      display: inline-block;
      width: 8px;
      margin-left: 2px;
      animation: heroBlink 1s steps(1) infinite;
    }

    .hero-ai-panel {
      position: absolute;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(16, 23, 52, .86), rgba(10, 15, 36, .9));
      border: 1px solid rgba(100, 136, 255, .18);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .02) inset;
      padding: 10px 12px 12px;
      overflow: hidden;
      opacity: .26;
      filter: saturate(.8);
      transition: opacity 1.2s ease, transform 1.2s ease, box-shadow 1.2s ease, border-color 1.2s ease, filter 1.2s ease;
    }

    .hero-ai-panel.is-active {
      opacity: 1;
      transform: translateY(-4px) scale(1.03);
      border-color: rgba(125, 175, 255, .65);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 0 2px rgba(80, 140, 255, .12), 0 0 30px rgba(60, 125, 255, .35), 0 12px 40px rgba(0, 0, 0, .5);
      filter: saturate(1.15);
    }

    .hero-ai-title {
      font-size: 12px;
      color: #eef3ff;
      margin-bottom: 8px;
    }

    .hero-ai-small {
      font-size: 10px;
      color: #8ea0cb;
    }

    .hero-ai-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 6px 0;
    }

    .hero-ai-line {
      height: 6px;
      border-radius: 999px;
      background: #2a355e;
    }

    .hero-ai-line.sm {
      width: 40px;
    }

    .hero-ai-line.md {
      width: 70px;
    }

    .hero-ai-line.lg {
      width: 100px;
    }

    .hero-ai-line.xl {
      width: 130px;
    }

    .hero-ai-check {
      width: 8px;
      height: 8px;
      border: 1px solid #6176a7;
      border-radius: 50%;
      margin-left: 2px;
    }

    .hero-ai-report {
      left: 24px;
      top: 44px;
      width: 220px;
      min-height: 98px;
    }

    .hero-ai-analytics {
      right: 24px;
      top: 34px;
      width: 230px;
      min-height: 108px;
    }

    .hero-ai-schedule {
      left: 10px;
      bottom: 72px;
      width: 200px;
      min-height: 96px;
    }

    .hero-ai-jobs {
      left: 190px;
      bottom: 18px;
      width: 260px;
      min-height: 104px;
    }

    .hero-ai-goals {
      right: 20px;
      top: 180px;
      width: 180px;
      min-height: 100px;
    }

    .hero-ai-table {
      margin-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, .05);
    }

    .hero-ai-thead,
    .hero-ai-trow {
      display: grid;
      grid-template-columns: 18px 1fr 1fr 1fr;
      gap: 6px;
      align-items: center;
    }

    .hero-ai-thead {
      margin-bottom: 6px;
    }

    .hero-ai-thead div {
      height: 10px;
      background: #20294b;
      border-radius: 3px;
    }

    .hero-ai-trow {
      margin: 6px 0;
    }

    .hero-ai-trow div:not(.hero-ai-check) {
      height: 6px;
      border-radius: 999px;
      background: #6f7f9a40;
    }

    .hero-ai-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .hero-ai-dots span {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2f3d6f;
    }

    .hero-ai-dots .green {
      background: #26d395;
    }

    .hero-ai-dots .red {
      background: #ff5d6e;
    }

    .hero-ai-minis {
      display: flex;
      gap: 6px;
      margin-top: 4px;
    }

    .hero-ai-mini {
      background: #151d3d;
      border-radius: 4px;
      padding: 6px;
      width: 56px;
      height: 28px;
      border: 1px solid rgba(255, 255, 255, .02);
    }

    .hero-ai-mini .hero-ai-line {
      height: 4px;
    }

    .hero-ai-bars {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 54px;
    }

    .hero-ai-bars span {
      display: block;
      width: 16px;
      background: linear-gradient(180deg, #6ad89c, #32c97f);
      border-radius: 4px 4px 2px 2px;
      box-shadow: 0 0 12px rgba(80, 220, 140, .14);
    }

    .hero-ai-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
    }

    .hero-ai-tab {
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 9px;
      background: #182448;
      color: #9fb0d8;
    }

    .hero-ai-tab.active {
      background: #2a61f0;
      color: #fff;
    }

    .hero-ai-cal-row {
      display: grid;
      grid-template-columns: 26px 1fr 1fr 1fr;
      gap: 6px;
      margin: 5px 0;
      align-items: center;
    }

    .hero-ai-chip {
      height: 5px;
      border-radius: 999px;
      background: #25345f;
    }

    .hero-ai-chip.blue {
      background: #2d86ff;
    }

    .hero-ai-chip.yellow {
      background: #ffca48;
    }

    .hero-ai-chip.red {
      background: #ff6b57;
    }

    .hero-ai-chip.green {
      background: #36d17b;
    }

    .hero-ai-tags {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    .hero-ai-tag {
      font-size: 9px;
      padding: 4px 8px;
      border-radius: 4px;
      color: #fff;
      font-weight: 600;
    }

    .hero-ai-tag.green {
      background: #4cbf50;
    }

    .hero-ai-tag.blue {
      background: #68aee8;
    }

    .hero-ai-tag.red {
      background: #ef5948;
    }

    .hero-ai-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .hero-ai-goal-top {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 8px;
      align-items: start;
      margin-top: 6px;
    }

    .hero-ai-kpi {
      background: #1a2547;
      border-radius: 6px;
      padding: 6px;
      height: 48px;
    }

    .hero-ai-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 700;
      background: #ff8248;
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      margin-top: 4px;
    }

    .hero-ai-progress {
      margin-top: 6px;
      height: 10px;
      background: #1f294e;
      border-radius: 999px;
      overflow: hidden;
    }

    .hero-ai-progress span {
      display: block;
      height: 100%;
      width: 34%;
      background: linear-gradient(90deg, #2d86ff, #42b5ff);
    }

    /* khối chatbot/banner bên phải */
    .hero-chatbot-wrap {
      width: 100%;
      max-width: 620px;
    }

    /* ===== Laptop nhỏ / tablet ngang ===== */
    @media (max-width: 1200px) {
      .hero {
        padding: 72px 48px 56px;
      }

      .hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
        gap: 36px;
      }

      .hero h1 {
        font-size: 48px;
      }
    }

    /* ===== Tablet ===== */
    @media (max-width: 992px) {
      .hero {
        padding: 64px 32px 56px;
        min-height: auto;
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .hero-content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
      }

      .hero-actions,
      .hero-stats {
        justify-content: center;
      }

      .hero-visual {
        order: 2;
      }

      .hero-chatbot-wrap {
        max-width: 720px;
        margin: 0 auto;
      }
    }

    /* ===== Mobile ===== */
    @media (max-width: 768px) {
      .hero {
        padding: 56px 20px 48px;
      }

      .hero h1 {
        font-size: 36px;
        line-height: 1.15;
      }

      .hero p {
        font-size: 16px;
        margin-bottom: 28px;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .btn-hero-primary,
      .btn-hero-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      .hero-stats {
        margin-top: 36px;
        gap: 20px;
        flex-wrap: wrap;
      }

      .stat {
        min-width: calc(50% - 10px);
      }
    }

    /* ===== Mobile nhỏ ===== */
    @media (max-width: 480px) {
      .hero h1 {
        font-size: 30px;
      }

      .hero-badge {
        font-size: 12px;
        padding: 6px 12px;
      }

      .hero-stats {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .stat {
        min-width: 100%;
      }
    }