/* Responsive: mobile-first, mở rộng theo các mốc 390 · 430 · 768 · 1024 · 1280 · 1440 */
@media (max-width: 380px) {
  .logo__mark { width: 34px; height: 34px; }
  .logo { gap: 10px; }
  .logo__line { font-size: 0.625rem; letter-spacing: 0.12em; }
  .logo__line--accent { font-size: 0.8125rem; letter-spacing: 0.2em; }
  .site-header__actions { gap: 6px; }
  .hero__actions .btn { width: 100%; }
  .dashboard { padding: 16px; }
  .dashboard__status { grid-template-columns: 1fr; }
  .float-card--chat { max-width: 240px; }
  .stats { gap: 8px; }
  .channels--compact { grid-template-columns: 1fr; }
}

@media (min-width: 390px) {
  .feature-list { grid-template-columns: 1fr 1fr; column-gap: 16px; gap: 4px 16px; }
  .feature-list li { flex-direction: column; gap: 8px; padding: 12px 0; }
  .feature-list .icon { margin-top: 0; }
}

@media (min-width: 430px) {
  .auto-grid { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .float-card--chat { right: -12px; }
  .float-card--flow { left: -12px; }
}

@media (min-width: 768px) {
  :root { --header-h: 76px; }

  .hero__particles { display: block; }
  .hero__scroll { display: grid; }
  .float-card--chat { right: -40px; }
  .float-card--flow { left: -36px; }

  .section-header--split {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: 48px;
  }
  .section-header--split .section-lead { justify-self: end; }

  .intro__grid { grid-template-columns: 1fr 1fr; gap: 64px; }

  
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "ai ai"
      "fb ig"
      "ip so";
  }
  .service-card--fb { grid-area: fb; }
  .service-card--ig { grid-area: ig; }
  .service-card--ai { grid-area: ai; }
  .service-card--iphone { grid-area: ip; }
  .service-card--social { grid-area: so; }

  .ai-card__main { grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; }
  .ai-card__caps { grid-template-columns: repeat(3, 1fr); }

  .growth__grid { grid-template-columns: repeat(2, 1fr); }
  .growth__grid > :last-child { grid-column: 1 / -1; }
  .web__grid { grid-template-columns: repeat(2, 1fr); }
  .web__grid > :last-child { grid-column: 1 / -1; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }

  .feature-list { column-gap: 28px; }
  .feature-list li { flex-direction: row; gap: 14px; padding: 14px 0; }
  .feature-list .icon { margin-top: 3px; }

  
  .pipeline {
    --node: 68px;
    --gap: 20px;
    grid-template-columns: repeat(6, 1fr);
  }
  .pipeline__node:nth-child(3)::after { display: block; }
  .auto-grid { grid-template-columns: repeat(4, 1fr); }

  .cases__grid { grid-template-columns: repeat(2, 1fr); }
  .cases__grid > :first-child { grid-column: 1 / -1; }

  .carousel__slide { flex-basis: calc(50% - 8px); }

  .channels:not(.channels--compact) { grid-template-columns: 1fr 1fr; }

  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { grid-template-columns: auto 1fr; gap: 32px; }
  .site-footer__legal { justify-self: end; text-align: right; }

  
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
  .floating { bottom: calc(24px + env(safe-area-inset-bottom)); right: 24px; }
  .floating__contact { display: inline-flex; }
}

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.08fr 1fr; gap: 48px; }
  .hero__visual { justify-self: end; }
  .hero__title { max-width: 13ch; }

  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "ai ai ai ai fb fb"
      "ai ai ai ai ig ig"
      "ip ip ip so so so";
  }
  .ai-card__main { grid-template-columns: 1.05fr 1fr; align-items: start; }

  .ai-section__grid { grid-template-columns: 1.1fr 1fr; gap: 72px; }
  .local__grid { grid-template-columns: 1fr 1fr; gap: 72px; }

  .growth__grid { grid-template-columns: repeat(3, 1fr); }
  .growth__grid > :last-child { grid-column: auto; }
  .web__grid { grid-template-columns: repeat(3, 1fr); }
  .web__grid > :last-child { grid-column: auto; }
  .web-card--featured { top: -16px; }
  .why__grid { grid-template-columns: repeat(4, 1fr); }
  .why-card { min-height: 300px; }

  
  .timeline__track {
    left: 24px; right: 24px;
    top: 23px; bottom: auto;
    width: auto; height: 2px;
  }
  .timeline__progress {
    background: linear-gradient(90deg, #B8860B, #FFD700, #D4AF37);
    transform: scaleX(var(--progress));
    transform-origin: left;
  }
  .timeline__list { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .timeline__item { padding-left: 0; padding-top: 72px; }

  .cases__grid { grid-template-columns: repeat(6, 1fr); }
  .cases__grid > :nth-child(-n+2) { grid-column: span 3; }
  .cases__grid > :nth-child(n+3) { grid-column: span 2; }

  .faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
  .faq .section-header { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }

  .contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
  .channels:not(.channels--compact) { grid-template-columns: 1fr; }

  .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .site-footer__brand { grid-column: auto; }
}

@media (min-width: 1280px) {
  .nav-toggle { display: none; }
  .site-header__cta { display: inline-flex; }

  .nav {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__mobile-footer { display: none; }
  .nav__list { display: flex; align-items: center; gap: 4px; }
  .nav__link {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-secondary);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--gradient-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav__link:hover { color: var(--text-primary); }
  .nav__link.is-active { color: var(--text-primary); }
  .nav__link.is-active::after,
  .nav__link:hover::after { transform: scaleX(1); }

  /* Menu dịch vụ dạng mega menu trên desktop */
  .site-header__inner { position: relative; }
  .nav__dropdown-toggle { width: auto; gap: 6px; justify-content: flex-start; }
  .nav__dropdown-toggle.is-active { color: var(--text-primary); }
  .nav__chevron { width: 14px; height: 14px; }
  .mega {
    position: absolute;
    top: calc(100% - 6px);
    left: var(--gutter);
    right: var(--gutter);
    max-width: 1120px;
    max-height: none;
    margin-inline: auto;
    padding: 28px 32px 20px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .mega.is-open {
    max-height: none;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
  }
  .mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 0; }
  .mega__link {
    min-height: 36px;
    margin-inline: -8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: var(--fs-sm);
  }
  .mega__link:hover { background: var(--gold-wash); }
  .mega__all {
    display: flex;
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
  }

  .ai-card { padding: 36px; }
}

@media (min-width: 1440px) {
  :root { --container: 1280px; }
  .hero__inner { gap: 80px; }
  .float-card--chat { right: -56px; }
  .float-card--flow { left: -56px; }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 32px); padding-bottom: 72px; }
  .hero__title { font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4rem); }
  .hero__content { gap: 20px; }
  .hero__scroll { display: none; }
}

