/* ============ HERO BANNER TRANG CHỦ — CAROUSEL TỰ CHẠY ============ */
  .hero{position:relative; height:62vh; min-height:440px; max-height:640px; overflow:hidden;}
  .hero-slides{position:relative; width:100%; height:100%;}
  .hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .8s ease; pointer-events:none;}
  .hero-slide.active{opacity:1; pointer-events:auto;}
  .hero img{width:100%; height:100%; object-fit:cover;}
  .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));}
  .hero-content{position:absolute; left:0; bottom:0; padding:60px; color:#fff; max-width:640px;}
  .hero-eyebrow{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:500; opacity:.9; margin-bottom:16px;}
  .hero-content h1{font-size:52px; line-height:1.15; font-weight:300; letter-spacing:.01em; text-transform:uppercase; margin:0 0 24px;}
  @media(max-width:720px){.hero-content{padding:24px;} .hero-eyebrow{font-size:9.5px; letter-spacing:.14em; margin-bottom:10px;} .hero-content h1{font-size:26px; margin-bottom:16px;} .hero-content .btn{padding:12px 22px; font-size:10px;}}
  .btn{display:inline-block; padding:14px 30px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; border:1px solid currentColor; background:transparent; color:inherit; transition:all .25s;}
  .btn-solid{background:var(--wine); border-color:var(--wine); color:#fff;}
  .btn-solid:hover{background:var(--wine-dark);}
  .btn-light:hover{background:#fff; color:var(--ink);}
  .btn-zalo{background:var(--zalo); border-color:var(--zalo); color:#fff;}
  .btn-messenger{background:var(--messenger); border-color:var(--messenger); color:#fff;}
  .btn-excel{background:var(--excel); border-color:var(--excel); color:#fff;}
  .btn-block{width:100%; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px;}

  /* Nhãn giảm giá treo dọc bên trái hero */
  .hero-ribbon{position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(-90deg) translateX(-50%); transform-origin:left top; background:var(--ink); color:var(--bg); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:10px 18px; z-index:5; white-space:nowrap;}
  @media(max-width:720px){.hero-ribbon{display:none;}}

  /* Mũi tên điều hướng carousel */
  .hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; transition:background .2s;}
  .hero-arrow:hover{background:#fff;}
  .hero-arrow-prev{left:20px;}
  .hero-arrow-next{right:20px;}
  @media(max-width:720px){.hero-arrow{width:34px; height:34px; font-size:18px;}}

  .hero-dots{position:absolute; bottom:20px; right:24px; display:flex; gap:8px; z-index:5;}
  .hero-dots .dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; border:none; padding:0; transition:background .2s;}
  .hero-dots .dot.active{background:#fff;}

  .hotspot{position:absolute; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; animation:pulse 2.4s infinite; z-index:4;}
  .hotspot::before{content:'+'; font-size:16px; color:var(--ink);}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}70%{box-shadow:0 0 0 12px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}

  /* 3 Ô khuyến mãi lớn — ảnh phóng to dần khi rê chuột vào */
  .promo-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;}
  @media(max-width:720px){.promo-tiles{grid-template-columns:1fr;}}
  .promo-tile{position:relative; cursor:pointer; overflow:hidden;}
  .promo-tile-img{aspect-ratio:4/5; overflow:hidden;}
  .promo-tile-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1);}
  .promo-tile:hover .promo-tile-img img{transform:scale(1.12);}
  .promo-tile-label{position:absolute; left:20px; bottom:20px; color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; text-shadow:0 2px 8px rgba(0,0,0,.4);}

  /* ============ POPUP ƯU ĐÃI (hiện sau vài giây khi vào trang) ============ */
  .promo-popup-bg{position:fixed; inset:0; background:rgba(28,27,24,.55); z-index:150; opacity:0; pointer-events:none; transition:opacity .35s ease;}
  .promo-popup-bg.show{opacity:1; pointer-events:auto;}
  .promo-popup{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:360px; max-width:88vw;
    background:var(--card); z-index:155; padding:40px 32px 32px; text-align:center;
    box-shadow:0 20px 60px rgba(28,27,24,.3); opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;
  }
  .promo-popup.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
  .promo-popup-close{position:absolute; top:14px; right:14px; background:none; border:none; font-size:16px; color:var(--ink-soft); cursor:pointer; width:28px; height:28px;}
  .promo-popup-logo{font-family:'Playfair Display',serif; font-style:italic; font-size:24px; font-weight:600; margin-bottom:18px;}
  .promo-popup-pct{font-size:38px; font-weight:700; color:var(--wine); line-height:1; margin-bottom:14px;}
  .promo-popup-text{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:24px;}
  .promo-popup-skip{display:block; font-size:12px; color:var(--ink-soft); text-decoration:underline; margin-top:14px;}

  /* Tab nhắc lại ưu đãi — dạng dọc treo cạnh trái màn hình, xuất hiện sau khi đóng popup */
  .promo-tab{
    position:fixed; left:0; top:50%; transform:translateY(-50%) rotate(-90deg) translateX(-50%); transform-origin:left top;
    background:var(--wine); color:#fff; border:none; padding:10px 18px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    font-weight:600; cursor:pointer; z-index:60; opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .promo-tab.show{opacity:1; pointer-events:auto;}

  /* ============ DẢI SẢN PHẨM TỰ ĐỘNG CUỘN NGANG (chủ yếu cho mobile) ============
     LỖI ĐÃ SỬA: scroll-snap-type (dù mandatory hay proximity) chặn trình duyệt áp dụng
     scrollLeft do JS gán trong vòng lặp requestAnimationFrame — khiến dải ảnh đứng yên,
     không tự "chạy dây chuyền" được. Bỏ hẳn scroll-snap-type khỏi các track tự chạy này. */
  .auto-scroll-wrap{overflow:hidden; position:relative; width:100%;}
  .auto-scroll-track{display:flex; gap:2px; overflow-x:auto; padding-bottom:0; scrollbar-width:none; -ms-overflow-style:none; width:100%;}
  .auto-scroll-track::-webkit-scrollbar{display:none;}
  .auto-scroll-track .card{flex:0 0 auto; width:86vw;}
  @media(min-width:600px){ .auto-scroll-track .card{width:46vw;} }
  @media(min-width:900px){ .auto-scroll-track .card{width:33.333vw;} }

  /* ============ FULL-BLEED: dải ảnh tràn full 2 bên màn hình ============
     Dùng thủ thuật 100vw + margin âm để thoát khỏi max-width/padding của .wrap,
     cho ảnh chạm sát mép trái/phải màn hình bất kể section cha có container hẹp. */
  .conveyor-fullbleed{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}

  /* ============ KHUNG CHỨA + NÚT ĐIỀU HƯỚNG (dây chuyền cuộn ngang) ============
     Nút back/next giờ nằm ĐÈ LÊN trên chính dải ảnh (position:absolute), dạng 1 nút
     tròn nhỏ màu trắng — thay vì nút to màu vàng nằm ngoài lề như trước. */
  .conveyor-wrap{position:relative;}
  .conveyor-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:6;
    width:34px; height:34px; border-radius:50%; border:none; background:#fff; color:var(--ink);
    font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,.18); transition:transform .15s ease, opacity .15s ease; opacity:.92;
  }
  .conveyor-arrow:hover{opacity:1; transform:translateY(-50%) scale(1.08);}
  .conveyor-arrow.conveyor-prev{left:14px;}
  .conveyor-arrow.conveyor-next{right:14px;}
  @media(max-width:720px){ .conveyor-arrow{width:30px; height:30px; font-size:14px;} .conveyor-arrow.conveyor-prev{left:10px;} .conveyor-arrow.conveyor-next{right:10px;} }

  /* Kệ hàng cuộn ngang (Đầm/Set/Instagram) khi đặt trong khung full-bleed cũng dùng
     tỉ lệ ảnh lớn giống dải "Đang được săn đón" cho đồng bộ toàn trang. */
  .conveyor-fullbleed .shelf-scroll{gap:2px; scroll-snap-type:none; padding-bottom:0;}
  .conveyor-fullbleed .shelf-scroll .card{flex:0 0 auto; width:86vw;}
  @media(min-width:600px){ .conveyor-fullbleed .shelf-scroll .card{width:46vw;} }
  @media(min-width:900px){ .conveyor-fullbleed .shelf-scroll .card{width:33.333vw;} }