/* ============================================================
   9bana — Quy trình sản xuất | style.css
   Dùng kèm index.html + script.js (hoặc nhúng vào WordPress)
   ============================================================ */

:root,
#top {
  --bg: #FBFAF6;
  --ink: #101815;
  --head: #101815;
  --muted: #55605A;
  --line: #E5E2D8;
  --acc: #1FA24A;
  --accDeep: #137038;
  --accSoft: #E9F4EB;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#top {
  background: var(--bg);
  color: var(--ink);
}

#top ::selection { background: var(--acc); color: #fff; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bobY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  #top * { animation: none !important; }
}

/* ---- Ẩn/hiện nội dung theo sản phẩm (FIBER+ / MULTI+) ---- */
.pv { display: contents; }
#top.product-fiber .pv-multi { display: none !important; }
#top.product-multi .pv-fiber { display: none !important; }

/* ---- Trạng thái hover (thay cho thuộc tính style-hover cũ) ---- */
.hov-cta:hover {
  background: var(--accDeep) !important;
  transform: translateY(-2px) !important;
}

.hov-card { transition: transform 0.25s, border-color 0.25s; }
.hov-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--acc) !important;
}

.hov-invert { transition: background 0.25s, color 0.25s; }
.hov-invert:hover {
  background: var(--acc) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   TỐI ƯU MOBILE
   ============================================================ */
@media (max-width: 700px) {

  /* --- Header: gọn lại, ẩn nhãn phụ để nhường chỗ cho nút chuyển --- */
  #top > header { padding: 10px 14px !important; gap: 10px !important; }
  #top > header span[style*="text-overflow"] { display: none !important; }
  #top #btn-fiber,
  #top #btn-multi { padding: 8px 13px !important; font-size: 11px !important; }

  /* --- Hero: chữ vừa màn hình, CTA full-width dễ bấm --- */
  #top [data-hero-inner] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 96px !important;
  }
  #top [data-hero-title] { font-size: clamp(38px, 13vw, 48px) !important; }
  #top [data-hero-product] { font-size: 18px !important; }
  #top [data-hero-cta] { gap: 14px !important; }
  #top [data-hero-cta] button {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 24px !important;
  }

  /* --- Các bước quy trình: xếp dọc 1 cột, ẩn thanh ray tiến trình --- */
  #top [data-step] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #top [data-step] > div:first-child {
    grid-template-columns: 46px 1fr !important;
    gap: 14px !important;
  }
  #top [data-num] { font-size: 34px !important; }
  #top [data-plate] { max-width: 190px !important; }
  /* thanh ray dọc (pipe) chạy qua cột hình minh họa — ẩn khi xếp dọc */
  #top div[style*="right:calc(clamp(150px,24vw,280px)"] { display: none !important; }

  /* --- Footer: xếp dọc --- */
  #top > footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

@media (max-width: 420px) {
  #top [data-hero-title] { font-size: clamp(32px, 11.5vw, 42px) !important; }
  #top [data-plate] { max-width: 160px !important; }
}