@media (hover: none) {
  .btn--primary:hover,
  .btn--ghost:hover,
  .icon-btn:hover { transform: none; }
}

@media (max-width: 767px) {
  .dashboard,
  .badge--glass,
  .floating__top { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dashboard { background: var(--surface); }
  .hero__glow--b { display: none; }
  .card { box-shadow: none; }
}

@media print {
  .site-header, .floating, .mobile-cta, .hero__bg, .hero__scroll, .modal { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Tối ưu thao tác chạm trên di động */
@media (max-width: 767px) {
  .site-footer__col a { min-height: 44px; }
  .site-footer__col li:not(:has(a)) { padding-block: 10px; }
  .breadcrumb a { min-height: 40px; }
  .carousel__dot { width: 36px; }
  .site-header .gt_switcher-popup { padding: 0 10px 0 8px; gap: 4px; }
}
@media (max-width: 380px) {
  .logo__line { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .logo__line--accent { font-size: 0.8125rem; letter-spacing: 0.18em; }
  .logo__mark { width: 32px; height: 32px; }
}
.site-header .gt_switcher-popup span:last-of-type { font-size: 10px !important; }

@media (max-width: 767px) { .site-footer__col a { min-width: 44px; } }

/* Tinh chỉnh giao diện điện thoại (≤ 429px) */
@media (max-width: 429px) {
  .hero .badge { font-size: 0.6875rem; letter-spacing: 0.01em; padding: 6px 12px; }

  .ai-card__caps li {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 12px;
    font-size: var(--fs-xs);
    line-height: 1.4;
  }
  .ai-card__caps span { width: 30px; height: 30px; border-radius: 9px; }
  .ai-card__caps .icon { width: 16px; height: 16px; }
  .ai-card__actions .btn { flex: 1 1 100%; }
}

/* Bộ lọc dự án: một hàng cuộn ngang trên di động */
@media (max-width: 767px) {
  .project-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .project-filter::-webkit-scrollbar { display: none; }
  .project-filter__btn { flex: none; scroll-snap-align: start; }
}

.gt_white_content .gt_search { background: #101010 !important; }

/* Di động: nút lên đầu trang nằm trong thanh liên hệ, không che nội dung */
.mobile-cta { grid-template-columns: auto 1fr auto; }
.mobile-cta__top { width: 48px; height: 48px; flex: none; }
@media (max-width: 767px) {
  .floating__top { display: none; }
  body.is-cta-hidden .floating__top { display: grid; background: var(--surface); }
  .floating { bottom: calc(16px + env(safe-area-inset-bottom)); right: 12px; }
  .testimonial__quote { font-size: var(--fs-base); line-height: 1.65; }
  .testimonial { gap: 16px; }
}
.mobile-cta { grid-template-columns: auto minmax(0, 1fr) 48px; gap: 8px; }
.mobile-cta__btn { min-width: 0; }
.mobile-cta .btn.mobile-cta__btn { padding-inline: 12px; }
.mobile-cta__btn--ghost { padding: 0 14px; }
@media (max-width: 380px) {
  .mobile-cta__btn--ghost { padding: 0 12px; }
  .mobile-cta { gap: 6px; }
}

.mobile-cta .btn.mobile-cta__btn { overflow: hidden; }

/* Mọi thiết bị cảm ứng (điện thoại, máy tính bảng): vùng chạm tối thiểu ~40–44px */
@media (pointer: coarse) {
  .site-footer__col a { min-height: 44px; min-width: 44px; }
  .breadcrumb a { min-height: 40px; }
  .carousel__dot { width: 36px; }
  .toc__sublink { min-height: 40px; }
}