/* CSS menu w56: giữ màu và giao diện từ file gốc của bạn.
   Phần cuối file chỉ bổ sung trạng thái mở và khả năng bấm. */
.w56-menu{position:relative;z-index:10;display:block;width:100%;height:auto;margin:0;padding:0;background-color:rgba(var(--main-color-w),1);background-image:linear-gradient(90deg,rgba(6,18,48,.55) 0%,rgba(6,18,48,.18) 55%,rgba(6,18,48,.42) 100%);border:none;border-bottom:.1rem solid rgba(255,255,255,.08);box-shadow:0 .4rem 1.8rem rgba(10,30,70,.18);font-family:"Be Vietnam Pro","Montserrat",sans-serif}

/* T?t các l?p trang trí ::before/::after c?a theme cu */
.w56-menu .w56-menu__group::before,.w56-menu .w56-menu__group::after,.w56-menu .w56-menu__second::before,.w56-menu .w56-menu__second::after,.w56-menu .w56-menu__second__items__item__main::before,.w56-menu .w56-menu__second__items__item__main::after,.w56-menu .w56-menu__second__items__item__childs::before,.w56-menu .w56-menu__second__items__item__childs::after,.w56-menu .w56-menu__second__items__item__childs__child__main::before,.w56-menu .w56-menu__second__items__item__childs__child__main::after,.w56-menu .w56-menu__first::before,.w56-menu .w56-menu__first::after,.w56-menu .w56-menu__first__input::before,.w56-menu .w56-menu__first__input::after{content:none;display:none}

.w56-menu .w56-menu__group{position:relative;top:auto;left:auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:1200px;height:6.4rem;margin:0 auto;padding:0;background-color:transparent;background-image:none;border:none;box-shadow:none;transform:none}
.w56-menu .w56-menu__check{display:none}

