/* Nếp: linh vật cói và khung trò chuyện ở hero. */
.hero__layout{ display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:end; gap:48px; }
.nep-mascot-home{ display:flex; justify-content:center; align-items:flex-end; min-height:var(--nep-home-height,0px); }
.nep-mascot{ position:relative; display:flex; flex-direction:column; align-items:center; padding:0; border:0; background:none; cursor:pointer; color:var(--earth); -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; touch-action:manipulation; opacity:0; transform:translateY(18px); }
.hero.is-ready .nep-mascot{ opacity:1; transform:none; transition:opacity .9s var(--ease) .6s,transform .9s var(--ease) .6s; }
.nep-mascot__bubble{ position:relative; display:grid; gap:4px; padding:18px 24px; background:var(--rice); border:1px solid rgba(255,255,255,.4); border-radius:20px 20px 20px 5px; text-align:left; box-shadow:0 8px 32px #20150924; transform:rotate(-3deg); transition:transform .25s var(--ease); }
.nep-mascot__bubble::after{ content:''; position:absolute; bottom:-8px; left:45%; width:16px; height:16px; background:var(--rice); transform:rotate(45deg); }
.nep-mascot__bubble strong{ font-size:.875rem; font-weight:600; }
.nep-mascot__bubble > span{ font-size:.6875rem; color:var(--earth-2); }
.nep-mascot__bubble i{ position:absolute; right:-10px; top:-15px; font-style:normal; font-size:30px; color:var(--sand); }
.nep-mascot__figure{ position:relative; display:block; width:140px; margin-top:10px; transition:transform .3s var(--ease); }
.nep-mascot__dock-label{ display:none; }
.nep-mascot__figure img{ position:relative; z-index:1; width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; filter:drop-shadow(0 12px 10px #20150933); animation:nep-float 4.5s ease-in-out infinite; }
.nep-mascot__shadow{ position:absolute; bottom:8px; left:23%; width:54%; height:16px; border-radius:50%; background:#20150940; filter:blur(5px); animation:nep-shadow 4.5s ease-in-out infinite; }
@media (hover:hover){
  .nep-mascot:hover .nep-mascot__bubble{ transform:rotate(0deg) translateY(-3px); }
  .nep-mascot:hover .nep-mascot__figure{ transform:translateY(-4px) scale(1.03); }
}
.nep-mascot:focus-visible .nep-mascot__figure{ transform:translateY(-4px) scale(1.03); }
/* Phản hồi tức thì khi chạm — trên điện thoại không có hover. */
.nep-mascot:active .nep-mascot__bubble{ transform:rotate(0deg) scale(.97); transition-duration:.1s; }
.nep-mascot:active .nep-mascot__figure{ transform:scale(.94); transition-duration:.1s; }
.nep-mascot.is-chat-open .nep-mascot__figure img{ animation-play-state:paused; }
@keyframes nep-float{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-9px) rotate(2deg); } }
@keyframes nep-shadow{ 0%,100%{ transform:scaleX(1); opacity:.7; } 50%{ transform:scaleX(.85); opacity:.4; } }

html.nep-chat-open, body.nep-chat-open{ overflow:hidden; }
.nep-chat{ position:fixed; inset:auto 28px 28px auto; margin:0; width:480px; max-width:calc(100vw - 56px); height:min(720px,calc(100dvh - 56px)); max-height:calc(100dvh - 56px); padding:0; border:1px solid var(--line); border-radius:24px; background:var(--rice); color:var(--earth); box-shadow:0 24px 90px #20150940; overflow:hidden; transform-origin:var(--nep-origin-x,100%) var(--nep-origin-y,100%); }
.nep-chat[open]{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto auto; animation:nep-chat-in .32s cubic-bezier(.16,1,.3,1); }
.nep-chat [hidden]{ display:none !important; }
.nep-chat::backdrop{ background:#2015093d; backdrop-filter:blur(3px); animation:nep-backdrop-in .25s ease; }
.nep-chat.is-closing{ pointer-events:none; animation:nep-chat-out .18s ease forwards; }
.nep-chat.is-closing::backdrop{ animation:nep-backdrop-out .18s ease forwards; }
@keyframes nep-chat-in{ from{ opacity:0; transform:translateY(12px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes nep-chat-out{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(8px) scale(.97); } }
@keyframes nep-backdrop-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes nep-backdrop-out{ from{ opacity:1; } to{ opacity:0; } }
.nep-chat__header{ position:relative; display:flex; align-items:center; gap:12px; padding:18px 20px; background:var(--moss); color:var(--rice); }
.nep-chat__grabber{ display:none; }
.nep-chat__avatar{ flex:none; width:48px; height:48px; background:#f7f2e81a; border:1px solid #f7f2e826; border-radius:16px; overflow:hidden; }
.nep-chat__avatar img{ width:100%; height:100%; object-fit:contain; }
.nep-chat__heading{ flex:1; min-width:0; }
.nep-chat__heading h2{ margin:0 0 3px; color:inherit; font-family:var(--font-serif); font-size:1.25rem; font-weight:500; }
.nep-chat__heading h2:focus{ outline:none; }
.nep-chat__heading p{ margin:0; color:#f7f2e8cc; font-size:.625rem; }
.nep-chat__header .icon-btn{ flex:none; width:44px; height:44px; color:inherit; -webkit-tap-highlight-color:transparent; }
.nep-chat__header .icon-btn:hover{ background:#f7f2e81a; }
.nep-chat__header .icon-btn:active{ background:#f7f2e826; }
.nep-chat__header :focus-visible{ outline-color:var(--rice); }
.nep-chat__messages{ position:relative; overflow-y:auto; overscroll-behavior:contain; padding:22px 20px 12px; display:flex; flex-direction:column; gap:18px; scrollbar-width:thin; }
.nep-chat__welcome{ margin-block:auto; padding:0 8px 5px; text-align:center; flex:none; }
.nep-chat__hello{ position:relative; width:120px; height:100px; margin:0 auto 17px; border-radius:50%; background:radial-gradient(ellipse at center,#e7e1cc 0%,#e7e1cc00 70%); }
.nep-chat__hello img{ object-fit:contain; width:104px; height:112px; margin:auto; transform:translateY(-6px); }
.nep-chat__hello > span{ position:absolute; top:8px; right:-25px; padding:5px 10px; border:1px solid var(--line); border-radius:12px 12px 12px 2px; background:#FFFCF6; color:var(--moss); font-size:.625rem; transform:rotate(7deg); }
.nep-chat__eyebrow{ margin:0 0 10px; color:var(--moss); font-size:.5625rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }
.nep-chat__welcome h3{ margin:0 0 12px; font-family:var(--font-serif); font-weight:500; font-size:1.8rem; line-height:1.2; }
.nep-chat__welcome-copy{ margin:0 0 22px; font-size:.75rem; line-height:1.75; color:var(--earth-mute); }
.nep-chat__starters{ display:grid; gap:9px; text-align:left; }
.nep-chat__starters button{ display:grid; grid-template-columns:38px minmax(0,1fr) 18px; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#FFFCF6; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s,border-color .2s,transform .2s; }
.nep-chat__starter-icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--moss); background:#3f5a460b; }
.nep-chat__starter-icon svg{ width:20px; height:20px; }
.nep-chat__starters button:nth-child(2) .nep-chat__starter-icon{ color:#A35D43; background:#b0543a0b; }
.nep-chat__starters button:nth-child(3) .nep-chat__starter-icon{ color:#967443; background:#9674430e; }
.nep-chat__starters strong{ display:block; margin-bottom:2px; font-size:.75rem; font-weight:500; }
.nep-chat__starters small{ display:block; color:var(--earth-mute); font-size:.625rem; line-height:1.5; }
.nep-chat__starter-arrow{ color:var(--earth-mute); font-size:1rem; }
.nep-chat__welcome-hint{ margin:16px 0 0; font-size:.625rem; color:var(--earth-mute); }
.nep-message{ width:100%; flex:none; animation:nep-message-in .22s var(--ease); }
.is-restoring .nep-message{ animation:none; }
@keyframes nep-message-in{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.nep-message__name{ margin:0 0 5px 2px; color:var(--earth-mute); font-size:.5625rem; font-weight:500; }
.nep-message__text{ width:fit-content; max-width:94%; padding:13px 15px; border:1px solid var(--line-soft); border-radius:3px 16px 16px; background:#FFFCF6; font-size:.8125rem; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.nep-message--user{ display:flex; flex-direction:column; align-items:flex-end; }
.nep-message--user .nep-message__name{ margin-right:2px; }
.nep-message--user .nep-message__text{ border:0; border-radius:16px 3px 16px 16px; background:var(--moss); color:var(--rice); }
.nep-chat__products{ display:grid; gap:8px; margin-top:10px; }
.nep-chat__product{ display:grid; grid-template-columns:56px minmax(0,1fr) 16px; align-items:center; gap:12px; padding:10px; background:#FFFCF6; border:1px solid var(--line); border-radius:12px; -webkit-tap-highlight-color:transparent; transition:border-color .2s,transform .2s; }
.nep-chat__product img{ width:56px; height:66px; border-radius:7px; object-fit:cover; background:var(--rice-3); }
.nep-chat__product strong{ display:block; font-size:.75rem; font-weight:500; }
.nep-chat__product small{ display:block; margin:3px 0; font-size:.6875rem; color:var(--moss); }
.nep-chat__product p{ margin:0; font-size:.625rem; line-height:1.55; color:var(--earth-mute); }
.nep-chat__link{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:.75rem; font-weight:500; color:var(--moss); border-bottom:1px solid var(--moss); }
.nep-chat__suggestions{ display:flex; flex-wrap:nowrap; gap:7px; padding:12px 20px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.nep-chat__suggestions::-webkit-scrollbar{ display:none; }
.nep-chat__suggestions button{ flex:none; min-height:36px; padding:7px 11px; border:1px solid var(--line); border-radius:var(--r-pill); background:transparent; color:var(--earth); font-size:.625rem; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s,border-color .2s,transform .2s; }
.nep-chat__suggestions button:disabled{ opacity:.5; cursor:wait; }
.nep-chat__form{ display:flex; align-items:flex-end; gap:8px; margin:12px 16px 0; padding:6px 6px 6px 14px; border:1px solid var(--line); border-radius:16px; background:#FFFCF6; }
.nep-chat__form:focus-within{ border-color:var(--moss); box-shadow:0 0 0 2px #3f5a460c; }
.nep-chat__input{ min-width:0; min-height:44px; max-height:104px; flex:1; padding:10px 0; border:0; outline:none; resize:none; background:transparent; color:var(--earth); font-size:16px; line-height:1.5; scrollbar-width:thin; }
.nep-chat__input::placeholder{ color:var(--earth-mute); font-size:.75rem; }
.nep-chat__send{ display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; border-radius:12px; color:var(--rice); background:var(--moss); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background .2s,transform .2s,opacity .2s; }
.nep-chat__send svg{ width:18px; height:18px; }
.nep-chat__send:disabled{ opacity:.4; cursor:default; }
.nep-chat__send:not(:disabled):active{ transform:scale(.9); transition-duration:.08s; }
.nep-chat__note{ margin:0; padding:9px 16px 13px; font-size:.5625rem; text-align:center; color:var(--earth-mute); }
.nep-chat__typing{ display:flex; flex:none; align-items:center; gap:10px; width:fit-content; padding:12px 15px; border:1px solid var(--line-soft); border-radius:3px 16px 16px; background:#FFFCF6; color:var(--earth-mute); font-size:.6875rem; }
.nep-chat__typing-dots{ display:flex; align-items:center; gap:4px; }
.nep-chat__typing i{ width:5px; height:5px; background:var(--moss); border-radius:50%; animation:nep-type 1s ease-in-out infinite; }
.nep-chat__typing i:nth-child(2){ animation-delay:.15s; }
.nep-chat__typing i:nth-child(3){ animation-delay:.3s; }
@keyframes nep-type{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }

/* Hover chỉ cho chuột — trên màn chạm hover bị "dính" sau khi bấm. */
@media (hover:hover){
  .nep-chat__starters button:hover{ background:#FFFDF9; border-color:#3f5a4673; transform:translateY(-2px); }
  .nep-chat__product:hover{ border-color:var(--moss); }
  .nep-chat__suggestions button:not(:disabled):hover{ border-color:var(--moss); background:var(--rice-2); }
  .nep-chat__send:not(:disabled):hover{ background:var(--earth); transform:translateY(-1px); }
}
.nep-chat__starters button:active{ background:var(--rice-2); border-color:#3f5a4673; transform:scale(.98); transition-duration:.08s; }
.nep-chat__product:active{ border-color:var(--moss); transform:scale(.98); transition-duration:.08s; }
.nep-chat__suggestions button:not(:disabled):active{ border-color:var(--moss); background:var(--rice-2); transform:scale(.96); transition-duration:.08s; }

@media (max-width:1000px) and (min-width:721px){
  .hero__layout{ grid-template-columns:minmax(0,1fr) 220px; gap:24px; }
  .nep-mascot__figure{ width:120px; }
  .nep-mascot__bubble{ padding:15px 16px; }
  .nep-mascot__bubble strong{ font-size:.75rem; }
  .nep-mascot__bubble > span{ font-size:.625rem; }
}
@media (max-width:720px){
  .hero__layout{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .hero__inner{ padding-block:48px 28px; }
  .nep-mascot-home{ justify-self:end; width:min(100%,340px); }
  .nep-mascot{ display:grid; grid-template-columns:minmax(0,1fr) 100px; grid-template-rows:auto; align-items:center; width:100%; column-gap:8px; }
  .nep-mascot__bubble{ grid-column:1; grid-row:1; padding:14px 16px; transform:rotate(-2deg); }
  .nep-mascot__bubble::after{ bottom:14px; left:auto; right:-6px; width:12px; height:12px; }
  .nep-mascot__bubble strong{ font-size:.8125rem; }
  .nep-mascot__bubble > span{ font-size:.75rem; line-height:1.45; }
  .nep-mascot__bubble i{ right:auto; left:-8px; font-size:24px; }
  .nep-mascot__figure{ width:70px; justify-self:center; margin:0; grid-column:2; grid-row:1; }
  .nep-mascot__shadow{ bottom:3px; height:8px; }
}

/* Khi vị trí ở hero ra khỏi tầm nhìn, cùng linh vật bám góc màn hình. */
.nep-mascot.is-docked{ position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:250; display:flex; width:90px; gap:2px; opacity:1; transform:none; transition:none; animation:nep-dock-in .25s var(--ease); }
.nep-mascot.is-docked .nep-mascot__figure{ width:60px; margin:0; }
.nep-mascot.is-docked .nep-mascot__bubble{ display:none; }
.nep-mascot.is-docked .nep-mascot__dock-label{ display:block; padding:4px 10px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--rice); color:var(--moss); font-size:.625rem; font-weight:600; box-shadow:0 3px 12px #20150914; }
.nep-mascot.is-docked .nep-mascot__shadow{ bottom:3px; height:7px; }
.nep-mascot.is-docked:focus-visible{ outline:2px solid var(--moss); outline-offset:4px; border-radius:20px; }
@keyframes nep-dock-in{ from{ opacity:0; transform:translateY(10px) scale(.9); } to{ opacity:1; transform:none; } }
@media (max-width:720px){
  .nep-mascot.is-docked{ right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); width:72px; }
  .nep-mascot.is-docked .nep-mascot__figure{ width:52px; }
}

/* ---------- Điện thoại (dọc và ngang): khung chat là bottom sheet ---------- */
@media (max-width:720px), (max-height:520px) and (pointer:coarse){
  /* Bám theo visualViewport: bàn phím mở thì khung co lại ngay trên bàn phím, ô nhập không bị che. */
  .nep-chat{
    --nep-sheet-h:min(760px,calc(var(--nep-vv-h,100dvh) - 20px));
    inset:auto 0;
    top:calc(var(--nep-vv-top,0px) + var(--nep-vv-h,100dvh) - var(--nep-sheet-h));
    width:100%; max-width:none; height:var(--nep-sheet-h); max-height:none;
    border-width:0; border-radius:22px 22px 0 0;
    box-shadow:0 -12px 48px #20150933;
    transform-origin:center bottom;
    touch-action:manipulation;
    transition:translate .32s cubic-bezier(.32,.72,0,1);
  }
  .nep-chat.is-dragging{ transition:none; }
  .nep-chat.is-keyboard{ --nep-sheet-h:var(--nep-vv-h,100dvh); border-radius:0; }
  .nep-chat[open]{ animation:nep-sheet-in .42s cubic-bezier(.32,.72,0,1); }
  .nep-chat.is-closing{ animation:nep-sheet-out .24s cubic-bezier(.4,0,1,1) forwards; }
  /* blur toàn trang sau lớp phủ rất nặng trên điện thoại; khung đã che gần hết nên chỉ cần phủ màu */
  .nep-chat::backdrop{ background:#2015094d; backdrop-filter:none; }

  .nep-chat__header{ padding:20px max(14px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); gap:10px; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
  .nep-chat.is-dragging .nep-chat__header{ cursor:grabbing; }
  .nep-chat__grabber{ display:block; position:absolute; top:7px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:4px; background:#f7f2e866; }
  .nep-chat__avatar{ width:44px; height:44px; border-radius:14px; }
  .nep-chat__heading p{ font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nep-chat__header .icon-btn{ width:44px; height:44px; }

  .nep-chat__messages{ padding:18px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); gap:16px; }
  .nep-chat__welcome{ padding-inline:0; }
  .nep-chat__hello > span{ font-size:.6875rem; }
  .nep-chat__eyebrow{ font-size:.625rem; }
  .nep-chat__welcome h3{ font-size:1.75rem; }
  .nep-chat__welcome-copy{ font-size:.875rem; line-height:1.6; }
  .nep-chat__starters button{ min-height:64px; padding:12px 14px; }
  .nep-chat__starters strong{ font-size:.875rem; }
  .nep-chat__starters small{ font-size:.75rem; }
  .nep-chat__welcome-hint{ font-size:.75rem; }

  .nep-message__name{ font-size:.6875rem; }
  .nep-message__text{ max-width:92%; padding:11px 14px; font-size:.9375rem; line-height:1.6; }
  .nep-chat__product{ padding:10px 12px 10px 10px; }
  .nep-chat__product strong{ font-size:.875rem; }
  .nep-chat__product small{ font-size:.8125rem; }
  .nep-chat__product p{ font-size:.75rem; line-height:1.45; }
  .nep-chat__link{ min-height:44px; margin-top:2px; font-size:.875rem; border-bottom:0; text-decoration:underline; text-underline-offset:4px; }
  .nep-chat__typing{ font-size:.8125rem; }

  /* Gợi ý cuộn ngang: mờ dần ở mép phải để người dùng biết còn nữa. */
  .nep-chat__suggestions{ gap:8px; padding:10px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left)); scroll-padding-inline:16px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
  .nep-chat__suggestions button{ min-height:40px; padding:8px 14px; font-size:.8125rem; }
  .nep-chat__suggestions button:last-child{ margin-right:20px; }

  .nep-chat__form{ margin:10px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
  .nep-chat__input::placeholder{ font-size:.875rem; }
  .nep-chat__note{ padding:8px 16px max(10px,env(safe-area-inset-bottom)); font-size:.6875rem; }

  /* Bàn phím đang mở: dồn chỗ cho phần trò chuyện. */
  .nep-chat.is-keyboard .nep-chat__header{ padding-block:16px 8px; }
  .nep-chat.is-keyboard .nep-chat__avatar{ width:34px; height:34px; border-radius:11px; }
  .nep-chat.is-keyboard .nep-chat__heading h2{ margin:0; font-size:1.0625rem; }
  .nep-chat.is-keyboard .nep-chat__heading p,
  .nep-chat.is-keyboard .nep-chat__note,
  .nep-chat.is-keyboard .nep-chat__hello,
  .nep-chat.is-keyboard .nep-chat__welcome-copy,
  .nep-chat.is-keyboard .nep-chat__welcome-hint{ display:none; }
  .nep-chat.is-keyboard .nep-chat__welcome h3{ font-size:1.375rem; }
  .nep-chat.is-keyboard .nep-chat__form{ margin-bottom:8px; }
  .nep-chat.is-keyboard .nep-chat__messages{ padding-top:12px; }
}
@keyframes nep-sheet-in{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes nep-sheet-out{ from{ transform:none; } to{ transform:translateY(100%); } }
@media (max-width:360px){
  .nep-chat__header{ gap:8px; }
  .nep-chat__messages, .nep-chat__suggestions{ padding-inline:14px; }
  .nep-chat__starters button{ grid-template-columns:34px minmax(0,1fr) 14px; gap:10px; padding-inline:12px; }
}
@media (max-height:700px){
  .nep-chat__messages{ padding-top:16px; }
  .nep-chat__hello{ width:90px; height:62px; margin-bottom:10px; }
  .nep-chat__hello img{ width:72px; height:77px; }
  .nep-chat__hello > span{ top:0; right:-25px; }
  .nep-chat__eyebrow{ margin-bottom:7px; }
  .nep-chat__welcome h3{ font-size:1.5rem; margin-bottom:8px; }
  .nep-chat__welcome-copy{ margin-bottom:14px; line-height:1.5; }
  .nep-chat__starters{ gap:7px; }
  .nep-chat__starters button{ min-height:0; padding-block:9px; }
  .nep-chat__welcome-hint{ margin-top:10px; }
}
@media (prefers-reduced-motion:reduce){
  .nep-mascot, .nep-mascot.is-docked, .nep-mascot__figure img, .nep-mascot__shadow, .nep-chat[open], .nep-chat.is-closing, .nep-chat::backdrop, .nep-chat__typing i, .nep-message{ animation:none; }
  .nep-chat{ transition:none; }
  .nep-mascot{ opacity:1; transform:none; }
}