/* ============ BASE: reset, biến màu, typography, nút, badge chung ============ */
  :root{
    /* Bảng màu theo đúng thương hiệu DÉLA: nền kem/giấy ấm áp giống logo, chữ đen thanh lịch.
       Thêm màu điểm nhấn sống động (đỏ rượu vang, vàng gold, xanh lá) cho các phần cần thu hút
       sự chú ý và thúc đẩy mua hàng: giá, sao đánh giá, icon tích, nhãn khuyến mãi. */
    --bg:#F8F4EA; --bg-alt:#EFE6D3; --ink:#1C1B18; --ink-soft:#6E6656;
    --wine:#A6283C; --wine-dark:#7E1E2C; --olive:#2E7D4F; --gold:#E8A93D; --sand:#DED0AE;
    --line:#E3D9C1; --card:#FFFFFF; --white:#FFFFFF;
    --zalo:#0068FF; --messenger:#0084FF; --excel:#1D6F42;
    --shadow: 0 8px 30px rgba(28,27,24,0.09);
    --maxw: 1320px;
  }
  html.dark{
    --bg:#1A1815; --bg-alt:#242019; --ink:#F3EEE2; --ink-soft:#B7AD97;
    --wine:#E0687A; --wine-dark:#EE93A1; --olive:#5FBD84; --gold:#F0C674; --sand:#3D362A;
    --line:#3A3327; --card:#211E18; --white:#1A1815;
    --shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  *{box-sizing:border-box;}
  body{margin:0;}
  html{scroll-behavior:smooth;}
  body{ background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; transition:background .3s ease,color .3s ease; line-height:1.5;}
  /* Toàn bộ tiêu đề dùng chung 1 font sans-serif (Inter) — trước đây dùng font Fraunces/Space Mono
     không hỗ trợ đủ dấu tiếng Việt (đ, ư, ơ, dấu thanh) nên bị lỗi hiển thị ở nhiều chỗ. */
  h1,h2,h3,h4,.serif{font-family:'Inter',sans-serif; font-weight:400; letter-spacing:.01em; margin:0;}
  /* Kiểu chữ tối giản, viết hoa giãn cách rộng — phong cách Zara. Dùng cho nhãn/tiêu đề nhỏ. */
  .label-caps{text-transform:uppercase; letter-spacing:.14em; font-weight:500;}
  .mono{font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.01em;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--ink); color:var(--bg);}
  :focus-visible{outline:2px solid var(--wine); outline-offset:2px;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  @media(max-width:720px){.wrap{padding:0 18px;}}

  .announce{background:var(--ink); color:var(--bg); text-align:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; padding:10px 16px; overflow:hidden; position:relative; height:38px;}
  .announce-track{position:relative; height:16px;}
  .announce-slide{position:absolute; left:0; right:0; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease;}
  .announce-slide.active{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){ .announce-slide{transition:none;} }

  .trustbar{background:var(--bg-alt); border-bottom:1px solid var(--line); overflow:hidden;}
  .trustbar-marquee{display:flex; width:max-content;}
  .trustbar-track{display:flex; align-items:center; gap:56px; padding:12px 28px; animation:trustbarScroll 22s linear infinite;}
  .trustbar .item{display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:11.5px; letter-spacing:.03em; white-space:nowrap; flex-shrink:0;}
  .trustbar svg{width:15px; height:15px; color:var(--olive); flex-shrink:0;}
  @keyframes trustbarScroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
  .trustbar-marquee:hover .trustbar-track{animation-play-state:paused;}
  @media (prefers-reduced-motion: reduce){ .trustbar-track{animation:none;} }

  .lang-switch{display:flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.02em; color:var(--ink-soft); margin-left:2px;}
  .lang-btn{background:none; border:none; font-size:16px; line-height:1; cursor:pointer; padding:2px; opacity:.45; filter:grayscale(60%); transition:opacity .2s, filter .2s;}
  .lang-btn.active{opacity:1; filter:grayscale(0%);}