/* ==========================================================================
   WEBSEO LXWINE — Hệ thống giao diện chính
   Bảng màu chuẩn LXWINE DESIGN STANDARD V1.0
   ========================================================================== */

:root{
  --wine:#8B1432;
  --wine-dark:#6E021F;
  --wine-deep:#4A0714;
  --wine-night:#4A1828;
  /* Vang thuong hieu doi sang #CD9842 theo bo logo MASTER FINAL khach gui 09/09/2026. */
  --gold:#CD9842;
  --gold-soft:#E2BC85;
  --gold-dim:#A5761F;
  --bg:#FCFBF8;
  --surface:#FFFFFF;
  --ivory:#FCFBF8;
  --tint:#F7F5F0;
  --text:#2A2A2A;
  --text-2:#666666;
  --text-3:#8C8C8C;
  --line:#ECE8E1;
  --line-soft:#F4F1EA;
  --ok:#1F7A46;
  --warn:#C2410C;

  --ff-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ff-body:'Poppins','Be Vietnam Pro','Segoe UI',Roboto,system-ui,sans-serif;

  --wrap:1650px;
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --sh-1:0 1px 2px rgba(26,10,15,.06),0 2px 8px rgba(26,10,15,.05);
  --sh-2:0 4px 16px rgba(26,10,15,.08);
  --sh-3:0 12px 40px rgba(26,10,15,.14);
  --ease:cubic-bezier(.4,0,.2,1);
  --hdr-h:0px;
}

/* --------------------------------------------------------------- Reset  */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--wine)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0 0 .5em;font-family:var(--ff-display);font-weight:700;line-height:1.25;color:var(--text)}
h1{font-size:clamp(28px,3.4vw,44px)}
h2{font-size:clamp(24px,2.6vw,34px)}
h3{font-size:clamp(19px,1.8vw,23px)}
h4{font-size:17px}
p{margin:0 0 1em}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:9999;background:#fff;padding:10px 16px;border-radius:var(--r-sm)}

/* --------------------------------------------------------------- Layout */
.wslx-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:16px}
.wslx-wrap--narrow{max-width:920px}
.wslx-main{min-height:40vh}
/* padding-block chứ không dùng "padding:X 0": nhiều trang ghép "wslx-wrap wslx-section" trên cùng một thẻ,
   viết tắt sẽ xoá mất lề ngang 16px của .wslx-wrap làm nội dung dính mép trên điện thoại. */
.wslx-section{padding-block:clamp(36px,5vw,64px)}
.wslx-section--tight{padding-block:clamp(24px,3vw,40px)}
.wslx-grid{display:grid;gap:20px}
.wslx-row{display:flex;align-items:center;gap:12px}
.wslx-hide{display:none!important}
/* Thuộc tính hidden phải thắng mọi display của lớp (tab, khối lọc…) */
[hidden]{display:none!important}
@media(max-width:1024px){.wslx-dt-only{display:none!important}}
@media(min-width:1025px){.wslx-mb-only{display:none!important}}

/* --------------------------------------------------------- Tiêu đề mục  */
/* overflow-x:clip — hoa văn gạch vàng hai bên tiêu đề (--display) nằm ngoài khung
   chữ; với tiêu đề dài ở màn 1366–1440px nó vươn quá mép trang và đẻ ra thanh cuộn
   ngang. Cắt phần thừa tại đây; hai đầu hoa văn vốn mờ dần về trong suốt nên không
   nhìn thấy vết cắt. Dùng clip chứ không dùng hidden để không tạo khung cuộn mới. */
