/* ========== BIẾN MÀU ========== */
:root{
  --wt-bg: rgba(10,10,11,.85);
  --wt-border: rgba(255,255,255,.08);
  --wt-text: #e5e7eb;
  --wt-dim:  #9ca3af;
  --wt-acc:  #fbbf24;   /* vàng thương hiệu */
  --wt-dark: #0b0b0c;
}

/* ========== HEADER GRID 3 CỘT ========== */
.wt-header{
  display:grid;
  grid-template-columns: auto 1fr auto !important; /* Logo | Menu | CTA */
  align-items:center;
  padding:5px 5px;
  position:sticky; top:0; z-index:1000;
  background:var(--wt-bg);
}

/* Logo bên trái */
.wt-brand{
  font-weight:800;
  color:#fff;
  text-decoration:none;
  justify-self:start;
}

/* Logo chuẩn trong header */
.wt-brand .custom-logo{
  height:68px;   /* chiều cao logo */
  width:auto;
  display:block;
}
@media (max-width:992px){
  .wt-brand .custom-logo{ height:42px; }
}
/* Menu chính giữa */
#wt-nav{
  justify-self:center;
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
#wt-nav > li{ position:relative; }
#wt-nav > li > a{
  color:var(--wt-text);
  text-decoration:none;
  padding:10px 4px;
  position:relative;
  font-size:16px;
  font-weight:500;
}
#wt-nav > li > a:hover{ color:#fff; }

/* Underline hover */
#wt-nav > li > a::after{
  content:""; position:absolute;
  left:50%; bottom:4px;
  width:0; height:2px;
  background:var(--wt-acc);
  transform:translateX(-50%);
  transition:width .25s ease;
}
#wt-nav > li:hover > a::after,
#wt-nav > li.current-menu-item > a::after{ width:80%; }

/* Dropdown desktop */
#wt-nav li ul.sub-menu{
  position:absolute; top:42px; left:0;
  min-width:200px;
  background:var(--wt-dark);
  border:1px solid var(--wt-border);
  border-radius:10px;
  display:none; padding:6px 0;
}
#wt-nav li:hover > ul.sub-menu{ display:block; }
#wt-nav li ul.sub-menu li a{
  display:block; padding:10px 14px; color:var(--wt-text);
}
#wt-nav li ul.sub-menu li a:hover{
  background:rgba(255,255,255,.05); color:#fff;
}

/* CTA bên phải */
.wt-cta{
  justify-self:end;
  display:flex; gap:10px;
}
.wt-btn{
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
}

/* CTA chính: Gradient động */
.wt-btn--primary{
  background:linear-gradient(270deg, #fbbf24, #f59e0b, #f97316);
  background-size:200% 200%;
  color:#111; border:none;
  box-shadow:0 2px 6px rgba(251,191,36,.25);
  animation:wtGradientMove 4s ease infinite;
}
.wt-btn--primary:hover{
  color:#000;
  box-shadow:0 4px 12px rgba(251,191,36,.45);
  animation:wtGradientMove 2s ease infinite;
}

/* Outline */
.wt-btn--outline{
  border:1px solid var(--wt-acc);
  color:var(--wt-acc); background:transparent;
}
.wt-btn--outline:hover{
  background:var(--wt-acc); color:#111;
  box-shadow:0 4px 12px rgba(251,191,36,.4);
}

/* Ghost */
.wt-btn--ghost{ color:var(--wt-dim); background:transparent; }
.wt-btn--ghost:hover{ color:#fff; }

/* Burger */
.wt-burger{ display:none; margin-left:auto; cursor:pointer; }
.wt-burger .bar{
  display:block; width:24px; height:2px; margin:5px 0; border-radius:2px;
  background:var(--wt-text);
  transition:transform .2s ease, opacity .2s ease;
}
.wt-burger[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.wt-burger[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.wt-burger[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Overlay (ẩn desktop, show qua inline style trong JS) */
.wt-overlay{}

/* ========== RESPONSIVE ========== */
@media (max-width:1280px){
  #wt-nav{ gap:22px; }
  #wt-nav > li > a{ font-size:15px; }
}
@media (max-width:1100px){
  #wt-nav{ gap:16px; }
  #wt-nav > li > a{ font-size:14px; }
}
@media (max-width:992px){
  .wt-cta{ display:none !important; }   /* CTA chuyển vào panel */
  .wt-burger{ 
    display:flex; 
    flex-direction:column; 
    justify-self:end;
    margin-left: 165px;        
    background-color: transparent;
    color: #f0b90b;
    border: initial;
    }}

  #wt-nav{
    position:fixed;
    top:0; right:-100%;
    flex-direction:column; gap:0;
    width:80%; max-width:360px;
    height:100vh;
    background:var(--wt-dark);
    padding:70px 20px;
    transition:right .3s ease;
    overflow:auto;
    justify-self:end;
  }
  #wt-nav.is-open{ right:0; }
  #wt-nav > li{ padding: 10px;}
  #wt-nav > li > a{ padding:16px 4px; font-size:16px; }


/* ========== KEYFRAMES ========== */
@keyframes wtGradientMove {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
/* ==== DESKTOP: ép nav hiện lại & bỏ off-canvas ==== */
@media (min-width: 993px){
  /* nav luôn hiển thị giữa header */
  .wt-header{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important; /* Burger | Logo | Menu | CTA */
    align-items: center !important;
  }

  /* reset toàn bộ thuộc tính có thể làm nav biến mất */
  #wt-nav,
  .wt-header #wt-nav,
  .wt-header nav#wt-nav{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 28px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* bỏ bullet, margin/padding mặc định */
  #wt-nav, #wt-nav ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
  #wt-nav li::marker, #wt-nav li::before{ content:none !important; }
  #wt-nav > li{ display:inline-flex !important; align-items:center !important; }

  /* ẩn burger ở desktop, hiển thị CTA */
  .wt-burger{ display:none !important; }
  .wt-cta{ display:flex !important; justify-self:end !important; }
}

/* ==== MOBILE: chỉ khi <= 992px mới áp dụng off-canvas ==== */
@media (max-width: 992px){
  #wt-nav{
    position: fixed !important;
    top: 0; right: -100%;
    width: 80%; max-width: 360px;
    height: 100vh;
    flex-direction: column !important;
    transition: right .3s ease;
    overflow: auto;
  }
  #wt-nav.is-open{ right: 0; }
}