/* ================== 1) BUTTON STATES (giữ màu kể cả :visited) ================== */
.btn, .btn:link, .btn:visited { text-decoration: none !important; }

/* Ghost (viền xám, nền trắng) */
.btn-ghost, .btn-ghost:link, .btn-ghost:visited {
  background:#fff !important; color:#111827 !important; border:1px solid #e5e7eb !important;
}

/* Primary (xanh) */
.btn-primary, .btn-primary:link, .btn-primary:visited {
  background: var(--primary) !important; color:#fff !important;
}

/* Accent (cam) */
.btn-accent, .btn-accent:link, .btn-accent:visited {
  background: var(--accent) !important; color:#fff !important;
}

/* Không đổi màu chữ của CTA khi link đã được bấm */
.hero .cta .btn:visited { color: inherit !important; }
.hero .cta .btn-ghost:visited { color:#111827 !important; }
.hero .cta .btn-primary:visited { color:#fff !important; }


/* ================== 2) WELCOME BANNER + CONFETTI ================== */
.site-welcome-banner{
  position:fixed; left:0; right:0; top:-200px; z-index:9999;
  background:linear-gradient(90deg,#ffb86b,#ff7a00); color:#111;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  padding:18px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;
  transition:top .6s cubic-bezier(.2,.9,.3,1);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.site-welcome-banner.open{ top:10px; }

.site-welcome-banner .w-left{ flex:1 1 420px; min-width:220px; }
.site-welcome-banner .w-title{ font-weight:800; font-size:18px; margin-bottom:6px; color:#06112a; }
.site-welcome-banner .w-sub{ font-size:14px; color:#081827; opacity:.9; margin-bottom:8px; }

.site-welcome-banner .w-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.site-welcome-banner input.coupon{
  padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.08);
  font-weight:700; width:170px; background:rgba(255,255,255,.95);
}
.site-welcome-banner .btn{ padding:10px 14px; border-radius:10px; cursor:pointer; border:0; font-weight:800; }
.site-welcome-banner .btn-accept{ background:#0f2b84; color:#fff; box-shadow:0 6px 18px rgba(15,43,132,.18) }
.site-welcome-banner .btn-close{ background:transparent; color:#06112a; font-size:18px; padding:6px 8px; border-radius:8px; border:1px solid rgba(0,0,0,.06) }

@media (max-width:640px){
  .site-welcome-banner{ padding:12px; gap:8px }
  .site-welcome-banner .w-title{ font-size:15px }
  .site-welcome-banner input.coupon{ width:120px }
}

/* Canvas bắn pháo giấy */
#confetti-canvas{ position:fixed; inset:0; pointer-events:none; z-index:10000; }


/* ================== 3) GLOBAL DRAWER/BACKDROP KILL-SWITCH ==================
   Ẩn toàn bộ các biến thể menu off-canvas cho tới khi có .open (JS thêm). */
.drawer, .site-drawer, .app-drawer, .mobile-menu, .nav-drawer,
#drawer, #mobileDrawer{
  position:fixed !important; top:0; bottom:0; left:-120% !important;
  width:86vw; max-width:420px; background:#fff; z-index:70;
  visibility:hidden !important; transition:left .28s cubic-bezier(.2,.9,.3,1);
}
.drawer.open, .site-drawer.open, .app-drawer.open, .mobile-menu.open, .nav-drawer.open,
#drawer.open, #mobileDrawer.open{
  left:0 !important; visibility:visible !important;
}

.backdrop, .site-backdrop, #backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.32);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0; visibility:hidden; transition:.25s; z-index:60;
}
.backdrop.open, .site-backdrop.open, #backdrop.open{ opacity:1; visibility:visible; }

/* Xoá bullet + khoảng trắng UL menu (kể cả render ngoài header) */
.drawer-links, .drawer-links ul, nav ul, header ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
}

/* Desktop: không cho drawer/backdrop hiển thị */
@media (min-width:768px){
  .drawer, .site-drawer, .app-drawer, .mobile-menu, .nav-drawer,
  #drawer, #mobileDrawer, .backdrop, .site-backdrop, #backdrop{
    display:none !important;
  }
}


/* ================== 4) MOBILE HEADER COMPACT ================== */
@media (max-width:767px){
  header .brand-text, header .brand-slogan{ display:none !important; }
  .container.nav, .nav{
    height:56px !important; display:flex !important;
    align-items:center !important; justify-content:space-between !important;
  }
  /* Nếu vẫn thấy dấu chấm do UL nào đó lộ */
  header ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
}
/* Kill bullet + thụt lề cho mọi UL nằm trong header/nav (chỉ phạm vi header) */
header ul,
header .nav ul,
header nav ul,
header .drawer-links,
header .drawer-links ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;  /* UL mặc định có padding-left ~40px, reset về 0 */
}

/* (Tùy chọn) Ẩn hẳn mọi UL menu trong header nếu vô tình bị render ra */
@media (max-width: 767px){
  header nav ul { display: none !important; }
}
@media (min-width: 768px){
  header nav ul { display: none !important; }
}