.wslx-head{text-align:center;margin-bottom:clamp(24px,3vw,38px);overflow-x:clip}
.wslx-head__eyebrow{
  display:inline-flex;align-items:center;gap:10px;color:var(--gold-dim);
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;
}
.wslx-head__eyebrow::before,.wslx-head__eyebrow::after{content:"";width:34px;height:1px;background:var(--gold)}
.wslx-head__title{font-size:clamp(26px,3.2vw,40px);margin:0 0 10px;letter-spacing:.01em}
.wslx-head__title--upper{text-transform:uppercase}
.wslx-head__sub{max-width:660px;margin:0 auto;color:var(--text-2);font-size:15px}
.wslx-head__deco{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;color:var(--gold)}
.wslx-head__deco::before,.wslx-head__deco::after{content:"";width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.wslx-head__deco::after{background:linear-gradient(270deg,transparent,var(--gold))}
.wslx-head--left{text-align:left}
.wslx-head--left .wslx-head__sub{margin-inline:0}

/* Tiêu đề có nút "Xem tất cả" bên phải */
.wslx-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.wslx-head-row h2{margin:0}

/* --------------------------------------------------------------- Nút    */
.wslx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:var(--r-sm);font-size:14px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;border:1.5px solid transparent;
  transition:all .25s var(--ease);white-space:nowrap;line-height:1.2;
}
.wslx-btn .wslx-ico{width:18px;height:18px;flex:none}
.wslx-btn--primary{background:var(--wine);color:#fff;box-shadow:0 4px 14px rgba(139,20,50,.24)}
.wslx-btn--primary:hover{background:var(--wine-dark);color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(110,2,31,.3)}
.wslx-btn--gold{background:var(--gold);color:#2A1206}
.wslx-btn--gold:hover{background:var(--gold-soft);color:#2A1206}
.wslx-btn--ghost{border-color:var(--line);color:var(--text);background:var(--surface)}
.wslx-btn--ghost:hover{border-color:var(--wine);color:var(--wine)}
.wslx-btn--outline{border-color:var(--wine);color:var(--wine);background:transparent}
.wslx-btn--outline:hover{background:var(--wine);color:#fff}
.wslx-btn--light{border-color:rgba(255,255,255,.5);color:#fff}
.wslx-btn--light:hover{background:#fff;color:var(--wine);border-color:#fff}
.wslx-btn--block{width:100%}
.wslx-btn--sm{padding:9px 16px;font-size:12.5px}
.wslx-btn--lg{padding:16px 34px;font-size:15px}
.wslx-link-all{display:inline-flex;align-items:center;gap:7px;color:var(--wine);font-weight:600;font-size:14px}
.wslx-link-all:hover{color:var(--gold-dim);gap:11px}
.wslx-link-all .wslx-ico{width:17px;height:17px;transition:transform .25s var(--ease)}

/* ============================================================ TOP BAR   */
.wslx-topbar{background:var(--wine-night);color:rgba(255,255,255,.82);font-size:12.5px}
.wslx-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:36px;flex-wrap:wrap}
.wslx-topbar__list{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.wslx-topbar__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.wslx-topbar__item .wslx-ico{width:15px;height:15px;color:var(--gold);flex:none}
.wslx-topbar a:hover{color:var(--gold-soft)}
@media(max-width:1024px){.wslx-topbar{display:none}}

/* ============================================================= HEADER   */
/* Chuẩn khách chốt 09/09/2026. Tổng cao header máy tính đúng 194px
   = 130px hàng trên + 64px hàng menu. Hai hàng dùng chung khung .wslx-hwrap
   (1440px, chừa 24px mỗi bên) nên mép trái logo thẳng tuyệt đối với chữ
   TRANG CHỦ, và mép phải cụm Giỏ hàng (tính cả mũi tên) thẳng với chữ LIÊN HỆ.
   Màu phẳng, tuyệt đối không gradient / shadow / glow / lớp phủ tối. */
.wslx-hwrap{width:calc(100% - 48px);max-width:1440px;margin:0 auto;box-sizing:border-box}

.wslx-header{background:#8B1432;color:#fff;position:relative;z-index:60}
.wslx-header__inner{display:flex;align-items:center;gap:clamp(16px,2vw,30px);height:130px}

/* Logo */
.wslx-brand{display:inline-flex;align-items:center;gap:11px;color:#fff;flex:none}
.wslx-brand:hover{color:#fff}
.wslx-brand__mark{width:46px;height:46px;flex:none;color:var(--gold)}
.wslx-brand__text{display:flex;flex-direction:column;line-height:1}
.wslx-brand__name{font-family:var(--ff-display);font-size:31px;font-weight:700;letter-spacing:.11em;color:#fff}
.wslx-brand__slogan{font-size:9.5px;letter-spacing:.2em;color:var(--gold-soft);opacity:.9;margin-top:6px;text-transform:uppercase}
/* Dùng đúng tệp logo MASTER FINAL: chỉ khoá chiều cao, chiều rộng tự theo
   nên không bao giờ bị kéo giãn hay đổi tỉ lệ. */
.wslx-brand img{height:84px;width:auto;max-height:none;display:block}

/* Ô tìm kiếm */
/* Cao cố định 56px: ở màn 1366px ô này được phép hẹp bớt nhưng KHÔNG thấp đi. */
.wslx-search{position:relative;flex:1 1 620px;max-width:620px;min-width:240px}
.wslx-search__form{
  display:flex;align-items:center;height:56px;background:#fff;border:0;
  border-radius:28px;padding:0 6px 0 24px;box-shadow:none;
}
.wslx-search__form:focus-within{border:0;box-shadow:none}
.wslx-search__input{flex:1;border:0;background:none;font-size:15px;padding:0;color:var(--text);min-width:0;height:100%}
.wslx-search__input::placeholder{color:var(--text-3)}
.wslx-search__input:focus{outline:none}
.wslx-search__btn{width:44px;height:44px;border-radius:50%;color:var(--wine);display:grid;place-items:center;flex:none;transition:all .2s}
.wslx-search__btn:hover{background:var(--wine);color:#fff}
/* Gợi ý tức thời */
.wslx-suggest{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:var(--r);
  box-shadow:var(--sh-3);overflow:hidden;z-index:80;display:none;max-height:70vh;overflow-y:auto;
}
.wslx-suggest.is-open{display:block}
.wslx-suggest__group{padding:8px 0}
.wslx-suggest__label{padding:8px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.wslx-suggest__item{display:flex;align-items:center;gap:12px;padding:9px 16px;color:var(--text)}
.wslx-suggest__item:hover{background:var(--tint);color:var(--wine)}
.wslx-suggest__item img{width:44px;height:55px;object-fit:cover;flex:none;background:var(--ivory);border-radius:4px}
.wslx-suggest__name{font-size:13.5px;font-weight:500;line-height:1.35}
.wslx-suggest__price{font-size:13px;font-weight:700;color:var(--wine);margin-top:2px}
.wslx-suggest__empty{padding:22px 16px;text-align:center;color:var(--text-2);font-size:14px}

/* Nhóm nút bên phải */
/* margin-left:auto ghim cum nay sat mep phai khung 1440px, nen mep phai cua
   Gio hang (ke ca mui ten) trung khit voi mep phai chu LIEN HE o hang menu. */
.wslx-actions{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);flex:none;margin-left:auto}
.wslx-act{display:inline-flex;align-items:center;gap:11px;color:#fff;position:relative}
.wslx-act:hover{color:#CD9842}
.wslx-act__ico{width:34px;height:34px;display:grid;place-items:center;flex:none;color:#CD9842;transition:transform .2s}
.wslx-act:hover .wslx-act__ico{transform:translateY(-1px)}
.wslx-act__ico .wslx-ico{width:24px;height:24px;stroke-width:1.5}
.wslx-act__txt{display:flex;flex-direction:column;line-height:1.35}
.wslx-act__top{font-size:15px;font-weight:700;letter-spacing:.01em;color:#fff}
.wslx-act__sub{font-size:11.5px;color:rgba(255,255,255,.72);font-weight:400}
.wslx-act:hover .wslx-act__top{color:#CD9842}
/* Nen vang #CD9842, so mau do ruou #8B1432 theo chuan khach. */
.wslx-act__badge{
  position:absolute;top:-3px;left:20px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:#CD9842;color:#8B1432;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;
  border:2px solid #8B1432;
}
/* Tu 1180px tro xuong moi bo bot chu; trong dai 1366-1920px giu nguyen day du. */
@media(max-width:1180px){.wslx-act__sub{display:none}}
/* Dien thoai: nen do ruou phang, hamburger va kinh lup mau Ivory, nut GIA SI
   vien + chu + icon vang. Bam mockup "Giao dien trang chu mobile" 09/09/2026. */
@media(max-width:1024px){
  .wslx-header{background:#8B1432}
  .wslx-header__inner{height:64px;gap:10px}
  .wslx-hwrap{width:calc(100% - 28px)}
  .wslx-search{display:none}
  .wslx-burger{color:#FCFBF8}
  .wslx-brand{color:#FCFBF8}
  .wslx-brand img{height:40px}
  .wslx-brand__mark{width:34px;height:34px;color:#CD9842}
  .wslx-brand__name{font-size:22px;color:#FCFBF8}
  .wslx-brand__slogan{font-size:8px;letter-spacing:.16em;color:#CD9842;opacity:1}
  .wslx-act{color:#FCFBF8}
  .wslx-act__ico{color:#FCFBF8}
  .wslx-act__badge{background:#CD9842;color:#8B1432;border-color:#8B1432}
  /* Gio hang da nam o thanh duoi nen bo khoi header cho gon dung mockup. */
  .wslx-actions>[data-wslx-cart]{display:none}
  .wslx-act--boxed{padding:7px 12px;gap:7px}
  .wslx-act--boxed .wslx-act__sub{display:none}
  .wslx-act--boxed .wslx-act__ico{width:22px;height:22px}
  .wslx-act--boxed .wslx-act__ico .wslx-ico{width:19px;height:19px}
}

/* ================================================================ NAV   */
/* Hang menu cao dung 64px, mau phang #76132C, khong gradient/shadow.
   Cac muc KHONG co dem ngang: nho vay chu TRANG CHU bat dau dung mep trai
   khung va chu LIEN HE ket thuc dung mep phai khung, con khoang cach giua cac
   muc do space-between tu chia - o 1366px chi khoang cach hep lai, chu van 16px. */
.wslx-nav{background:#76132C;position:relative;z-index:55;box-shadow:none}
.wslx-nav__inner{display:flex;align-items:stretch;justify-content:space-between;gap:0;height:64px}
.wslx-nav__item{position:relative;display:flex}
.wslx-nav__link{
  display:inline-flex;align-items:center;gap:8px;height:64px;padding:0;color:#fff;background:none;
  font-family:var(--ff-body);font-size:16px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;position:relative;
  transition:color .22s var(--ease);
}
.wslx-nav__link .wslx-ico{width:18px;height:18px;opacity:1}
/* Gach chan cach chan chu khoang 9px trong hang 64px. */
.wslx-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:11px;height:2px;background:#CD9842;
  transform:scaleX(0);transition:transform .26s var(--ease);
}
.wslx-nav__item:hover>.wslx-nav__link{background:none;color:#CD9842}
.wslx-nav__item:hover>.wslx-nav__link .wslx-ico{color:#CD9842}
.wslx-nav__item:hover>.wslx-nav__link::after{transform:scaleX(1)}
/* Muc dang o trang do: chu trang, chi co gach chan vang. */
.wslx-nav__item.current-menu-item>.wslx-nav__link,
.wslx-nav__item.current_page_item>.wslx-nav__link{background:none;color:#fff}
.wslx-nav__item.current-menu-item>.wslx-nav__link::after,
.wslx-nav__item.current_page_item>.wslx-nav__link::after{transform:scaleX(1)}
.wslx-nav__home .wslx-ico{opacity:1;color:#CD9842}
.wslx-nav__hot{
  background:#CD9842;color:#5A0E20;font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;
  letter-spacing:.08em;margin-left:6px;line-height:1;
}
/* Dropdown thường */
.wslx-nav__sub{
  position:absolute;top:100%;left:0;min-width:250px;background:#fff;box-shadow:var(--sh-3);
  border-radius:0 0 var(--r) var(--r);border-top:3px solid var(--gold);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--ease);z-index:70;
}
.wslx-nav__item:hover>.wslx-nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.wslx-nav__sub a{display:block;padding:9px 20px;font-size:14px;color:var(--text)}
.wslx-nav__sub a:hover{background:var(--tint);color:var(--wine);padding-left:25px}
.wslx-nav__sub .wslx-nav__sub{top:0;left:100%;border-radius:var(--r)}

/* Mega menu */
/* Mega menu trai het be ngang man hinh, nen trang; phan noi dung dung chung
   khung 1440px voi header nen thang hang tuyet doi voi logo va menu.
   Moc dinh vi la .wslx-nav (rong bang viewport, KHONG tinh thanh cuon) chu
   khong dung 100vw - dung 100vw se du ra dung bang be rong thanh cuon. */
.wslx-mega{
  position:absolute;top:100%;left:0;right:0;background:#fff;
  box-shadow:none;border-radius:0;border-top:0;
  padding:32px 0 30px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;z-index:70;
}
.wslx-nav__item.has-mega{position:static}
.wslx-nav__item.has-mega:hover>.wslx-mega{opacity:1;visibility:visible;transform:translateY(0)}
.wslx-mega__inner{width:calc(100% - 48px);max-width:1440px;margin:0 auto;box-sizing:border-box}
.wslx-mega__cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.wslx-mega__col{min-width:0}
/* Icon vang - tieu de do - noi dung den - "Xem tat ca" do. */
.wslx-mega__title{
  display:flex;align-items:center;gap:10px;font-family:var(--ff-body);font-size:16px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:#8B1432;padding-bottom:12px;margin-bottom:10px;
  border-bottom:1px solid #ECE8E1;
}
.wslx-mega__title .wslx-ico{width:23px;height:23px;color:#CD9842;flex:none;stroke-width:1.6}
.wslx-mega__list{margin-inline:-12px}
.wslx-mega__list li{margin-bottom:1px}
.wslx-mega__list a{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:5px;
  font-size:15.5px;font-weight:450;color:#2A2A2A;white-space:nowrap;overflow:hidden;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.wslx-mega__list a:hover{background:rgba(139,20,50,.06);color:#8B1432;transform:none}
/* Co quoc gia dung anh that, moi la co cung mot khung nen ten nuoc thang hang. */
.wslx-mega__flag{
  width:26px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:3px;line-height:1;
}
.wslx-mega__flag img,.wslx-mega__flag svg{width:100%;height:100%;object-fit:cover;display:block}
.wslx-mega__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;margin-left:12px;
  font-size:15.5px;font-weight:600;color:#8B1432;transition:color .2s var(--ease);
}
.wslx-mega__more .wslx-ico{transition:transform .2s var(--ease)}
.wslx-mega__more:hover{color:#CD9842}
.wslx-mega__more:hover .wslx-ico{transform:translateX(4px)}
/* Hàng khối ảnh dưới mega */
.wslx-mega__promos{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.wslx-mega__promo{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:150px;display:flex;
  align-items:flex-end;padding:18px;color:#fff;background:var(--wine-deep);
}
.wslx-mega__promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .5s var(--ease)}
.wslx-mega__promo:hover img{transform:scale(1.06)}
.wslx-mega__promo>div{position:relative;z-index:2}
.wslx-mega__promo h4{font-family:var(--ff-display);color:#fff;font-size:18px;margin:0 0 5px}
.wslx-mega__promo p{font-size:12.5px;color:rgba(255,255,255,.8);margin:0}
/* 5 cot giu nguyen tu 1366px tro len; duoi 1025px thi ca thanh menu da an. */
@media(max-width:1024px){.wslx-nav{display:none}}

/* ================================================== Thanh điều hướng MB */
/* Nen do ruou phang, icon vang #CD9842, chu Ivory - dung mockup mobile 09/09.
   Dung grid-auto-flow nen so cot tu khop voi so muc thuc te hien ra. */
.wslx-mbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;background:#8B1432;
  border-top:0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom);
}
.wslx-mbar__inner{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.wslx-mbar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:9px 3px 8px;font-size:11px;font-weight:500;color:#FCFBF8;position:relative;
}
/* Vach ngan mo giua cac muc nhu mockup */
.wslx-mbar__item+.wslx-mbar__item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(252,251,248,.22)}
.wslx-mbar__item .wslx-ico,.wslx-mbar__item img{width:25px;height:25px;color:#CD9842;stroke-width:1.5}
.wslx-mbar__item.is-active,.wslx-mbar__item.is-active .wslx-ico{color:#CD9842}
.wslx-mbar__ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#CD9842;color:#8B1432}
.wslx-mbar__ico--zalo{font-size:9px;font-weight:800;letter-spacing:-.02em}
.wslx-mbar__ico--mess .wslx-ico{width:18px;height:18px;color:#8B1432}
.wslx-mbar__ico--wa{background:#25D366}
@media(max-width:1024px){.wslx-mbar{display:block}body{padding-bottom:60px}}

/* ================================================= Menu điện thoại kéo  */
.wslx-burger{width:40px;height:40px;display:none;place-items:center;color:#fff;flex:none}
@media(max-width:1024px){.wslx-burger{display:grid}}
/* Menu kéo điện thoại — dựng theo bộ mockup "Giao diện/menu đóng mở". */
.wslx-drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.wslx-drawer.is-open{visibility:visible;pointer-events:auto}
.wslx-drawer__mask{position:absolute;inset:0;background:rgba(20,4,9,.55);opacity:0;transition:opacity .3s var(--ease)}
.wslx-drawer.is-open .wslx-drawer__mask{opacity:1}
.wslx-drawer__panel{
  position:absolute;top:0;left:0;bottom:0;width:min(400px,84vw);background:var(--ivory);
  transform:translateX(-100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;
}
.wslx-drawer.is-open .wslx-drawer__panel{transform:none}

/* Thanh đầu đỏ rượu: nút đóng — logo — tìm kiếm + Giá sỉ */
.wslx-drawer__head{
  background:linear-gradient(180deg,#8A1330,#761026);color:#fff;
  padding:12px 12px;display:flex;align-items:center;gap:10px;flex:none;
}
.wslx-drawer__head .wslx-brand{flex:1;min-width:0;justify-content:center}
.wslx-drawer__head .wslx-brand img{max-height:46px;width:auto}
.wslx-drawer__x{
  width:42px;height:42px;flex:none;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;
  display:grid;place-items:center;color:#fff;
}
.wslx-drawer__tools{display:flex;align-items:center;gap:8px;flex:none}
.wslx-drawer__tool{
  height:42px;min-width:42px;padding:0 8px;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;color:#fff;
}
.wslx-drawer__tool--wholesale{border-color:var(--gold);color:var(--gold-soft);padding:0 10px}
.wslx-drawer__tool--wholesale span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wslx-drawer__tool--wholesale:hover{background:rgba(200,169,106,.16);color:var(--gold-soft)}

.wslx-drawer__search{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);flex:none}
.wslx-drawer__search form{display:flex;align-items:center;gap:8px;background:var(--tint);border-radius:30px;padding:6px 8px 6px 16px}
.wslx-drawer__search input{flex:1;border:0;background:none;font-size:14px;min-width:0}
.wslx-drawer__search input:focus{outline:none}
.wslx-drawer__search button{width:32px;height:32px;border-radius:50%;background:var(--wine);color:#fff;display:grid;place-items:center;flex:none}

.wslx-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---- Cây menu 3 cấp ---- */
.wslx-mnav__row{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  padding:16px 18px;font-family:var(--ff-body);color:var(--wine);
}
.wslx-mnav__label{
  flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.35;
}
.wslx-mnav__ico{flex:none;width:30px;display:grid;place-items:center;color:var(--wine)}
.wslx-mnav__ico .wslx-ico{stroke-width:1.4}
.wslx-mnav__caret{flex:none;display:grid;place-items:center;color:var(--wine);transition:transform .25s var(--ease)}
.wslx-mnav__row[aria-expanded="true"] .wslx-mnav__caret{transform:rotate(180deg)}
.wslx-mnav__thumb{
  flex:none;width:34px;height:26px;display:grid;place-items:center;color:var(--wine);overflow:hidden;
}
.wslx-mnav__thumb .wslx-flag{width:30px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(42,42,42,.12)}

/* Cấp 1: có đường kẻ ngăn cách chạy hết bề ngang */
.wslx-mnav>.wslx-mnav__item{border-bottom:1px solid var(--line)}
.wslx-mnav>.wslx-mnav__item>.wslx-mnav__row--lv1{background:var(--ivory)}

/* Cấp 2: thụt vào, kẻ ngăn cách ngắn hơn */
.wslx-mnav__sub{background:var(--ivory)}
.wslx-mnav__sub>ul>li+li>.wslx-mnav__row,
.wslx-mnav__sub>ul>li+li>.wslx-mnav__sub{border-top:1px solid var(--line-soft)}
.wslx-mnav__row--lv2{padding:15px 18px 15px 34px;font-size:14.5px}
.wslx-mnav__row--lv2 .wslx-mnav__label{font-size:14.5px;font-weight:600}

/* Cấp 3: chữ đậm thường màu mực, không viết hoa màu rượu */
.wslx-mnav__sub .wslx-mnav__sub{background:var(--surface)}
.wslx-mnav__sub .wslx-mnav__sub>ul>li+li>.wslx-mnav__row{border-top:1px solid var(--line-soft)}
.wslx-mnav__row--lv3{padding:13px 18px 13px 34px;color:var(--text)}
.wslx-mnav__row--lv3 .wslx-mnav__label{font-size:13.5px;font-weight:500;color:var(--text)}
.wslx-mnav__row--lv2.is-link{color:var(--text)}
.wslx-mnav__row--lv2.is-link .wslx-mnav__label{font-weight:500;color:var(--text)}

.wslx-mnav__row:active{background:var(--tint)}

/* Nút "Xem tất cả rượu vang" cuối nhóm lớn */
.wslx-mnav__cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 18px 18px 34px;padding:15px 18px;background:var(--wine);color:#fff;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.wslx-mnav__cta:hover{background:var(--wine-dark);color:#fff}

.wslx-drawer__foot{padding:16px;border-top:1px solid var(--line);background:var(--surface)}
.wslx-drawer__foot a{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px}
.wslx-drawer__foot .wslx-ico{color:var(--wine)}

/* ============================================================ Breadcrumb */
.wslx-crumb{background:var(--surface);border-bottom:1px solid var(--line-soft)}
.wslx-crumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:12px 0;font-size:13px;color:var(--text-2)}
.wslx-crumb__list a{color:var(--text-2);display:inline-flex;align-items:center;gap:6px}
.wslx-crumb__list a:hover{color:var(--wine)}
.wslx-crumb__sep{color:var(--line);display:inline-grid;place-items:center}
.wslx-crumb__sep .wslx-ico{width:13px;height:13px}
.wslx-crumb__cur{color:var(--wine);font-weight:600}
.wslx-crumb .wslx-ico{width:15px;height:15px}
/* Breadcrumb đặt trên nền ảnh */
.wslx-crumb--over{background:transparent;border:0;position:relative;z-index:3}
.wslx-crumb--over .wslx-crumb__list{color:rgba(255,255,255,.8)}
.wslx-crumb--over a{color:rgba(255,255,255,.8)}
.wslx-crumb--over a:hover{color:#fff}
.wslx-crumb--over .wslx-crumb__cur{color:#fff}

/* ================================================ Dải cam kết (USP bar) */
.wslx-usp{background:var(--surface);border-block:1px solid var(--line-soft)}
.wslx-usp__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.wslx-usp--6 .wslx-usp__list{grid-template-columns:repeat(6,minmax(0,1fr))}
.wslx-usp__item{display:flex;align-items:center;gap:5px;padding:20px 16px;position:relative}
.wslx-usp__item+.wslx-usp__item::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line)}
.wslx-usp__ico{width:60px;height:60px;display:grid;place-items:center;flex:none;color:var(--gold-dim)}
.wslx-usp__ico .wslx-ico{width:50px;height:50px;stroke-width:1.4}
.wslx-usp__t{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;line-height:1.25}
.wslx-usp__d{font-size:11.5px;color:var(--text-2);line-height:1.45}
@media(max-width:1280px){.wslx-usp--6 .wslx-usp__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Biến thể đặt trong khung bo góc */
.wslx-usp--card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-block:8px}
@media(max-width:1024px){.wslx-usp__list{grid-template-columns:repeat(2,minmax(0,1fr))}.wslx-usp__item+.wslx-usp__item::before{display:none}.wslx-usp__item{border-bottom:1px solid var(--line-soft)}}
@media(max-width:520px){.wslx-usp__list{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ HERO  */
.wslx-hero{position:relative;background:var(--wine-night);overflow:hidden}
.wslx-hero__slide{position:relative;min-height:clamp(380px,44vw,560px);display:flex;align-items:center}
.wslx-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wslx-hero__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,4,10,.9) 0%,rgba(40,6,14,.72) 42%,rgba(40,6,14,.15) 72%,transparent 100%)}
.wslx-hero__inner{position:relative;z-index:3;width:100%}
.wslx-hero__box{max-width:590px;color:#fff;padding:40px 0}
.wslx-hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;
}
.wslx-hero__eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)}
.wslx-hero__title{
  font-size:clamp(34px,4.6vw,60px);line-height:1.3;color:#fff;margin:0 0 16px;letter-spacing:.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.wslx-hero__title em{font-style:normal;color:var(--gold-soft);display:block}
.wslx-hero__desc{font-size:clamp(14px,1.2vw,16.5px);color:rgba(255,255,255,.86);max-width:470px;margin:0 0 26px}
.wslx-hero__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wslx-hero__pills{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}
.wslx-hero__pill{display:flex;align-items:flex-start;gap:11px;max-width:190px}
.wslx-hero__pill .wslx-ico{width:26px;height:26px;color:var(--gold);flex:none;margin-top:2px}
.wslx-hero__pill b{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:3px}
.wslx-hero__pill span{font-size:11.5px;color:rgba(255,255,255,.66);line-height:1.45}
/* Điều hướng slider */
.wslx-slider{position:relative}
.wslx-slider__track{display:flex;transition:transform .6s var(--ease)}
.wslx-slider__track>*{flex:0 0 100%;width:100%;max-width:100%;min-width:0}
.wslx-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);
  color:#fff;display:grid;place-items:center;z-index:6;transition:all .25s var(--ease);
}
.wslx-nav-btn:hover{background:#fff;color:var(--wine);border-color:#fff}
.wslx-nav-btn--prev{left:16px}
.wslx-nav-btn--next{right:16px}
.wslx-nav-btn--dark{background:#fff;border-color:var(--line);color:var(--text-2);box-shadow:var(--sh-2)}
.wslx-nav-btn--dark:hover{background:var(--wine);color:#fff;border-color:var(--wine)}
.wslx-dots{display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;bottom:20px;left:0;right:0;z-index:6}
.wslx-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .25s}
.wslx-dots button.is-active{width:26px;border-radius:5px;background:var(--gold)}
.wslx-dots--dark button{background:var(--line)}
.wslx-dots--dark button.is-active{background:var(--wine)}
.wslx-dots--static{position:static;margin-top:22px}
@media(max-width:640px){.wslx-nav-btn{width:36px;height:36px}.wslx-hero__pills{gap:16px}.wslx-hero__pill{max-width:140px}}

/* =========================================== Danh mục nổi bật (tròn)    */
.wslx-catcircle{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.wslx-catcircle__item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.wslx-catcircle__ring{
  width:clamp(72px,8vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;
  border:2px solid var(--line);background:var(--ivory);transition:all .3s var(--ease);
}
.wslx-catcircle__item:hover .wslx-catcircle__ring{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 10px 24px rgba(139,20,50,.16)}
.wslx-catcircle__ring img{width:100%;height:100%;object-fit:cover}
.wslx-catcircle__name{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;line-height:1.35}
.wslx-catcircle__item:hover .wslx-catcircle__name{color:var(--wine)}
@media(max-width:1024px){.wslx-catcircle{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.wslx-catcircle{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}

/* ================================== Thẻ danh mục lớn (ảnh + huy hiệu)   */
.wslx-cattile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.wslx-cattile__item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);transition:all .3s var(--ease);display:flex;flex-direction:column;
}
.wslx-cattile__item:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--gold)}
.wslx-cattile__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ivory)}
.wslx-cattile__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wslx-cattile__item:hover .wslx-cattile__media img{transform:scale(1.06)}
.wslx-cattile__badge{
  position:absolute;left:16px;bottom:-20px;width:44px;height:44px;border-radius:50%;
  background:var(--wine);color:var(--gold-soft);display:grid;place-items:center;border:3px solid #fff;
  box-shadow:var(--sh-2);
}
.wslx-cattile__body{padding:30px 16px 16px;flex:1;display:flex;flex-direction:column}
.wslx-cattile__name{font-family:var(--ff-display);font-size:19px;font-weight:700;margin:0 0 6px}
.wslx-cattile__meta{font-size:12.5px;color:var(--text-2);line-height:1.7;flex:1}
.wslx-cattile__go{
  align-self:flex-end;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#3A1A00;
  display:grid;place-items:center;transition:all .25s var(--ease);
}
.wslx-cattile__item:hover .wslx-cattile__go{background:var(--wine);color:#fff}
.wslx-cattile__flags{position:absolute;right:12px;bottom:12px;display:flex;gap:3px;font-size:16px;background:rgba(255,255,255,.9);padding:4px 8px;border-radius:20px}
@media(max-width:1024px){.wslx-cattile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wslx-cattile{grid-template-columns:minmax(0,1fr)}}

/* ======================================= Thẻ quốc gia / vùng trồng      */
.wslx-origin{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.wslx-origin__item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  text-align:center;transition:all .3s var(--ease);box-shadow:var(--sh-1);display:flex;flex-direction:column;
}
.wslx-origin__item:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--gold)}
.wslx-origin__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(170deg,#FFFFFF,var(--ivory))}
.wslx-origin__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wslx-origin__item:hover .wslx-origin__media img{transform:scale(1.07)}
.wslx-origin__flag{
  position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;
  background:#fff;border:3px solid #fff;box-shadow:var(--sh-2);display:grid;place-items:center;font-size:26px;line-height:1;
}
.wslx-origin__body{padding:36px 14px 18px;flex:1;display:flex;flex-direction:column}
.wslx-origin__name{font-family:var(--ff-display);font-size:22px;font-weight:700;margin:0 0 2px;letter-spacing:.02em}
.wslx-origin__en{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.wslx-origin__desc{font-size:12.5px;color:var(--text-2);line-height:1.6;margin-bottom:14px;flex:1}
.wslx-origin__stats{display:flex;justify-content:center;gap:18px;margin-bottom:14px;font-size:12px}
.wslx-origin__stat{display:flex;align-items:center;gap:6px;color:var(--text-2)}
.wslx-origin__stat .wslx-ico{width:16px;height:16px;color:var(--gold)}
.wslx-origin__stat b{color:var(--text);font-weight:700}
@media(max-width:1024px){.wslx-origin{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.wslx-origin{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ======================================================= Dải số liệu    */
.wslx-stats{background:linear-gradient(100deg,var(--tint),var(--ivory));border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 20px;position:relative;overflow:hidden}
.wslx-stats__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative;z-index:2}
.wslx-stats__item{display:flex;align-items:flex-start;gap:14px}
.wslx-stats__ico{width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--gold-dim)}
.wslx-stats__ico .wslx-ico{width:36px;height:36px;stroke-width:1.2}
.wslx-stats__num{font-family:var(--ff-display);font-size:27px;font-weight:700;color:var(--wine);line-height:1.1}
.wslx-stats__lab{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:3px 0 3px}
.wslx-stats__sub{font-size:11.5px;color:var(--text-2);line-height:1.5}
@media(max-width:900px){.wslx-stats__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wslx-stats__list{grid-template-columns:minmax(0,1fr)}}

/* ======================================================= Bộ lọc chip    */
.wslx-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.wslx-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:30px;
  border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--text-2);
  transition:all .25s var(--ease);
}
.wslx-chip .wslx-ico{width:16px;height:16px}
.wslx-chip:hover{border-color:var(--gold);color:var(--wine)}
.wslx-chip.is-active{background:var(--wine);border-color:var(--wine);color:#fff}
.wslx-chip.is-active .wslx-ico{color:var(--gold-soft)}
.wslx-chips--left{justify-content:flex-start}
.wslx-chips--scroll{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:4px}
.wslx-chips--scroll::-webkit-scrollbar{display:none}
.wslx-chips--scroll .wslx-chip{flex:none}

/* ================================================ Khối CTA 4 ô ở home   */
.wslx-promo4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wslx-promo4__item{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:140px;display:flex;
  align-items:center;padding:20px 18px;color:#fff;background:var(--wine-night);
}
/* Ảnh nằm nửa phải, chữ đọc rõ ở nửa trái. */
.wslx-promo4__item img{
  position:absolute;top:0;right:0;bottom:0;width:58%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.wslx-promo4__item:hover img{transform:scale(1.06)}
.wslx-promo4__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(30,4,10,.96) 34%,rgba(30,4,10,.72) 58%,rgba(30,4,10,.3) 100%);
}
.wslx-promo4__body{position:relative;z-index:2;max-width:64%}
.wslx-promo4__t{
  font-family:var(--ff-body);font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 6px;line-height:1.3;
}
.wslx-promo4__d{font-size:12px;color:rgba(255,255,255,.8);margin:0 0 12px;line-height:1.5}
.wslx-promo4__go{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:var(--r-sm);padding:7px 13px;
  text-transform:uppercase;letter-spacing:.05em;transition:all .25s var(--ease);
}
.wslx-promo4__item:hover .wslx-promo4__go{background:#fff;color:var(--wine);border-color:#fff}
.wslx-promo4__tag{
  position:absolute;top:12px;right:12px;z-index:3;background:var(--gold);color:#3A1A00;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:4px;
}
@media(max-width:900px){.wslx-promo4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wslx-promo4{grid-template-columns:minmax(0,1fr)}}

/* ================================================= Dải thương hiệu      */
.wslx-brands{background:var(--surface);border-block:1px solid var(--line-soft);padding:26px 0}
.wslx-brands__inner{display:flex;align-items:center;gap:26px}
.wslx-brands__lead{flex:none;max-width:200px}
.wslx-brands__lead b{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--wine)}
.wslx-brands__lead span{font-size:12px;color:var(--text-2)}
.wslx-brands__track{flex:1;display:flex;align-items:center;gap:34px;overflow:hidden;min-width:0}
.wslx-brands__item{
  flex:none;height:44px;display:grid;place-items:center;filter:grayscale(1);opacity:.55;
  transition:all .3s var(--ease);font-family:var(--ff-display);font-size:17px;letter-spacing:.08em;color:var(--text-2);
}
.wslx-brands__item:hover{filter:none;opacity:1;color:var(--wine)}
.wslx-brands__item img{max-height:44px;width:auto;object-fit:contain}
@media(max-width:768px){.wslx-brands__lead{display:none}}

/* ============================================================== Tin tức */
.wslx-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wslx-post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:all .3s var(--ease);display:flex;flex-direction:column}
.wslx-post:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.wslx-post__media{aspect-ratio:16/9;overflow:hidden;background:var(--ivory)}
.wslx-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wslx-post:hover .wslx-post__media img{transform:scale(1.06)}
.wslx-post__body{padding:18px;flex:1;display:flex;flex-direction:column}
.wslx-post__cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:8px}
.wslx-post__title{font-family:var(--ff-display);font-size:18px;line-height:1.35;margin:0 0 9px}
.wslx-post__title a:hover{color:var(--wine)}
.wslx-post__ex{font-size:13.5px;color:var(--text-2);line-height:1.6;flex:1;margin:0 0 12px}
.wslx-post__meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text-3);padding-top:12px;border-top:1px solid var(--line-soft)}
.wslx-post__meta span{display:inline-flex;align-items:center;gap:5px}
.wslx-post__meta .wslx-ico{width:14px;height:14px}
@media(max-width:900px){.wslx-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wslx-posts{grid-template-columns:minmax(0,1fr)}}

/* ===================================================== Nội dung bài viết */
.wslx-article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3.4vw,44px)}
.wslx-entry{font-size:15.5px;line-height:1.85;color:#2A2A2A}
.wslx-entry>*:first-child{margin-top:0}
.wslx-entry h2,.wslx-entry h3,.wslx-entry h4{margin:1.6em 0 .6em;color:var(--wine-dark)}
.wslx-entry h2{font-size:26px}
.wslx-entry h3{font-size:21px}
.wslx-entry h4{font-size:18px;font-family:var(--ff-body);font-weight:700}
.wslx-entry img{border-radius:var(--r);margin:18px auto;height:auto}
.wslx-entry a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.wslx-entry ul,.wslx-entry ol{margin:0 0 1.1em;padding-left:22px}
.wslx-entry ul{list-style:none;padding-left:0}
.wslx-entry ul li{position:relative;padding-left:24px;margin-bottom:7px}
.wslx-entry ul li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.wslx-entry ol{list-style:decimal}
.wslx-entry ol li{margin-bottom:7px}
.wslx-entry blockquote{
  margin:22px 0;padding:16px 22px;border-left:3px solid var(--gold);background:var(--tint);
  border-radius:0 var(--r) var(--r) 0;font-style:italic;color:var(--text-2);
}
.wslx-entry blockquote p:last-child{margin:0}
.wslx-entry table{margin:18px 0;font-size:14px;border:1px solid var(--line)}
.wslx-entry th,.wslx-entry td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.wslx-entry th{background:var(--tint);font-weight:700}
.wslx-entry iframe{max-width:100%;border-radius:var(--r);aspect-ratio:16/9;height:auto;width:100%}
.wslx-entry figure{margin:18px 0}
.wslx-entry figcaption{font-size:13px;color:var(--text-3);text-align:center;margin-top:7px}
/* Bảng cuộn ngang trên điện thoại */
.wslx-entry .wslx-tablewrap{overflow-x:auto;margin:18px 0}

.wslx-page-hero{background:linear-gradient(120deg,var(--wine-deep),var(--wine-dark));color:#fff;padding:clamp(28px,4vw,52px) 0;position:relative;overflow:hidden}
.wslx-page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 80% 0%,rgba(200,155,60,.22),transparent)}
.wslx-page-hero__inner{position:relative;z-index:2}
.wslx-page-hero h1{color:#fff;margin:0 0 8px}
.wslx-page-hero p{color:rgba(255,255,255,.8);max-width:680px;margin:0}

/* ============================================================ Phân trang */
.wslx-pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:34px;flex-wrap:wrap}
.wslx-pager a,.wslx-pager span{
  min-width:40px;height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);display:inline-grid;place-items:center;font-size:14px;font-weight:600;color:var(--text-2);
  transition:all .2s var(--ease);
}
.wslx-pager a:hover{border-color:var(--wine);color:var(--wine)}
.wslx-pager .current{background:var(--wine);border-color:var(--wine);color:#fff}
.wslx-pager .dots{border:0;background:none}

/* =============================================================== Form    */
.wslx-field{margin-bottom:16px}
.wslx-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.wslx-label .req{color:var(--wine)}
.wslx-input,.wslx-select,.wslx-textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:14px;transition:border-color .2s,box-shadow .2s;
}
.wslx-input:focus,.wslx-select:focus,.wslx-textarea:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(139,20,50,.1)}
.wslx-textarea{min-height:120px;resize:vertical}
.wslx-note{font-size:12.5px;color:var(--text-3);margin-top:5px}

/* ============================================================== FOOTER   */
.wslx-footer{background:var(--wine-night);color:rgba(255,255,255,.72);margin-top:clamp(40px,5vw,70px)}
.wslx-footer a{color:rgba(255,255,255,.72)}
.wslx-footer a:hover{color:var(--gold-soft)}
.wslx-footer__top{padding:44px 0 34px;border-bottom:1px solid rgba(255,255,255,.1)}
.wslx-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:34px}
.wslx-footer__brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:16px}
.wslx-footer__brand .wslx-brand__name{font-size:26px}
.wslx-footer__desc{font-size:13.5px;line-height:1.75;margin-bottom:16px}
.wslx-footer__title{
  font-family:var(--ff-body);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;padding-bottom:9px;position:relative;
}
.wslx-footer__title::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--gold)}
.wslx-footer__list li{margin-bottom:9px;font-size:13.5px}
.wslx-footer__contact li{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:13.5px;line-height:1.6}
.wslx-footer__contact .wslx-ico{width:17px;height:17px;color:var(--gold);flex:none;margin-top:3px}
.wslx-footer__contact b{color:#fff;font-weight:600}
.wslx-social{display:flex;gap:9px;margin-top:16px}
.wslx-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;
  transition:all .25s var(--ease);
}
.wslx-social a:hover{background:var(--gold);color:#3A1A00}
.wslx-footer__pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.wslx-footer__pay span{
  padding:5px 11px;border-radius:5px;background:rgba(255,255,255,.94);color:#2A2A2A;font-size:11px;font-weight:700;letter-spacing:.03em;
}
.wslx-footer__bot{padding:16px 0;font-size:12.5px}
.wslx-footer__bot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wslx-footer__credit{color:rgba(255,255,255,.5)}
.wslx-footer__credit a{color:var(--gold-soft);font-weight:600}
@media(max-width:1024px){.wslx-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media(max-width:560px){.wslx-footer__cols{grid-template-columns:minmax(0,1fr)}}

/* ======================================================== Nút nổi (CTA) */
.wslx-float{position:fixed;right:16px;bottom:80px;z-index:110;display:flex;flex-direction:column;gap:10px}
@media(min-width:1025px){.wslx-float{bottom:24px}}
.wslx-float__btn{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.22);position:relative;transition:transform .25s var(--ease);
}
.wslx-float__btn:hover{transform:scale(1.08);color:#fff}
.wslx-float__btn--phone{background:var(--wine)}
.wslx-float__btn--zalo{background:#0068FF;font-size:12px;font-weight:800;letter-spacing:-.02em}
.wslx-float__btn--mess{background:linear-gradient(45deg,#0695FF,#A334FA)}
.wslx-float__btn--top{background:rgba(26,10,15,.6);opacity:0;pointer-events:none}
.wslx-float__btn--top.is-on{opacity:1;pointer-events:auto}
.wslx-float__btn::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:.35;
  animation:wslxPulse 2s infinite;
}
.wslx-float__btn--top::after{display:none}
@keyframes wslxPulse{0%{transform:scale(.9);opacity:.5}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media(max-width:1024px){.wslx-float{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================= 404 & lỗi */
.wslx-404{text-align:center;padding:clamp(44px,7vw,90px) 0}
.wslx-404__code{font-family:var(--ff-display);font-size:clamp(80px,14vw,170px);line-height:1;color:var(--wine);opacity:.16;margin:0}
.wslx-404__title{margin:-.35em 0 12px}
.wslx-404__desc{max-width:520px;margin:0 auto 26px;color:var(--text-2)}
.wslx-404__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.wslx-404__links{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}

/* ==================================================== Bài viết chi tiết  */
.wslx-single-post{max-width:900px;margin-inline:auto}
.wslx-article__head{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.wslx-article__head h1{margin:8px 0 12px}
.wslx-article__head .wslx-post__meta{border:0;padding:0}
.wslx-article__cover{margin:0 0 24px;border-radius:var(--r-lg);overflow:hidden}
.wslx-article__cover img{width:100%;height:auto}

/* Bản đồ nhúng */
.wslx-map{margin-top:24px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);line-height:0}
.wslx-map iframe{width:100%;min-height:380px;border:0;display:block}

/* Ô tìm kiếm mở ra trên điện thoại */
.wslx-mobile-search{background:var(--wine-deep);padding:10px 0 14px}
.wslx-mobile-search .wslx-search__form{box-shadow:none}

/* Widget cột bên trang tin */
.wslx-widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.wslx-widget__title{font-family:var(--ff-body);font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--wine);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.wslx-widget ul li{padding:7px 0;border-bottom:1px dashed var(--line-soft);font-size:13.5px}
.wslx-widget ul li:last-child{border-bottom:0}

/* Slide chỉ có ảnh (banner đã thiết kế sẵn chữ) */
.wslx-hero__slide--image{min-height:0;display:block;background:var(--wine-night)}
.wslx-hero__slide--image a{display:block;line-height:0}
.wslx-hero__slide--image img{width:100%;height:auto;object-fit:cover}
/* Banner thiết kế sẵn hiển thị trọn vẹn; dùng ô "Ảnh riêng cho điện thoại"
   trong trang Banner nếu muốn bản dọc cho màn hình nhỏ. */
@media(max-width:640px){.wslx-hero__slide--image img{height:auto}}

/* Khuyến cáo pháp lý ở chân trang */
.wslx-footer__legal{background:rgba(0,0,0,.24);border-top:1px solid rgba(255,255,255,.08)}
.wslx-footer__legal .wslx-wrap{display:flex;align-items:flex-start;gap:12px;padding-block:14px}
.wslx-footer__legal .wslx-ico{color:var(--gold);flex:none;margin-top:2px}
.wslx-footer__legal p{margin:0;font-size:12px;line-height:1.7;color:rgba(255,255,255,.62)}

/* Giỏ hàng rỗng: ẩn số 0 cho gọn */
.wslx-act__badge.is-empty{display:none}

/* ------------------------------------------------ Chống tràn ngang mobile */
.wslx-usp__item{min-width:0}
.wslx-usp__item>div{min-width:0}
@media(max-width:820px){
  .wslx-usp--6 .wslx-usp__list,.wslx-usp__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wslx-usp__item{padding:14px 12px}
  .wslx-usp__ico{width:34px;height:34px}
  .wslx-usp__ico .wslx-ico{width:22px;height:22px}
}
@media(max-width:420px){
  .wslx-usp--6 .wslx-usp__list,.wslx-usp__list{grid-template-columns:minmax(0,1fr)}
}
/* Không để bất kỳ khối nào đẩy rộng hơn màn hình.
   Lưu ý: KHÔNG đặt .wslx-wrap ở đây vì sẽ ghi đè bề rộng container 1450px. */
.wslx-section,.wslx-main{max-width:100%}
.wslx-wrap{max-width:var(--wrap)}
.wslx-stats__item,.wslx-hero__box,.wslx-card,.wslx-post{min-width:0}

/* ==========================================================================
   NÂNG CẤP TRANG CHỦ THEO MOCKUP ĐÃ DUYỆT (home.jpg, mockup 02/05/06/07)
   ========================================================================== */

/* Nền dịu cho các khối xen kẽ */
.wslx-section--soft{background:var(--surface);border-block:1px solid var(--line)}
.wslx-center{text-align:center;margin-top:28px}

/* Tiêu đề mục kiểu serif có hoa văn hai bên */
.wslx-head__title--display{
  font-family:var(--ff-display);font-size:clamp(27px,3.3vw,42px);letter-spacing:.02em;
  text-transform:uppercase;position:relative;display:inline-block;padding:0 18px;
}
.wslx-head__title--display::before,.wslx-head__title--display::after{
  content:"";position:absolute;top:54%;width:clamp(40px,7vw,110px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.wslx-head__title--display::before{right:100%}
.wslx-head__title--display::after{left:100%;background:linear-gradient(270deg,transparent,var(--gold))}
.wslx-head__sub b{color:var(--wine);font-weight:700}
@media(max-width:640px){
  .wslx-head__title--display::before,.wslx-head__title--display::after{display:none}
}

/* Nút bo tròn dùng ở tab và thẻ quốc gia */
.wslx-btn--pill{border-radius:30px}

/* Cờ quốc gia: dùng ảnh SVG vì Windows không có phông cờ emoji */
.wslx-flag{
  display:inline-block;vertical-align:middle;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(26,10,15,.12);
}
.wslx-origin__flag{overflow:hidden}
.wslx-origin__flag .wslx-flag{width:34px;height:auto;border-radius:3px}
.wslx-mega__flag{display:inline-flex;align-items:center;line-height:1}
.wslx-cattile__flags i{display:inline-flex;align-items:center}
.wslx-card__flag{display:inline-flex;align-items:center;line-height:1}
.wslx-cathero__flag .wslx-flag{width:44px;height:auto;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.3)}

/* Huy hiệu tròn trên hero */
.wslx-hero__inner .wslx-wrap{position:relative}
.wslx-hero__seal{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);width:190px;text-align:center;color:#fff;z-index:4;
}
.wslx-hero__seal-ring{
  width:74px;height:74px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--gold);color:var(--gold-soft);background:rgba(30,4,10,.35);
  box-shadow:0 0 0 6px rgba(200,155,60,.12);
}
.wslx-hero__seal b{
  display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;
}
.wslx-hero__seal span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-soft)}
@media(max-width:1180px){.wslx-hero__seal{display:none}}

/* Hero: chữ hoa theo mockup, không tràn khung */
.wslx-hero__title{text-transform:uppercase;font-size:clamp(30px,3.8vw,52px);word-break:break-word}
.wslx-hero__box{max-width:min(620px,54%)}
@media(max-width:1180px){.wslx-hero__box{max-width:640px}}

/* ---------------------------------------- Thanh tab + nút xem tất cả */
.wslx-tabbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.wslx-tabbar .wslx-chips{margin-bottom:0}
.wslx-chip{padding:10px 20px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.wslx-chip .wslx-ico{color:var(--gold-dim)}
.wslx-chip.is-active .wslx-ico{color:var(--gold-soft)}

/* -------------------------------------------- Ô danh mục nổi bật (8 ô) */
.wslx-cattile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.wslx-cattile__item{display:flex;flex-direction:column;background:var(--surface)}
.wslx-cattile__media{
  display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(170deg,#FFFFFF,var(--ivory));
}
/* Ảnh danh mục hiện trọn vẹn: ảnh chai không bị cắt mất cổ chai, ảnh banner ngang vẫn phủ kín. */
.wslx-cattile__media img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.wslx-cattile__item:hover .wslx-cattile__media img{transform:scale(1.06)}
.wslx-cattile__body{padding:30px 18px 18px;flex:1;display:flex;flex-direction:column;gap:4px;position:relative}
.wslx-cattile__name{
  font-family:var(--ff-body);font-size:16px;font-weight:800;color:var(--wine);letter-spacing:.04em;
  text-transform:uppercase;line-height:1.35;
}
.wslx-cattile__meta{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--text-2);flex:1}
.wslx-cattile__go{
  position:absolute;right:16px;bottom:16px;width:36px;height:36px;border-radius:50%;
  background:var(--gold);color:#3A1A00;display:grid;place-items:center;transition:all .25s var(--ease);
}
.wslx-cattile__item:hover .wslx-cattile__go{background:var(--wine);color:#fff}
.wslx-cattile__flags{
  position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.92);padding:4px 9px;border-radius:20px;font-size:15px;line-height:1;
}
.wslx-cattile__flags b{font-size:10px;color:var(--text-2);font-weight:700}
.wslx-cattile__item.is-small .wslx-cattile__media{aspect-ratio:4/5}
.wslx-cattile__item.is-small .wslx-cattile__name{font-size:15px}
.wslx-cattile__item.is-small .wslx-cattile__go{width:30px;height:30px;background:rgba(200,155,60,.18);color:var(--gold-dim)}
@media(max-width:1100px){.wslx-cattile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wslx-cattile{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------- Liên kết nhanh 4 ô */
.wslx-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wslx-quick__item{
  display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:all .25s var(--ease);
}
.wslx-quick__item:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-2)}
.wslx-quick__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--gold-dim)}
.wslx-quick__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.wslx-quick__txt b{font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--wine-dark)}
.wslx-quick__txt span{font-size:12.5px;color:var(--text-2)}
.wslx-quick__go{
  width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--gold-dim);transition:all .25s var(--ease);
}
.wslx-quick__item:hover .wslx-quick__go{background:var(--gold);border-color:var(--gold);color:#3A1A00}
@media(max-width:1024px){.wslx-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wslx-quick{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------- Thẻ quốc gia (xuất xứ) */
.wslx-origin__en{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.wslx-origin__count{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 14px;font-size:13px;
  color:var(--gold-dim);font-weight:600;
}
.wslx-origin__count .wslx-ico{width:15px;height:15px}
.wslx-origin__count b{color:var(--gold-dim);font-weight:800}
.wslx-origin__count span{color:var(--text-2);font-weight:500}
.wslx-origin__body .wslx-btn{align-self:center}

/* Dải số liệu: nới khoảng cách khi đứng dưới thẻ quốc gia */
.wslx-stats{margin-top:26px}

/* ----------------------------------------------- Ô CTA có huy hiệu % */
.wslx-promo4__off{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:3;width:86px;height:86px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  color:var(--gold-soft);border:1px solid rgba(227,199,126,.5);background:rgba(30,4,10,.45);
}
.wslx-promo4__off small{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.wslx-promo4__off b{font-size:25px;font-weight:800;margin:3px 0}
.wslx-promo4__item.has-off .wslx-promo4__body{max-width:56%}

/* --------------------------------------------------- Dải thương hiệu  */
.wslx-brands__track{scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}
.wslx-brands__track::-webkit-scrollbar{display:none}
.wslx-nav-btn--inline{position:static;transform:none;flex:none;width:38px;height:38px}
@media(max-width:768px){.wslx-nav-btn--inline{display:none}}

/* -------------------------------------------- Dải cam kết trong khung */
.wslx-usp__list--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.wslx-usp--card .wslx-usp__item{padding:20px 18px}
.wslx-usp__ico--gold{color:var(--gold)}
.wslx-usp__t--gold{color:var(--gold-dim)}
@media(max-width:1100px){.wslx-usp__list--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.wslx-usp__list--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.wslx-usp__list--5{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   DỄ ĐỌC: chữ serif chỉ dùng cho tiêu đề lớn; tên thẻ và mọi con số
   chuyển sang Be Vietnam Pro cho rõ nét.
   ========================================================================== */
.wslx-stats__num,
.wslx-origin__name,
.wslx-post__title,
.wslx-giftcard__title,
.wslx-card__pts b,
.wslx-brands__item,
.wslx-callbox b,
.wslx-summary__row.total b,
.wslx-pinfo__price .now,
.wslx-pinfo__price .ask{
  font-family:var(--ff-body);letter-spacing:0;
}
.wslx-stats__num{font-size:26px;font-weight:800;letter-spacing:-.01em}
.wslx-origin__name{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--wine)}
.wslx-post__title{font-size:17px;font-weight:700;line-height:1.45}
.wslx-giftcard__title{font-size:21px;font-weight:800;line-height:1.3}
.wslx-brands__item{font-size:15px;font-weight:700;letter-spacing:.06em}
.wslx-callbox b{font-size:21px;font-weight:800}
.wslx-summary__row.total b{font-size:20px;font-weight:800}
.wslx-pinfo__price .now{font-weight:800;letter-spacing:-.01em}
.wslx-pinfo__price .ask{font-size:24px;font-weight:800}

/* ==========================================================================
   CHÂN TRANG BẢN NÂNG CẤP
   ========================================================================== */

/* Dải mời tư vấn ngay trên chân trang */
.wslx-cta-band{
  background:linear-gradient(115deg,var(--wine-deep) 0%,var(--wine) 55%,var(--wine-dark) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.wslx-cta-band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 220px at 88% 10%,rgba(200,155,60,.28),transparent 70%);
}
.wslx-cta-band__inner{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding:clamp(26px,3.4vw,42px) 16px;
}
.wslx-cta-band__eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px;
}
.wslx-cta-band__eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.wslx-cta-band h2{color:#fff;margin:0 0 6px;font-size:clamp(22px,2.4vw,32px)}
.wslx-cta-band p{margin:0;color:rgba(255,255,255,.82);font-size:14.5px;max-width:620px}
.wslx-cta-band__act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Lưới cột chân trang */
.wslx-footer__cols{grid-template-columns:1.55fr .9fr 1fr 1fr 1.25fr;gap:30px}
.wslx-footer__col{min-width:0}
.wslx-footer__col--brand .wslx-brand__name{color:#fff}
.wslx-footer__col--brand .wslx-brand__slogan{color:var(--gold-soft);opacity:1}
.wslx-footer__col--brand .wslx-brand__mark{color:var(--gold)}
.wslx-footer__badges{margin:14px 0 4px;display:flex;flex-direction:column;gap:9px}
.wslx-footer__badges li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5}
.wslx-footer__badges .wslx-ico{color:var(--gold);flex:none;margin-top:2px}
.wslx-footer__list li a{display:flex;align-items:center;gap:6px}
.wslx-footer__list li a::before{
  content:"";width:5px;height:5px;border-radius:50%;background:rgba(200,155,60,.55);flex:none;transition:all .2s;
}
.wslx-footer__list li a:hover::before{background:var(--gold);transform:scale(1.3)}
.wslx-footer__list li a i{font-style:normal;color:rgba(255,255,255,.4);font-size:12px}
.wslx-footer__paytitle{
  margin:18px 0 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.wslx-footer__pay span{
  background:rgba(255,255,255,.94);color:#33323A;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  padding:6px 10px;border-radius:5px;
}
.wslx-social a{font-weight:800;font-size:14px;color:#fff}
.wslx-social a:hover{color:#3A1A00}
.wslx-social--facebook:hover{background:#1877F2!important;color:#fff!important}
.wslx-social--youtube:hover{background:#FF0000!important;color:#fff!important}
.wslx-social--tiktok:hover{background:#000!important;color:#fff!important}
.wslx-social--instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)!important;color:#fff!important}
.wslx-footer__bot-inner{justify-content:space-between}
.wslx-footer__links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wslx-footer__links a{color:rgba(255,255,255,.62)}
@media(max-width:1200px){.wslx-footer__cols{grid-template-columns:1.4fr 1fr 1fr 1.2fr}.wslx-footer__col--contact{grid-column:span 2}}
@media(max-width:900px){.wslx-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.wslx-footer__col--contact{grid-column:auto}}
@media(max-width:560px){.wslx-footer__cols{grid-template-columns:minmax(0,1fr)}.wslx-cta-band__act .wslx-btn{width:100%}}

/* ==========================================================================
   1. HEADER — ô "MUA SỈ" viền vàng (mockup 001)
   ========================================================================== */
/* Vien vang 1px, nen trong suot, khong shadow - dung nguyen van yeu cau khach. */
.wslx-act--boxed{
  border:1px solid #CD9842;border-radius:8px;background:transparent;box-shadow:none;
  padding:9px 16px;gap:9px;
}
.wslx-act--boxed:hover{border-color:#CD9842;background:transparent}
.wslx-act--boxed .wslx-act__ico,
.wslx-act--boxed .wslx-act__sub{color:#CD9842}
.wslx-act--boxed .wslx-act__ico{width:26px;height:26px}
.wslx-act--boxed .wslx-act__top{letter-spacing:.06em}
.wslx-act--boxed .wslx-act__sub{text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.wslx-act__caret{opacity:.7;margin-left:2px;flex:none}
@media(max-width:1180px){.wslx-act--boxed{padding:8px 12px}}

/* ==========================================================================
   10. CHÂN TRANG (mockup 8)
   ========================================================================== */
.wslx-footer{margin-top:0}
.wslx-footer__cols{grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.05fr;gap:32px}
.wslx-footer__title{
  font-family:var(--ff-display);color:var(--gold-soft);font-size:16px;letter-spacing:.06em;
}
.wslx-footer__col--connect .wslx-social{margin-top:0;margin-bottom:18px;gap:11px}
.wslx-social a{width:40px;height:40px;border:1.5px solid rgba(200,155,60,.6);color:var(--gold-soft);background:transparent}
.wslx-social a .wslx-ico{width:19px;height:19px}
.wslx-social a:hover{border-color:transparent}

/* Huy hiệu Bộ Công Thương (chỉ hiện khi đã khai link đăng ký thật) */
.wslx-bct{
  display:inline-flex;align-items:center;gap:11px;padding:10px 16px;margin-bottom:16px;
  border:1.5px solid rgba(200,155,60,.7);border-radius:var(--r-sm);color:var(--gold-soft);
}
.wslx-bct:hover{background:rgba(200,155,60,.12);color:var(--gold-soft)}
.wslx-bct .wslx-ico{color:var(--gold);flex:none}
.wslx-bct b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.wslx-bct i{display:block;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.wslx-footer__pay span{background:transparent;border:0;padding:0;font-size:12.5px;color:rgba(255,255,255,.6)}
.wslx-footer__pay span:not(:last-child)::after{content:"·";margin-left:10px;color:rgba(255,255,255,.35)}
@media(max-width:1200px){.wslx-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.wslx-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wslx-footer__cols{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   YÊU CẦU 13/09/2026 — ĐIỆN THOẠI
   (1) thanh liên hệ · (2) header 76px · (3)(4) menu kéo · (7) footer · (10) breadcrumb
   Đặt cuối tệp để thắng các quy tắc cũ cùng độ ưu tiên.
   ========================================================================== */
.wslx-mhead{display:none}
.wslx-act__div{display:none}
.wslx-footer__acc{all:unset;display:block;cursor:default}
.wslx-footer__caret{display:none}
.wslx-footer__title--contact{display:none}
.wslx-menuicon{width:26px;height:26px;display:block;flex:none}

@media(max-width:1024px){
  /* ---- (2) Header 76px: ☰ – Logo – GIÁ SỈ – Tìm kiếm ---- */
  .wslx-header{background:#8B1432}
  .wslx-header__inner{height:76px;gap:12px}
  .wslx-burger{width:30px;height:44px;flex:none;display:grid;place-items:center;color:#FCFBF8;padding:0}
  .wslx-burger .wslx-ico{width:30px;height:30px}
  .wslx-brand img{height:42px;width:auto;max-height:none}
  .wslx-actions{gap:14px}
  .wslx-act--boxed{height:40px;padding:0 12px;gap:8px;border:1px solid #CD9842;border-radius:8px;background:transparent;box-shadow:none}
  .wslx-act--boxed .wslx-act__ico{width:20px;height:20px;color:#CD9842}
  .wslx-act--boxed .wslx-act__ico .wslx-ico{width:20px;height:20px}
  .wslx-act--boxed .wslx-act__div{display:block;width:1px;height:18px;background:#CD9842}
  .wslx-act--boxed .wslx-act__top{color:#FFFFFF;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1}
  .wslx-act--boxed .wslx-act__sub{display:none}
  .wslx-actions [data-wslx-search-toggle] .wslx-act__ico{width:30px;height:44px;color:#FCFBF8}
  .wslx-actions [data-wslx-search-toggle] .wslx-ico{width:26px;height:26px}

  /* ---- (3) Menu kéo: đầu chỉ còn nút X và logo, logo căn giữa theo cả bề ngang ---- */
  .wslx-drawer__head{position:relative;height:76px;padding:0 20px;background:#8B1432;display:flex;align-items:center;justify-content:center;gap:0}
  .wslx-drawer__head .wslx-brand{flex:none;min-width:0;justify-content:center}
  .wslx-drawer__head .wslx-brand img{height:42px;max-height:none;width:auto}
  .wslx-drawer__x{
    position:absolute;left:20px;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border:1px solid rgba(255,255,255,.6);border-radius:10px;
    display:grid;place-items:center;color:#FFFFFF;background:transparent;
  }
  .wslx-drawer__x .wslx-ico{width:28px;height:28px;stroke-width:1.7}

  .wslx-mnav__ico{width:30px;color:#8B1432}
  .wslx-mnav__row--lv2{padding:15px 18px}
  .wslx-mnav__row--lv2 .wslx-mnav__label{font-size:15px;font-weight:600;color:#8B1432;text-transform:uppercase}
  .wslx-mnav__row--lv2.is-link{padding-left:62px}
  .wslx-mnav__row--lv2.is-link .wslx-mnav__label{font-size:14px;font-weight:500;color:#2A2A2A;text-transform:none}
  .wslx-mnav__sub .wslx-mnav__sub{background:#FFFFFF}
  .wslx-mnav__row--lv3{padding:12px 18px 12px 62px;gap:12px}
  .wslx-mnav__row--lv3 .wslx-mnav__label{font-size:14px;font-weight:500;color:#2A2A2A;text-transform:uppercase;letter-spacing:.02em}

  /* ---- (1) Thanh liên hệ: cao tự động, tự ôm vùng an toàn iPhone ---- */
  .wslx-mbar{
    height:auto;background:#4A1828;border-top:0;box-shadow:none;
    padding:5px 0 calc(5px + env(safe-area-inset-bottom));
  }
  .wslx-mbar__inner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row}
  .wslx-mbar__item{
    min-height:44px;padding:0 2px;gap:3px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;color:#FFFFFF;line-height:1.2;margin:0;
  }
  .wslx-mbar__item .wslx-ico{width:22px;height:22px;color:#CD9842;stroke-width:1.6}
  .wslx-mbar__lab{font-size:11px;font-weight:500;color:#FFFFFF;white-space:nowrap}
  .wslx-mbar__item.is-active,.wslx-mbar__item.is-active .wslx-mbar__lab{color:#FFFFFF}
  .wslx-mbar__item.is-active .wslx-ico{color:#CD9842}
  .wslx-mbar__item+.wslx-mbar__item::before{top:24%;bottom:24%;background:rgba(255,255,255,.16)}
  .wslx-mbar__ico{width:22px;height:22px;border-radius:50%;background:#CD9842;color:#4A1828;display:grid;place-items:center}
  .wslx-mbar__ico--zalo{font-size:7.5px;font-weight:800;letter-spacing:-.02em;line-height:1}
  .wslx-mbar__ico--mess svg,.wslx-mbar__ico--mess .wslx-ico{width:13px;height:13px;color:#4A1828;fill:currentColor}
  .wslx-mbar__cart{position:relative;display:grid;place-items:center}
  .wslx-mbar__badge{
    position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
    background:#CD9842;color:#4A1828;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1;
  }
  .wslx-mbar__badge.is-empty{display:none}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
}

@media(max-width:767px){
  /* ---- (7) Footer dạng accordion: Về LXWINE – Liên kết nhanh – Chính sách – Liên hệ ---- */
  .wslx-footer__top{padding:6px 0 0}
  .wslx-footer__cols{display:flex;flex-direction:column;gap:0}
  .wslx-footer__col{order:2;border-bottom:1px solid rgba(255,255,255,.12)}
  .wslx-footer__col--brand{order:4}
  .wslx-footer__col--connect{order:5;border-bottom:0;padding:18px 0 6px}
  .wslx-footer__col--brand > .wslx-brand,.wslx-footer__col--brand .wslx-footer__desc{display:none}
  .wslx-footer__title--contact{display:block}
  .wslx-footer__col:not(.wslx-footer__col--connect) .wslx-footer__title{margin:0;padding:0}
  .wslx-footer__col:not(.wslx-footer__col--connect) .wslx-footer__title::after{display:none}
  .wslx-footer__acc{
    display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;
    padding:15px 0;cursor:pointer;font:600 14px/1.3 var(--ff-body);letter-spacing:.05em;
    text-transform:uppercase;color:#FCFBF8;
  }
  .wslx-footer__caret{display:block;width:16px;height:16px;color:#CD9842;transition:transform .25s var(--ease)}
  .wslx-footer__col.is-open .wslx-footer__caret{transform:rotate(180deg)}
  .wslx-footer__col:not(.wslx-footer__col--connect) .wslx-footer__list,
  .wslx-footer__col--brand .wslx-footer__contact{display:none;padding:0 0 14px;margin:0}
  .wslx-footer__col.is-open .wslx-footer__list,
  .wslx-footer__col--brand.is-open .wslx-footer__contact{display:block}

  /* ---- (10) Breadcrumb trang sản phẩm: một dòng, phần cuối cắt gọn ---- */
  .single-product .wslx-crumb__list{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;font-size:12px;padding:10px 0;gap:4px}
  .single-product .wslx-crumb__list > li{flex:none}
  .single-product .wslx-crumb__list > li:last-child{flex:1 1 auto;min-width:0;overflow:hidden}
  .single-product .wslx-crumb__cur{display:block;overflow:hidden;text-overflow:ellipsis;color:#8B1432;font-weight:500}
}

/* 17/09/2026 — HERO TRÊN ĐIỆN THOẠI
   Khách đã gửi ảnh DỌC riêng cho từng slide (ô "Ảnh mobile"), khổ 3:4.
   Slide 1 là ảnh nền để web phủ chữ lên; slide 2–5 là ảnh đã in sẵn chữ.
   Vì vậy khung hero để đúng 3:4 và chữ của slide 1 căn giữa phía trên, màu đỏ rượu,
   cỡ theo vw — khớp bố cục hai ảnh in sẵn để mọi slide nhìn như một bộ. */
@media(max-width:767px){
  .wslx-hero{aspect-ratio:3/4;height:auto}
  .wslx-hero .wslx-slider__track{align-items:stretch;height:100%}
  .wslx-hero__slide{min-height:0;height:100%}
  .wslx-hero__slide--image,
  .wslx-hero__slide--image a,
  .wslx-hero__slide--image picture{height:100%;display:block}
  .wslx-hero__slide--image img{width:100%;height:100%;object-fit:cover}

  /* Nền ảnh dọc sáng màu nên phủ nhẹ màu trắng ở trên cho chữ đỏ luôn đọc rõ. */
  .wslx-hero__veil{background:linear-gradient(180deg,rgba(255,252,247,.86) 0%,rgba(255,252,247,.55) 34%,rgba(255,252,247,0) 56%)}
  .wslx-hero__inner{height:100%;display:flex;align-items:flex-start;padding-top:6%}
  .wslx-hero__inner .wslx-wrap{width:100%}
  .wslx-hero__box{max-width:88%;margin:0 auto;padding:0;text-align:center}
  .wslx-hero__eyebrow{display:none}
  .wslx-hero__title{font-size:5.9vw;line-height:1.25;color:#8B1432;margin:0 0 2.4vw;text-shadow:none}
  .wslx-hero__title em{color:#8B1432}
  .wslx-hero__desc{font-size:2.9vw;line-height:1.5;color:#4A4A4A;margin:0 auto 3.4vw;max-width:88%}
  .wslx-hero__cta{gap:2.4vw;flex-direction:column;align-items:center}
  .wslx-hero__cta .wslx-btn{
    padding:2.4vw 5vw;font-size:2.9vw;border-radius:1.4vw;gap:1.6vw;letter-spacing:.05em;border-width:1px;white-space:nowrap;
  }
  .wslx-hero__cta .wslx-btn .wslx-ico{width:3.2vw;height:3.2vw}
  .wslx-hero__cta .wslx-btn--light{
    padding:0;border:0;background:none;color:#8B1432;text-decoration:underline;text-underline-offset:.7vw;
  }
  .wslx-hero__cta .wslx-btn--light:hover{background:none;color:#6E021F}
  .wslx-hero__pills{display:none}
  /* Khung hẹp: chỉ dùng chấm tròn và vuốt, mũi tên sẽ đè lên chữ. */
  .wslx-hero .wslx-nav-btn{display:none}
  .wslx-hero .wslx-dots{bottom:3vw;gap:1.6vw}
  .wslx-hero .wslx-dots button{width:1.8vw;height:1.8vw;background:rgba(74,24,40,.28)}
  .wslx-hero .wslx-dots button.is-active{width:5.6vw;background:#8B1432}

}

/* Từ 768px trở lên, ảnh banner ngang (2.31–2.4) thấp hơn khung hero 7–23px nên hở một dải nền tối
   ở đáy. Cho ảnh lấp đầy khung; phần cắt tối đa ~4% chiều cao, không chạm vào chữ in trong ảnh. */
@media(min-width:768px){
  /* KHÔNG đặt height cho slide: đặt height sẽ huỷ việc flex kéo slide bằng nhau và nó lại hụt.
     Thay vào đó cho khối ảnh phủ tuyệt đối bên trong slide đã được kéo đúng chiều cao. */
  .wslx-hero__slide--image{position:relative}
  .wslx-hero__slide--image a,
  .wslx-hero__slide--image picture{position:absolute;inset:0;display:block;line-height:0}
  .wslx-hero__slide--image img{width:100%;height:100%;object-fit:cover;object-position:center}
}