/* ========== Header base ========== */
header.learningchain-masthead {
  height: calc(140px * 0.9 + (100vw * 140 / 1920) * 0.1);
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index: 9999;
  padding-left: 5.5%;
  padding-right: 5.5%;
  pointer-events: none;;
}

header.learningchain-masthead .learningchain-brand {
    z-index: 999999;
    pointer-events: auto;
}

header.learningchain-masthead .learningchain-brand img{
  height:35px; display:block;
}

/* ========== Hamburger ========== */
header.learningchain-masthead .learningchain-menu{
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99999999;
  pointer-events: auto;
}

/* 3 gạch */
header.learningchain-masthead .learningchain-line{
  position: absolute;
  right: 0;
  height: 3px;
  background:#fff;
  border-radius:2px;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

header.learningchain-masthead .learningchain-l1{
    width: 21px;
}
header.learningchain-masthead .learningchain-l2{
    width: 26px;
}
header.learningchain-masthead .learningchain-l3{
    width: 14px;
}


header.learningchain-masthead .learningchain-l1{ top: 0; }
header.learningchain-masthead .learningchain-l2{
  top: 50%;
  transform: translateY(-50%);
}
header.learningchain-masthead .learningchain-l3{ bottom: 0; }

/* Hover khi đã mở menú */
header.learningchain-masthead.is-open .learningchain-menu:hover .learningchain-line {
  background: red;
}

/* ========== Overlay ========== */
header.learningchain-masthead .learningchain-overlay{
  position:fixed; inset:0;
  background:url(https://learningchain.vn/wp-content/uploads/2025/11/background_header_new.webp) no-repeat center;
  background-size: cover;
  /*backdrop-filter: blur(5px);*/
  opacity:0; pointer-events:none;
  transform:translateY(-100%);
  transition:transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== Dropdown panel ========== */
header.learningchain-masthead .learningchain-dropdown{
  position:fixed; left:0; right:0; top:50px;
  transform:translateY(-50px);
  opacity:0; pointer-events:none;
  transition:transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* danh sách menu */
header.learningchain-masthead .learningchain-nav{
  list-style:none; margin:0; padding:70px 24px 16px; /* chừa chỗ cho nút close */
  display:flex; flex-direction:column;
  gap: clamp(15px, calc(28px * 0 + (100vw * 28 / 1920) * 1.0), 350px);
}
header.learningchain-masthead .learningchain-nav li{
  transform:translateY(30px);
  opacity:0;
  transition:transform .9s cubic-bezier(0.4, 0, 0.2, 1), opacity .9s cubic-bezier(0.4, 0, 0.2, 1);
}
header.learningchain-masthead .learningchain-nav a{
  color:#a3a3a3; text-decoration:none;
  font-size: 65px;
  margin-left: 3.5%;
  transition:opacity .3s ease;
  font-family: 'SVN-Gilroy Bold', sans-serif;
}
header.learningchain-masthead .learningchain-nav-item-language{
  margin-top: clamp(52px, calc(80px * 0 + (100vw * 80 / 1920) * 0.95), 120px);
}
header.learningchain-masthead .learningchain-nav-item-language a{
  font-size: 48px;
  position: relative;
  padding-left: 30px;
}

header.learningchain-masthead .learningchain-nav a:hover{ opacity:1; }

header.learningchain-masthead .learningchain-nav .learningchain-sub-link {
    font-size: 40px;
} 

/* Animation delays for staggered effect */
header.learningchain-masthead.is-open .learningchain-nav li:nth-child(1){
  transition-delay: 0.15s;
}
header.learningchain-masthead.is-open .learningchain-nav li:nth-child(2){
  transition-delay: 0.25s;
}
header.learningchain-masthead.is-open .learningchain-nav li:nth-child(3){
  transition-delay: 0.35s;
}
header.learningchain-masthead.is-open .learningchain-nav li:nth-child(4){
  transition-delay: 0.45s;
}
header.learningchain-masthead.is-open .learningchain-nav li:nth-child(5){
  transition-delay: 0.55s;
}
header.learningchain-masthead.is-open .learningchain-nav li:nth-child(6){
  transition-delay: 0.65s;
}

/* Closing animation - reverse order */
header.learningchain-masthead:not(.is-open) .learningchain-nav li:nth-child(1){
  transition-delay: 0.55s;
}
header.learningchain-masthead:not(.is-open) .learningchain-nav li:nth-child(2){
  transition-delay: 0.45s;
}
header.learningchain-masthead:not(.is-open) .learningchain-nav li:nth-child(3){
  transition-delay: 0.35s;
}
header.learningchain-masthead:not(.is-open) .learningchain-nav li:nth-child(4){
  transition-delay: 0.25s;
}
header.learningchain-masthead:not(.is-open) .learningchain-nav li:nth-child(5){
  transition-delay: 0.15s;
}
header.learningchain-masthead:not(.is-open) .learningchain-nav li:nth-child(6){
  transition-delay: 0s;
}

/* ========== State: is-open ========== */
header.learningchain-masthead.is-open .learningchain-overlay{
  opacity:1; pointer-events:auto;
  transform:translateY(0);
  transition-delay: 0s;
}
header.learningchain-masthead.is-open .learningchain-dropdown{
  transform:none; opacity:1; pointer-events:auto;
  transition-delay: 0s;
}
header.learningchain-masthead.is-open .learningchain-nav li{
  transform:translateY(0);
  opacity:1;
}

header.learningchain-masthead:not(.is-open) .learningchain-overlay{
  transition-delay: 0.3s;
}
header.learningchain-masthead:not(.is-open) .learningchain-dropdown{
  transition-delay: 0.2s;
}

/* ========== Transform hamburger to X when menu is open ========== */
header.learningchain-masthead.is-open .learningchain-l1 {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 100%;
}

header.learningchain-masthead.is-open .learningchain-l2 {
  opacity: 0;
}

header.learningchain-masthead.is-open .learningchain-l3 {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 100%;
}

/* ========== Active state ========== */
header.learningchain-masthead .learningchain-nav-item-language .learningchain-nav-item-language-item::before{
  content: "";
  background-image: url('https://learningchain.vn/wp-content/uploads/2025/10/LIGHT-EFFECT-NEW-WEBP.webp');
  background-repeat: no-repeat;
  background-position: -10px 45%;
  background-size: contain;
  padding-left: 40px;
  position: absolute;
  width: 75px;
  height: 85px;
  top: -10px;
  left: -15px;
  opacity: 0;
}


header.learningchain-masthead .learningchain-nav-item-language .active.learningchain-nav-item-language-item::before {
  opacity: 1;
}



/* Mỗi nhóm = 1 dòng: menu cha + menu con */
header.learningchain-masthead .learningchain-nav-group{
  display:flex;
  gap: 60px;                  
}

/* Menu cha bên trái giữ style cũ */
header.learningchain-masthead .learningchain-nav-item{
  color:#838383;
  text-decoration:none;
  font-size: 65px;
  margin-left: 3.5%;
  transition:opacity .3s ease, color .3s ease;
  font-family: 'SVN-Gilroy Bold', sans-serif;
}

/* Cột menu con bên phải */
header.learningchain-masthead .learningchain-sub-nav{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:32px;
  padding-top: 15px;

  /* Ẩn mặc định */
  max-height:0;
  opacity:0;
  pointer-events:none;
  transform:translateX(20px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

/* Item con */
header.learningchain-masthead .learningchain-sub-link{
  font-size:22px;
  color:#9e9e9e;
  text-decoration:none;
  font-weight:400;
  white-space:nowrap;
  /*transition:color .5s ease, opacity .5s ease;*/
  position: relative;
}

header.learningchain-masthead .learningchain-sub-link::before {
    content: "";
    position: absolute;
    background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/LIGHT-EFFECT-HEADER-IMAGE.webp);
    background-repeat: no-repeat;
    background-position: left 60%;
    background-size: contain;
    width: 80px;
    height: auto;
    aspect-ratio: 128/189;
    padding-left: 60px;
    top: -30px;
    left: -70px;
    opacity: 0;
}

header.learningchain-masthead .is-active.learningchain-sub-link::before, header.learningchain-masthead .learningchain-sub-link:hover:before {
    opacity: 1;
}
header.learningchain-masthead .learningchain-sub-link:hover, header.learningchain-masthead .is-active.learningchain-sub-link  {
    color: #fff;
}



/* ======== TRẠNG THÁI ACTIVE / HOVER ======== */

/* Khi hover nhóm hoặc nhóm có class is-active -> mở menu con */
header.learningchain-masthead .learningchain-nav-group:hover .learningchain-sub-nav,
header.learningchain-masthead .learningchain-nav-group.is-active .learningchain-sub-nav{
  max-height:200px;      /* đủ cao cho các item con; chỉnh tùy ý */
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

/* Đồng thời đổi màu menu cha khi hover / active */
header.learningchain-masthead .learningchain-nav-group:hover .learningchain-nav-item,
header.learningchain-masthead .learningchain-nav-group.is-active .learningchain-nav-item{
  color: #fff;
  background-image: url('https://learningchain.vn/wp-content/uploads/2025/11/four-star-shape-active-header.webp');
  background-repeat: no-repeat;
  background-position: left 60%;
  background-size: 60px 60px;
  padding-left: 60px;
}

/* Responsive nhỏ hơn – cho dễ đọc */
@media (max-width: 1024px){
  header.learningchain-masthead .learningchain-nav-group{
    flex-direction:column;
    gap:8px;
  }
  header.learningchain-masthead .learningchain-nav-item{
    font-size:40px;
    margin-left:2%;
  }
  header.learningchain-masthead .learningchain-sub-nav{
    gap:18px;
  }
  header.learningchain-masthead .learningchain-sub-link{
    font-size:18px;
  }
}

@media (max-width: 1439px) {
  header.learningchain-masthead .learningchain-nav a.learningchain-nav-item{
     font-size: 36px;
  } 
  header.learningchain-masthead .learningchain-nav-item-language a{
    font-size: 28px;
  } 
  header.learningchain-masthead .learningchain-nav-item-language .learningchain-nav-item-language-item::before{
    top: -14px;
    width: 58px;
    height: 67px;
    left: -6px;
  } 
  header.learningchain-masthead .learningchain-nav .learningchain-sub-link {
      font-size: 24px;
  }
  header.learningchain-masthead .learningchain-sub-link::before {
     width: 55px;
     top: -23px;
     left: -50px;
  }
  header.learningchain-masthead .learningchain-sub-nav{ 
     margin-left: 90px; 
  }
}

header.learningchain-masthead #learningchainDropdown  .is-active.learningchain-nav-group{
  display: none;
}


header.learningchain-masthead.is-open #learningchainDropdown .is-active.learningchain-nav-group{
  display: flex;
}

@media (max-width: 768px) {
  header.learningchain-masthead .learningchain-nav .learningchain-nav-item {
    margin-left: 2%;
  }
  
  header.learningchain-masthead .learningchain-nav-item-language a{
    font-size: 30px;
    margin-left:5%;
  }
  header.learningchain-masthead .learningchain-nav-item-language a.active {
    background-size: 60px 55px;
  }
  header.learningchain-masthead .learningchain-nav-item-language a:nth-child(1) {
    margin-left: 0;
  }
  header.learningchain-masthead .learningchain-nav {
    padding: 55px 24px 16px;
  }
  
  header.learningchain-masthead .learningchain-nav a.learningchain-nav-item{
     font-size: 24px;
  } 
  header.learningchain-masthead .learningchain-nav-item-language a{
    font-size: 18px;
  } 
  header.learningchain-masthead .learningchain-nav .learningchain-sub-link {
      font-size: 20px;
  }
  header.learningchain-masthead .learningchain-sub-link::before {
     width: 40px;
     top: -18px;
     left: -50px;
  }
  header.learningchain-masthead .learningchain-sub-nav{ 
     margin-left: 90px; 
  }
  
}