/* ===== Nút "Tư vấn VIP" – phong cách Luxury (nền đen ấm, viền vàng champagne; rê chuột: ánh vàng lan nhẹ) =====
   BẢN GỐC ở đây (website). Coway Bot giữ bản chép css\tu-van-vip.css – sửa ở đây rồi chạy coway-bot\tools\dong-bo-tu-website.ps1.
   Dùng: website (menu header, tab mobile, menu trượt) – js\64-tu-van-vip.js; Coway Bot (thanh trên) – js\app.js.
   Biểu tượng vương miện / ổ khóa vẽ bằng CSS (mask) nên HTML chỉ cần <span class="vn-ic"></span>. */

.vipnut-host{display:inline-flex;align-items:center;flex:none;animation:vn-hien .7s ease both}
.vipnut-host:empty{display:none}
@keyframes vn-hien{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* --- nút trên menu / thanh trên --- */
.vipnut.vipnut{
  --vn-1:#fff1c4;--vn-2:#ecc866;--vn-3:#b8862c;
  --vn-nen:linear-gradient(180deg,#1e180f 0%,#0d0a05 100%);--vn-vien:linear-gradient(135deg,#f9e9ae 0%,#c99a35 34%,#7d5b1a 58%,#ecd07c 100%);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;
  height:32px;margin:0;padding:0 15px 0 11px;border-radius:999px;border:1px solid transparent;
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.06em;white-space:nowrap;text-decoration:none;color:#ecc866;opacity:1;cursor:pointer;
  background:var(--vn-nen) padding-box,var(--vn-vien) border-box;
  box-shadow:0 1px 2px rgba(25,18,6,.30),0 0 0 0 rgba(236,200,102,0),0 0 0 0 rgba(236,200,102,0),0 0 0 0 rgba(236,200,102,0),0 0 0 0 rgba(150,104,24,0);
  transition:box-shadow .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),filter .6s ease;
  -webkit-tap-highlight-color:transparent}
.vipnut.vipnut .vn-ic{display:inline-flex;color:var(--vn-2);filter:drop-shadow(0 0 3px rgba(236,200,102,.38));transition:filter .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.vn-ic::before{content:"";display:block;width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 8.6l4.3 3.9L12 5.7l4.3 6.8 4.3-3.9-1.8 10.2H5.2z'/><rect x='5.3' y='20.3' width='13.4' height='1.9' rx='.95'/><circle cx='3.4' cy='7.3' r='1.4'/><circle cx='12' cy='4.2' r='1.5'/><circle cx='20.6' cy='7.3' r='1.4'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 8.6l4.3 3.9L12 5.7l4.3 6.8 4.3-3.9-1.8 10.2H5.2z'/><rect x='5.3' y='20.3' width='13.4' height='1.9' rx='.95'/><circle cx='3.4' cy='7.3' r='1.4'/><circle cx='12' cy='4.2' r='1.5'/><circle cx='20.6' cy='7.3' r='1.4'/></svg>") center/contain no-repeat}
.vipnut.vipnut .vn-chu{background:linear-gradient(180deg,var(--vn-1) 0%,var(--vn-2) 52%,var(--vn-3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.vipnut.vipnut .vn-chu b{font-weight:800;letter-spacing:.14em;margin-left:1px}
.vipnut.vipnut .vn-kh{display:inline-flex;color:#9a8a63;margin-left:-2px}
.vn-kh::before{content:"";display:block;width:11px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0v2h1.2c.9 0 1.6.7 1.6 1.6v8.2c0 .9-.7 1.6-1.6 1.6H5.8c-.9 0-1.6-.7-1.6-1.6v-8.2c0-.9.7-1.6 1.6-1.6zm2.2 0h5.6V8a2.8 2.8 0 0 0-5.6 0z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0v2h1.2c.9 0 1.6.7 1.6 1.6v8.2c0 .9-.7 1.6-1.6 1.6H5.8c-.9 0-1.6-.7-1.6-1.6v-8.2c0-.9.7-1.6 1.6-1.6zm2.2 0h5.6V8a2.8 2.8 0 0 0-5.6 0z'/></svg>") center/contain no-repeat}

/* ánh vàng nền mờ dâng từ đáy nút + vệt sáng lướt qua một lần */
.vipnut.vipnut::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(120% 150% at 50% 130%,rgba(236,200,102,.42) 0%,rgba(236,200,102,.10) 48%,transparent 72%)}
.vipnut.vipnut::after{content:"";position:absolute;top:-35%;bottom:-35%;left:-70%;width:38%;z-index:-1;pointer-events:none;opacity:0;transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent 0%,rgba(255,244,208,.50) 50%,transparent 100%)}

.vipnut.vipnut:hover,.vipnut.vipnut:focus-visible{
  background:var(--vn-nen) padding-box,var(--vn-vien) border-box; /* nhắc lại: thanh trên của Coway Bot có a:hover đổi nền */
  transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(25,18,6,.30),0 0 0 1px rgba(236,200,102,.28),0 0 15px 1px rgba(236,200,102,.50),0 0 34px 3px rgba(236,200,102,.22),0 7px 22px rgba(168,118,28,.28)}
.vipnut.vipnut:hover::before,.vipnut.vipnut:focus-visible::before{opacity:1}
.vipnut.vipnut:hover::after,.vipnut.vipnut:focus-visible::after{animation:vn-quet 1.25s ease .05s 1 both}
.vipnut.vipnut:hover .vn-ic,.vipnut.vipnut:focus-visible .vn-ic{filter:drop-shadow(0 0 5px rgba(255,228,150,.75));transform:translateY(-.5px) scale(1.06)}
@keyframes vn-quet{0%{left:-70%;opacity:0}22%{opacity:1}100%{left:135%;opacity:0}}
.vipnut.vipnut:focus-visible{outline:2px solid rgba(236,200,102,.7);outline-offset:3px}
.vipnut.vipnut:active{transform:translateY(0) scale(.985);transition-duration:.12s}

/* tài khoản hết hạn gói: vẫn hiện (để đọc hướng dẫn gia hạn) nhưng mờ đi, ánh vàng yếu hơn */
.vipnut.vipnut.khoa{filter:saturate(.55) brightness(.9)}
.vipnut.vipnut.khoa:hover{box-shadow:0 1px 2px rgba(25,18,6,.30),0 0 0 1px rgba(236,200,102,.14),0 0 9px rgba(236,200,102,.24),0 0 0 0 rgba(236,200,102,0),0 0 0 0 rgba(150,104,24,0)}

/* header web: thu nhỏ dần theo bề rộng (cùng mốc với menu ở css\23) */
@container (max-width:1150px){.vipnut.vipnut{height:30px;padding:0 13px 0 9px;font-size:12px;gap:6px}}
@container (max-width:1000px){.vipnut.vipnut{height:28px;padding:0 11px 0 8px;font-size:11.5px;letter-spacing:.04em}.vn-ic::before{width:13px;height:13px}}
@container (max-width:880px){.vipnut.vipnut{padding:0 9px 0 7px;font-size:11px}}

/* tab thứ 6 của thanh mobile (bên phải "Hỗ trợ") */
.vipm-host{display:contents}
.mtab.vipm{text-decoration:none;color:#b8862c}
.mtab.vipm .mic{align-items:center;justify-content:center;box-sizing:border-box;width:22px;height:22px;margin:-1px 0 0;border-radius:50%;border:1px solid transparent;color:#ecc866;
  background:linear-gradient(180deg,#1e180f,#0d0a05) padding-box,linear-gradient(135deg,#f9e9ae,#c99a35 40%,#7d5b1a 62%,#ecd07c) border-box;
  box-shadow:0 0 9px rgba(236,200,102,.34)}
.mtab.vipm .mic .vn-ic{display:inline-flex}
.mtab.vipm .mic .vn-ic::before{width:12px;height:12px}
.mtab.vipm .ml{font-weight:700;letter-spacing:.02em;background:linear-gradient(180deg,#d9a93f,#a8761f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mtab.vipm.khoa{filter:saturate(.55) brightness(.92)}

/* mục trong menu trượt mobile */
.md-vip.md-vip{display:flex;align-items:center;gap:9px;margin:10px 14px 6px;padding:11px 16px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.05em;color:#ecc866;
  background:linear-gradient(180deg,#1e180f,#0d0a05) padding-box,linear-gradient(135deg,#f9e9ae,#c99a35 34%,#7d5b1a 58%,#ecd07c) border-box;
  box-shadow:0 0 14px rgba(236,200,102,.24)}
.md-vip.md-vip .vn-ic{display:inline-flex;color:#ecc866}
.md-vip.md-vip .vn-chu{background:linear-gradient(180deg,#fff1c4,#ecc866 52%,#b8862c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.md-vip.md-vip.khoa{filter:saturate(.55) brightness(.92)}

@media (prefers-reduced-motion:reduce){
  .vipnut-host{animation:none}
  .vipnut.vipnut,.vipnut.vipnut .vn-ic{transition:box-shadow .2s linear,filter .2s linear}
  .vipnut.vipnut:hover,.vipnut.vipnut:focus-visible{transform:none}
  .vipnut.vipnut:hover::after,.vipnut.vipnut:focus-visible::after{animation:none}
}