/* ----- Menu chính (desktop) ----- */
.w56-menu .w56-menu__second{position:static;top:auto;left:auto;display:block;width:auto;height:100%;margin:0;padding:0;overflow:visible;background-color:transparent;background-image:none;border:none;box-shadow:none;transform:none;visibility:visible;opacity:1}
.w56-menu .w56-menu__second__items{position:static;display:flex;flex-wrap:nowrap;align-items:center;width:auto;height:100%;margin:0;padding:0;list-style:none;background-color:transparent;border:none}
.w56-menu .w56-menu__second__items__item{position:relative;display:flex;align-items:center;width:auto;height:100%;margin:0;padding:0;list-style:none;background-color:transparent;border:none;animation:w56cop1FadeDown .55s ease both}
.w56-menu .w56-menu__second__items__item__check{display:none}
.w56-menu .w56-menu__second__items__item__main{position:relative;display:flex;align-items:center;width:auto;height:4rem;margin:0;padding:0 1rem;color:#fff;background-color:transparent;background-image:none;border:none;border-radius:.8rem;box-shadow:none;transform:none;transition:background-color .25s ease}
.w56-menu .w56-menu__second__items__item__main:hover{background-color:rgba(255,255,255,.12)}
.w56-menu .w56-menu__second__items__item__main__icon1{display:none}
.w56-menu .w56-menu__second__items__item__main__name{display:block;width:auto;margin:0;padding:0;font-family:inherit;font-size:1.25rem;font-weight:600;line-height:4rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:#fff;background-color:transparent;border:none}
.w56-menu .w56-menu__second__items__item__main__name:hover{color:#fff}
.w56-menu .w56-menu__second__items__item__main__name:focus-visible{outline:.2rem solid #fff;outline-offset:.2rem;border-radius:.4rem}
.w56-menu .w56-menu__second__items__item__main__icon2{position:static;display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;margin:0 0 0 .4rem;padding:0;color:rgba(255,255,255,.75);background-color:transparent;border:none;border-radius:.4rem;cursor:pointer;transition:transform .3s ease,background-color .25s ease}
.w56-menu .w56-menu__second__items__item__main__icon2__value{margin:0;font-size:1.2rem;color:inherit;transform:none}

/* ----- Dropdown c?p 2 ----- */
.w56-menu .w56-menu__second__items__item__childs{position:absolute;top:100%;right:auto;bottom:auto;left:0;z-index:2;display:block;width:27rem;height:auto;max-height:none;margin:0;padding:.8rem;overflow:visible;list-style:none;background-color:#fff;background-image:none;border:none;border-top:.3rem solid rgba(var(--second-color-w),1);border-radius:0 0 1.2rem 1.2rem;box-shadow:0 1.8rem 4rem rgba(12,32,74,.18);opacity:0;visibility:hidden;transform:translateY(1.2rem);pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
.w56-menu .w56-menu__second__items__item__childs__child{position:relative;top:auto;left:auto;display:block;width:100%;height:auto;margin:0;padding:0;list-style:none;background-color:transparent;border:none;transform:none}
.w56-menu .w56-menu__second__items__item__childs__child__check{display:none}
.w56-menu .w56-menu__second__items__item__childs__child__main{position:relative;top:auto;left:auto;display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;margin:0;padding:0;color:#1d2a3f;background-color:transparent;background-image:none;border:none;border-radius:.8rem;box-shadow:none;transform:none;transition:background-color .2s ease}
.w56-menu .w56-menu__second__items__item__childs__child__main:hover{background-color:rgba(var(--main-color-w),.08)}
.w56-menu .w56-menu__second__items__item__childs__child__main__name{display:block;width:100%;height:auto;margin:0;padding:1rem 1.2rem;font-family:inherit;font-size:1.4rem;font-weight:500;line-height:1.4;text-transform:none;white-space:normal;color:#1d2a3f;background-color:transparent;border:none;transition:color .2s ease,transform .2s ease}
.w56-menu .w56-menu__second__items__item__childs__child__main__name:hover{color:rgba(var(--main-color-w),1);transform:translateX(.4rem)}
.w56-menu .w56-menu__second__items__item__childs__child__main__icon{position:static;display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin:0;padding:0 1.2rem;font-size:1.3rem;color:#8a97ab;background-color:transparent;border:none;cursor:pointer;transition:transform .3s ease,color .2s ease}
.w56-menu .w56-menu__second__items__item__childs__child__main__icon:hover{color:rgba(var(--main-color-w),1)}

/* ----- Dropdown c?p 3 ----- */
.w56-menu .w56-menu__second__items__item__childs__child__grands{position:absolute;top:-.8rem;right:auto;bottom:auto;left:calc(100% + .8rem);z-index:2;display:block;width:24rem;height:auto;max-height:none;margin:0;padding:.8rem;overflow:visible;list-style:none;background-color:#fff;background-image:none;border:none;border-left:.3rem solid rgba(var(--second-color-w),1);border-radius:0 1.2rem 1.2rem 0;box-shadow:0 1.8rem 4rem rgba(12,32,74,.18);opacity:0;visibility:hidden;transform:translateX(1rem);pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
.w56-menu .w56-menu__second__items__item__childs__child__grands__grand{display:block;width:100%;margin:0;padding:0;list-style:none;background-color:transparent;border:none}
.w56-menu .w56-menu__second__items__item__childs__child__grands__grand__main{display:block;width:100%;margin:0;padding:0;background-color:transparent;border:none;border-radius:.8rem;transition:background-color .2s ease}
.w56-menu .w56-menu__second__items__item__childs__child__grands__grand__main:hover{background-color:rgba(var(--main-color-w),.08)}
.w56-menu .w56-menu__second__items__item__childs__child__grands__grand__main__name{display:block;margin:0;padding:1rem 1.2rem;font-family:inherit;font-size:1.4rem;font-weight:500;text-transform:none;color:#1d2a3f;background-color:transparent;cursor:pointer;transition:color .2s ease}
.w56-menu .w56-menu__second__items__item__childs__child__grands__grand__main__name:hover{color:rgba(var(--main-color-w),1)}

/* ----- Tìm ki?m ----- */
.w56-menu .w56-menu__first{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:0;display:flex;align-items:center;justify-content:flex-end;width:auto;height:100%;margin:0;padding:0;background-color:transparent;background-image:none;border:none;box-shadow:none;transform:none}
.w56-menu .w56-menu__first__input{position:relative;top:auto;left:auto;display:flex;align-items:center;justify-content:space-between;width:23rem;height:4rem;margin:0;padding:0 .4rem 0 1.6rem;background-color:#fff;border:none;border-radius:10rem;box-shadow:none;transform:none;transition:box-shadow .3s ease}
.w56-menu .w56-menu__first__input:focus-within{box-shadow:0 0 0 .4rem rgba(255,255,255,.25)}
.w56-menu .w56-menu__first__input__text{display:block;width:calc(100% - 3.6rem);height:100%;margin:0;padding:0;font-family:inherit;font-size:1.4rem;color:#1d2a3f;background-color:transparent;border:none;border-radius:0;outline:none;box-shadow:none}
.w56-menu .w56-menu__first__input__text::placeholder{color:#8a97ab}
.w56-menu .w56-menu__first__input__icon{position:static;display:flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;margin:0;padding:0;font-size:1.3rem;color:#fff;background-color:rgba(var(--main-color-w),1);background-image:linear-gradient(135deg,rgba(var(--main-color-w),1),rgba(var(--second-color-w),1));border:none;border-radius:50%;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.w56-menu .w56-menu__first__input__icon:hover{transform:scale(1.08);box-shadow:0 .6rem 1.4rem rgba(var(--main-color-w),.45)}
.w56-menu .w56-menu__first__label{display:none}
.w56-menu .w56-menu__first__checksearch{display:none}

/* ----- G?i ý tour du?i ô tìm ki?m ----- */
.w56-menu .w56-menu__first__main::before,.w56-menu .w56-menu__first__main::after,.w56-menu .w56-menu__first__main__items::before,.w56-menu .w56-menu__first__main__items::after,.w56-menu .w56-menu__first__main__items__item::before,.w56-menu .w56-menu__first__main__items__item::after,.w56-menu .w56-menu__first__main__close::before,.w56-menu .w56-menu__first__main__close::after,.w56-menu .w56-menu__first__main__close__icon::after{content:none;display:none}
.w56-menu .w56-menu__first__main{position:absolute;top:calc(100% + .2rem);right:0;bottom:auto;left:auto;z-index:3;display:block;width:44rem;height:auto;margin:0;padding:.8rem;overflow:visible;background-color:#fff;background-image:none;border:none;border-top:.3rem solid rgba(var(--second-color-w),1);border-radius:0 0 1.4rem 1.4rem;box-shadow:0 2rem 5rem rgba(12,32,74,.22);opacity:0;visibility:hidden;transform:translateY(1.2rem);pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
.w56-menu .w56-menu__first__main__items{display:block;width:100%;height:auto;max-height:36rem;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;list-style:none;background-color:transparent;background-image:none;border:none;box-shadow:none;scrollbar-width:thin;scrollbar-color:rgba(var(--main-color-w),.35) transparent}
.w56-menu .w56-menu__first__main__items::-webkit-scrollbar{width:.5rem;height:0}
.w56-menu .w56-menu__first__main__items::-webkit-scrollbar-thumb{background-color:rgba(var(--main-color-w),.35);border-radius:1rem}
.w56-menu .w56-menu__first__main__items::-webkit-scrollbar-track{background-color:transparent}
.w56-menu .w56-menu__first__main__items__item{position:relative;display:block;width:100%;height:auto;margin:0;padding:0;list-style:none;background-color:transparent;background-image:none;border:none;border-left:.3rem solid transparent;border-bottom:.1rem solid #eef1f6;border-radius:.6rem;box-shadow:none;transition:border-color .2s ease,background-color .2s ease}
.w56-menu .w56-menu__first__main__items__item:last-child{border-bottom-color:transparent}
.w56-menu .w56-menu__first__main__items__item:hover{border-left-color:rgba(var(--second-color-w),1);background-color:rgba(var(--main-color-w),.06)}
.w56-menu .w56-menu__first__main__items__item__name{display:block;width:100%;margin:0;padding:1.1rem 1.2rem;font-family:inherit;font-size:1.3rem;font-weight:500;line-height:1.5;letter-spacing:.01em;text-transform:none;white-space:normal;color:#22314a;background-color:transparent;border:none;transition:color .2s ease,transform .2s ease}
.w56-menu .w56-menu__first__main__items__item__name:hover{color:rgba(var(--main-color-w),1);transform:translateX(.3rem)}
.w56-menu .w56-menu__first__main__close{position:absolute;top:-1.4rem;right:-1.4rem;bottom:auto;left:auto;z-index:4;display:flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;margin:0;padding:0;font-size:1.3rem;line-height:1;color:#56637a;background-color:#fff;background-image:none;border:.1rem solid #e3e8f0;border-radius:50%;box-shadow:0 .4rem 1.2rem rgba(12,32,74,.2);cursor:pointer;transition:transform .3s ease,background-color .25s ease,color .25s ease}
.w56-menu .w56-menu__first__main__close:hover{color:#fff;background-color:rgba(var(--main-color-w),1);border-color:rgba(var(--main-color-w),1);transform:rotate(90deg)}
.w56-menu .w56-menu__first__main__close__icon{position:static;display:block;width:auto;height:auto;margin:0;padding:0;font-size:1.3rem;line-height:1;color:inherit;background-color:transparent;background-image:none;border:none;border-radius:0;box-shadow:none;transform:rotate(45deg)}
.w56-menu .w56-menu__bg{display:none}

@keyframes w56cop1FadeDown{0%{opacity:0;transform:translateY(-1rem)}100%{opacity:1;transform:translateY(0)}}
@keyframes w56cop1SlideIn{0%{opacity:0;transform:translateX(-2rem)}100%{opacity:1;transform:translateX(0)}}
@keyframes w56cop1Open{0%{opacity:0;transform:translateY(-.6rem)}100%{opacity:1;transform:translateY(0)}}

@media only screen and (max-width: 1200px){
  .w56-menu .w56-menu__group{width:98%}
  .w56-menu .w56-menu__second__items__item__main{padding:0 .7rem}
  .w56-menu .w56-menu__second__items__item__main__name{font-size:1.15rem}
  .w56-menu .w56-menu__first__input{width:18rem}
}

/* ----- Tablet & mobile: menu d?ng ngan kéo ----- */
@media only screen and (max-width: 1100px){
  .w56-menu .w56-menu__group{width:96%;height:6rem}
  .w56-menu .w56-menu__second{position:fixed;top:0;right:auto;bottom:auto;left:0;z-index:2;display:block;width:34rem;height:100vh;margin:0;padding:0 0 3rem;overflow-x:hidden;overflow-y:auto;background-color:#fff;border:none;border-top:.5rem solid rgba(var(--main-color-w),1);box-shadow:1rem 0 4rem rgba(8,20,45,.3);transform:translateX(-105%);visibility:hidden;opacity:1;transition:transform .4s cubic-bezier(.22,.8,.3,1),visibility .4s ease}
  .w56-menu .w56-menu__second__items{display:block;width:100%;height:auto;padding:1rem 0}
  .w56-menu .w56-menu__second__items__item{display:block;width:100%;height:auto;border-bottom:.1rem solid #eef1f6;animation:w56cop1SlideIn .45s ease both}
  .w56-menu .w56-menu__second__items__item__main{justify-content:flex-start;width:100%;height:auto;padding:0 1.6rem 0 2rem;color:#1d2a3f;background-color:transparent;border-radius:0}
  .w56-menu .w56-menu__second__items__item__main:hover{background-color:rgba(var(--main-color-w),.06)}
  .w56-menu .w56-menu__second__items__item__main__icon1{display:block;width:1.4rem;margin:0 .8rem 0 0;font-size:1.2rem;color:rgba(var(--main-color-w),1);transform:none}
  .w56-menu .w56-menu__second__items__item__main__name{width:calc(100% - 5.4rem);font-size:1.4rem;line-height:5rem;white-space:normal;color:#1d2a3f}
  .w56-menu .w56-menu__second__items__item__main__name:hover{color:rgba(var(--main-color-w),1)}
  .w56-menu .w56-menu__second__items__item__main__name:focus-visible{outline-color:rgba(var(--main-color-w),1)}
  .w56-menu .w56-menu__second__items__item__main__icon2{width:3.2rem;height:3.2rem;margin:0 0 0 auto;color:rgba(var(--main-color-w),1);background-color:rgba(var(--main-color-w),.08);border-radius:.8rem}
  .w56-menu .w56-menu__second__items__item__childs{position:static;top:auto;left:auto;display:none;width:100%;margin:0;padding:.4rem 1rem 1rem 3.2rem;background-color:#f6f8fc;border:none;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;animation:w56cop1Open .35s ease}
  .w56-menu .w56-menu__second__items__item__childs__child__main__name{padding:.9rem 1rem;font-size:1.35rem}
  .w56-menu .w56-menu__second__items__item__childs__child__main__name:hover{transform:none}
  .w56-menu .w56-menu__second__items__item__childs__child__grands{position:static;top:auto;left:auto;display:none;width:100%;margin:0 0 .4rem;padding:0 0 0 1.4rem;background-color:transparent;border:none;border-left:.2rem solid rgba(var(--second-color-w),1);border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;animation:w56cop1Open .35s ease}
  .w56-menu .w56-menu__first{justify-content:space-between;width:100%}
  .w56-menu .w56-menu__first__input{width:calc(100% - 12.4rem)}
  .w56-menu .w56-menu__first__label{position:static;display:flex;align-items:center;justify-content:center;width:11.4rem;height:4rem;margin:0;padding:0;color:#fff;background-color:rgba(255,255,255,.14);border:.1rem solid rgba(255,255,255,.28);border-radius:10rem;cursor:pointer;transition:background-color .25s ease}
  .w56-menu .w56-menu__first__label:hover{background-color:rgba(255,255,255,.24)}
  .w56-menu .w56-menu__first__label__name{display:block;margin:0 .8rem 0 0;font-size:1.4rem;font-weight:600;color:#fff}
  .w56-menu .w56-menu__first__label__icon{margin:0;font-size:1.6rem;color:#fff}
  .w56-menu .w56-menu__first__main{top:100%;right:auto;left:0;width:100%}
  .w56-menu .w56-menu__first__main__close{top:-.8rem;right:.8rem}
  .w56-menu .w56-menu__first__main__items{max-height:60vh}
  .w56-menu .w56-menu__bg{position:fixed;top:0;left:0;z-index:1;display:block;width:100%;height:100vh;margin:0;background-color:rgba(8,20,45,.55);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
}

@media only screen and (max-width: 600px){
  .w56-menu .w56-menu__group{height:5.6rem}
  .w56-menu .w56-menu__first__input{width:calc(100% - 5.2rem);height:3.8rem}
  .w56-menu .w56-menu__first__label{width:4.2rem;height:3.8rem;border-radius:50%}
  .w56-menu .w56-menu__first__label__name{display:none}
  .w56-menu .w56-menu__first__main__items__item__name{font-size:1.25rem}
}

@media only screen and (max-width: 445px){
  .w56-menu .w56-menu__second{width:85%}
  .w56-menu .w56-menu__first__input{padding:0 .3rem 0 1.2rem}
  .w56-menu .w56-menu__first__input__text{font-size:1.3rem}
}

@media (prefers-reduced-motion: reduce){
  .w56-menu .w56-menu__second__items__item{animation:none}
  .w56-menu .w56-menu__second{transition:none}
  .w56-menu .w56-menu__second__items__item__childs{transition:none;animation:none}
  .w56-menu .w56-menu__first__main{transition:none}
}


/* Mở menu cấp 2 và 3 trên desktop bằng chuột, bàn phím hoặc checkbox. */
@media only screen and (min-width: 1101px) {
  .w56-menu .w56-menu__second__items__item:hover > .w56-menu__second__items__item__childs,
  .w56-menu .w56-menu__second__items__item:focus-within > .w56-menu__second__items__item__childs,
  .w56-menu .w56-menu__second__items__item__check:checked ~ .w56-menu__second__items__item__childs,
  .w56-menu .w56-menu__second__items__item__childs__child:hover > .w56-menu__second__items__item__childs__child__grands,
  .w56-menu .w56-menu__second__items__item__childs__child:focus-within > .w56-menu__second__items__item__childs__child__grands,
  .w56-menu .w56-menu__second__items__item__childs__child__check:checked ~ .w56-menu__second__items__item__childs__child__grands {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* Hai bảng chạm nhau để rê chuột sang cấp 3 không làm đóng menu. */
  .w56-menu .w56-menu__second__items__item__childs__child__grands {
    left: 100%;
  }

  .w56-menu .w56-menu__second__items__item:nth-last-child(-n+3) > .w56-menu__second__items__item__childs {
    right: 0;
    left: auto;
  }
  .w56-menu .w56-menu__second__items__item:nth-last-child(-n+3) .w56-menu__second__items__item__childs__child__grands {
    right: 100%;
    left: auto;
  }
}

/* Trạng thái mở tương ứng với các input/label đã có trong HTML mobile. */
@media only screen and (max-width: 1100px) {
  .w56-menu .w56-menu__check:checked ~ .w56-menu__second {
    transform: translateX(0);
    visibility: visible;
  }
  .w56-menu .w56-menu__check:checked ~ .w56-menu__bg {
    opacity: 1;
    visibility: visible;
  }
  .w56-menu .w56-menu__second__items__item__check:checked ~ .w56-menu__second__items__item__childs,
  .w56-menu .w56-menu__second__items__item__childs__child__check:checked ~ .w56-menu__second__items__item__childs__child__grands {
    display: block;
  }
}

/* Giữ màu chữ vốn có của cấp 2 khi trỏ chuột sang cấp 3. */
.w56-menu .w56-menu__second__items__item__childs > .w56-menu__second__items__item__childs__child:hover > .w56-menu__second__items__item__childs__child__main > .w56-menu__second__items__item__childs__child__main__name,
.w56-menu .w56-menu__second__items__item__childs > .w56-menu__second__items__item__childs__child:focus-within > .w56-menu__second__items__item__childs__child__main > .w56-menu__second__items__item__childs__child__main__name {
  color: #1d2a3f;
}

/* Danh sách tìm kiếm hiển thị ở trên các lớp menu và nhận thao tác bấm. */
.w56-menu .w56-menu__first {
  z-index: 5;
}
.w56-menu .w56-menu__first__main {
  z-index: 10;
  pointer-events: auto;
}
.w56-menu .w56-menu__first__main__items__item__name,
.w56-menu .w56-menu__first__main__close {
  pointer-events: auto;
}
.w56-menu .w56-menu__first__checksearch:checked ~ .w56-menu__first__main {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media only screen and (max-width: 1100px) {
  .w56-menu .w56-menu__first {
    z-index: 0;
  }

  .w56-menu .w56-menu__bg {
    z-index: 1;
  }

  .w56-menu .w56-menu__second {
    z-index: 2;
  }
}