/* ============================================================
   WizeBee — CSS dùng chung (bổ sung cho Tailwind)
   ============================================================ */

:root{
  --honey:#F2A900;
  --honey-deep:#C97E00;
  --ink:#14110E;
  --cream:#FAF6EF;
}

html{ scroll-behavior:smooth; }
body{ font-family:"Be Vietnam Pro",sans-serif; background:var(--cream); color:var(--ink); }
h1,h2,h3,h4,.font-display{ font-family:"Bricolage Grotesque",sans-serif; }

/* Họa tiết tổ ong mờ làm nền (atmosphere/depth) */
.honeycomb-bg{
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(242,169,0,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16z' fill='none' stroke='%23E2C58A' stroke-opacity='0.18' stroke-width='1'/%3E%3Cpath d='M28 66l28 16v32L28 130 0 114V82z' fill='none' stroke='%23E2C58A' stroke-opacity='0.18' stroke-width='1'/%3E%3C/svg%3E");
}
.ink-honeycomb{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16z' fill='none' stroke='%23F2A900' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
}

/* Tiêu đề có gạch chân mật ong */
.underline-honey{ position:relative; display:inline-block; }
.underline-honey::after{
  content:""; position:absolute; left:0; bottom:-6px; height:5px; width:100%;
  background:var(--honey); border-radius:99px;
}

/* Card hover nâng nhẹ */
.lift{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.lift:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -20px rgba(20,17,14,.35); }

/* Reveal khi tải trang */
@keyframes rise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }
.reveal{ animation:rise .8s both; }

/* Nội dung nạp động: ẩn cho tới khi tải xong (tránh nháy nội dung cũ -> mới) */
.dyn-reveal{ opacity:0; }
.dyn-reveal.ready{ opacity:1; transition:opacity .35s ease; }

/* Nút chat nổi (Zalo / Messenger) */
.float-chat{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; gap:12px; }
.float-chat a{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 10px 25px -8px rgba(0,0,0,.45); transition:transform .25s; color:#fff;
}
.float-chat a:hover{ transform:scale(1.08); }
.float-chat a span{ font-size:11px; font-weight:600; }

/* Hex icon cho mục dịch vụ */
.hex{
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
}

/* ===== Bổ sung: phong cách Aeline ===== */

/* Marquee cuộn ngang (dải ảnh sản phẩm) */
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:1.25rem; width:max-content; animation:marquee 45s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* Dropdown menu "Dịch vụ" trên desktop (cầu nối hover bằng pt) */
.nav-dd{ position:relative; }
.nav-dd-panel{ position:absolute; left:50%; transform:translateX(-50%); top:100%; padding-top:.75rem; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; pointer-events:none; }
.nav-dd:hover .nav-dd-panel{ opacity:1; visibility:visible; pointer-events:auto; }

/* Đường viền gradient nhẹ cho card hero */
.ring-soft{ box-shadow:0 1px 0 rgba(20,17,14,.04), 0 30px 60px -30px rgba(20,17,14,.25); }