/* ============ 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:28px;} .hero-content h1{font-size:32px;}}
  .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);}

