* {
  font-family: "Inter", sans-serif;
}

main {background: linear-gradient(to bottom, #ffffff 0%, #ffffff 40%, #f3ffff 70%, #f3ffff 100%);}
img {width: 100%; max-width: 100%; height: auto;}
h3 {font-size: 2.125rem;}
h2 {font-size: 2.5rem;}

#mobileMenuToggle {
  display: none;
  background: #fff;
  color: #000;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.menu-item > a {
  position: relative;
  font-weight: bold;
  color: #002172;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  display: block;
  text-decoration: none;
}

.menu-item > a:hover {
  color: #0033cc;
}

.btn-register {
  background: linear-gradient(90deg,rgba(41, 171, 226, 1) 0%, rgba(0, 51, 204, 1) 100%);
  color: white;
  font-weight: bold;
  border-radius: 25px;
  padding: 6px 20px;
  text-decoration: none;
  border-width: 0;
}

.sub-menu {
  position: relative;
}

/* First-level submenu */
/*.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 180px;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 100;
}*/

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 200px;
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.menu-item {position: relative;}

/*.menu-item:hover > .sub-menu {
  display: block;
}*/

/* Second-level submenu (dropdown of dropdown) */
.sub-menu .menu-item-has-children {
  position: relative;
}

/*.sub-menu .sub-menu {
  top: 0;
  left: 100%;
  background: #fff;
}*/

.sub-menu .sub-menu {
  top: 0;
  left: 100%;
  transform: translateX(10px);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.sub-menu li a {color: #002172; font-weight: 500; text-transform: uppercase; font-size: 0.95em;white-space: nowrap;}

/* Arrow indicator optional */
.menu-item-has-children > a::after {
  content: "";
  border: solid #002172;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 6px;
  margin-top: -2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: 16px;
}
.sub-menu .menu-item-has-children > a::after {
  content: " ▶";
  position: absolute;
  right: 10px;
  top: 12px;
}

.banner-page {height: 300px}
.banner-page h1 {font-size: 46px; font-weight: 600; margin: 0; color: #fff; letter-spacing: 3px}
.banner-page .container, .banner-page .container .row {height: 100%}
.section-video, .main-content {padding: 60px 0}
.btn-v {
  background: #fff;
  color: #002172;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.section-info {padding: 60px 0;}
.section-group-bg {background-size: 90%; height: 100% !important; display: flex; flex-direction: column; justify-content: center; margin-bottom: 30px; margin-top: -1px}
.event-info h3 {font-size: 47px; color: #002BB5; font-weight: 700;}
.event-info p {font-size: 19px; color: #002BB5; font-weight: 700;}
.section-title {
  display: flex;
  color: #002BB5;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 34px;
}
.section-title sup {text-transform: lowercase !important}
.section-title h3 {font-size: 34px; font-weight: 700}
.section-title .text-primary {color: #002BB5 !important;}
.col-highlight {position: relative; padding: 35px 35px 35px 65px}
.icon-highlight {
  display: block;
  position: absolute;
  top: 28px;
  left: 12px;
}
.col-highlight.color-1 {background: #F1F5FF}
.col-highlight.color-2 {background: #F3FFFF}

.section-title .dot {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 15px;
  margin-top: 7px;
  vertical-align: middle;
}

.about-dot {background-color: #e60012;}
.event-dot {background-color: #00b2b2;}
.black-dot {background-color: #000;}
.red-dot {background-color: #e60012;}
.highlight-title {
  font-weight: 600;
  font-size: 25px;
  line-height: 28px;
  min-height: 70px;
}

/*.highlight-desc {font-size: 19px;}*/
.section-speakers {padding: 60px 0}
.speaker-section {margin: 0}
.icon-highlight img {width: 40px}
.speaker-info {padding: 35px; background: url('../img/bg_thumb.jpg') 0 0 no-repeat; background-size: cover; background-position-x: right}
.speaker-info h4 {font-size: 21px; color: #002172}
.speaker-info p {font-size: 17px; color: #002BB5; margin: 0; font-weight: 600; line-height: 1.6}
.head-text {font-size: 36px; color: #002172}
.section-guest {padding: 60px 0}
.section-speakers .dot,
.section-guest .dot {margin-top: 9px;}
.head-text {text-transform: initial;}
.inner-avatar {background: #002172}
.speaker-slider .slick-list {
  margin: 0 -30px;
}
.speaker-slider .slick-slide {
  padding: 0 30px;
}
.slick-dots li button:before {font-size: 12px}
.speaker-item h6 {font-size: 17px; color: #002172 !important}
.speaker-item .text-primary {font-size: 16px; color: #002BB5 !important; font-weight: 600}
.bg-sperate {height: 98px; background: url('../img/bg3.png') 0 0 no-repeat; background-size: cover;}
.section-sponsor {background: #fff; padding: 60px 0;}
.col-sponsor-img {display: flex; justify-content: space-between;}
.section-sponsor img {max-height: 80px; object-fit: contain; width: auto;}
.text-sponsor {font-size: 13px; margin-bottom: 30px; font-weight: 500}
.row-first-sponsor {padding-bottom: 45px;}
.timeline {
  position: relative;
  border-left: 1px solid #0039cc;
  padding-left: 20px;
  margin: 60px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 12px;
  background: transparent;
}

.timeline-item {
  position: relative;
  margin-bottom: 45px;
  padding-left: 35px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0px;
  width: 18px;
  height: 18px;
  background-color: #002172;
}

.timeline-time {
  font-weight: bold;
  color: #002BB5;
  margin-bottom: 10px;
  font-size: 1.6em;
  transform: translateY(-2px);
}

.timeline-content {
  border: 1px solid #00b2f0;
  padding: 15px 20px;
  font-size: 1.6em;
  font-weight: 500;
  color: #002172;
  margin-top: 35px;
}

.timeline-subtitle {
  font-size: 13px;
  color: #333;
}

.dropdown-icon {
  transform: translateY(-8px);
}

.timeline-content.collapsible {
  cursor: pointer;
}
.timeline-head {margin: 0; cursor: pointer; line-height: 1.2;}
.timeline-body {line-height: 1.2;}
.timeline-head a {color: #002172; text-decoration: none; font-size: 1rem; font-weight: 600}
.timeline-body, .timeline-body p {font-weight: 400; font-size: 1rem}
.timeline-head img {width: 20px;}
.section-past-event-info {background: #002172; text-align: right; padding: 60px 0;}

.sponsor-row h4{
  font-size: 13px;
  margin-bottom: 20px;
}
.sponsor-row{
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.sponsor-col{margin-bottom: 30px;min-width: 250px; margin-right: 60px;}
.sponsor-list{
  display: flex;
  gap: 50px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.logo-footer {width: 220px; margin-bottom: 15px}

.sub-page{background: #F9FFFF !important;}
.class-pev-l-text {text-align: left;}
.class-pev-r-text {text-align: right;}
.class-pev-r-text h3, .class-pev-l-text h3 {color: #fff; margin-bottom: 1.75rem; font-weight: 600}
.class-pev-r-text p, .class-pev-l-text p {font-size: 1.125rem; color: #fff; margin-bottom: 1.75rem;}
.slick-next {right: -30px; z-index: 9999;}
.slick-prev {left: -30px; z-index: 9999;}
.slick-next:before, .slick-prev:before {color: #000;}
.section-event-slider { background: #002BB5; padding: 90px 0}
.event-slider .slick-slide {padding: 0 5px;}
.event-slider .slick-dots li {margin: 0;}
.event-slider .slick-dots li button:before {color: #fff; opacity: 1;}
.event-slider .slick-dots li.slick-active button:before {opacity: 1; color: black !important}
.event-slider .slick-dots {bottom: -35px;}
.section-past-event-info ul {padding: 0 0 0 15px; list-style-type: decimal;}
.section-past-event-info ul li {color: #fff;}
.about-image {width: 100%; height: 100%; background: #F1F5FF;}
.about-image img {width: 280px}
.about-text {padding: 60px 35px; background: #002BB5}
.about-text h2 {color: #fff; font-weight: 600; margin-bottom: 1rem;}
.about-text p {color: #fff;}
.about-text a {color: #fff;}
.pdt-10 {padding: 5.625rem 0;}

footer {background: #002172; padding: 30px 0 15px}
.foot-menu {display: flex; color: #fff; padding: 0; align-items: baseline;}
.foot-menu li::nth-child(0) {padding-left: 0;}
.foot-menu li {padding:0 15px; list-style-type: none;}
.foot-menu li a {color: #fff; font-size: 19px; text-decoration: none;}
.list-socials {display: flex; height: 100%; justify-content: end; align-items: center;}
.list-socials a {width: 50px}

@media only screen and (min-width: 767px) {

  /* Hover vào submenu cấp 1 để hiện submenu cấp 2 */
  .sub-menu .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Khi hover thì hiện submenu với animation */
  .menu-item:hover > .sub-menu,
  .sub-menu .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}

@media only screen and (max-width: 1024px) {
  .icon-highlight {left: 10px;}
  .section-group-bg {height: auto; padding: 15px;}
  .event-info h3 {font-size: 32px;}
}

/* Menu slide từ trái */
@media (max-width: 1024px) {
  #mobileMenuToggle {
    display: block;
  }

  #navbarNavDropdown {flex-basis: inherit !important;}
  .wrap-btn-regis {display: block !important; padding-right: 15px; font-size: 14px}
  .navbar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 75%;
    max-width: 300px;
    height: 100%;
    background-color: #f4f4f4;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    padding-top: 60px;
  }

  .navbar-nav.show {
    transform: translateX(0);
  }

  .menu-item-has-children > a::after {
    content: "";
    border: solid #002172;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 6px;
    margin-top: -2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 16px;
  }

  .menu-item.open-sub > .sub-menu {
    display: block;
  }

  /* Optional: overlay background */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .menu-overlay.active {
    display: block;
  }

  /* Ẩn submenu mặc định */
  .navbar-nav .sub-menu {
    position: initial;
    transform: initial;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    opacity: 1;
    visibility: initial;
  }

  /* Khi li có class .open-sub thì submenu hiện ra */
  .navbar-nav .menu-item.open-sub > .sub-menu {
    max-height: 500px; /* hoặc đủ lớn để chứa nội dung */
  }

}

@media only screen and (max-width: 992px) {
  .section-info .col-lg-9 {padding-bottom: 30px}
}

@media only screen and (max-width: 768px) {
  .banner-page {height: 240px}
  .banner-page h1 {font-size: 1.5rem}
  .class-pev-r-text h3, .class-pev-l-text h3 {font-size: 1.4rem; margin-bottom: 1.3rem}
  .icon-highlight img.lg-img {width: 32px}
  .icon-highlight img.lg-img-2 {width: 30px}
  .col-highlight {padding: 25px 25px 25px 0}
  .container{padding: 0 25px;}
  #mobileMenuToggle {display: block;}
  .section-speakers {padding: 30px 0 45px}
  .main-content {padding: 15px 0 45px}
  .event-info h3 {font-size: 24px;}
  .event-info p{font-size: 17px;}
  .section-title h3  {font-size: 24px; font-size: 1.2rem}
  .highlight-title {font-size: 22px; font-size: 1.15rem; line-height: 1.35}
  .highlight-title br {display: none;}
  .section-info {padding: 30px 0;}
  .section-title h3 br {display: none;}
  .icon-highlight img {width: 28px}
  .highlight-title {min-height: initial;}
  .col-highlight {padding-left: 50px; margin-bottom: 15px;}
  .speaker-slider .slick-list {margin: 0 !important}
  .slick-arrow {display: none !important;}
  .speaker-section {margin: 0 0 15px 0; padding: 0 10%}
  /*.section-info p,
  .highlight-desc{font-size: 16px; font-size: 0.9rem}*/
  .section-sponsor .row > div {padding-bottom: 30px}
  .row-first-sponsor {padding-bottom: 0}
  .foot-menu, .list-socials {justify-content: center;}
  .btn-register {font-size: 12px}
  .section-guest .dot,
  .section-title .dot{margin-top: 2px;}
  .section-title .dot{width: 18px;height: 18px;}
  .event-info{width: 50%; padding: 15px;}
  .section-group-bg{padding: 0px;}
  .speaker-img, .speaker-info {width: 100% !important;}
  .section-info .col-highlight:nth-child(odd) {background-color: #F3FFFF;}
  .section-info .col-highlight:nth-child(even) {background-color: #F1F5FF;}
  .section-timeline {padding: 0 2% !important}
  .timeline-item {padding-left: 5px; margin-left: 10px; margin-bottom: 35px}
  .timeline-body, .timeline-body p {font-size: 1rem}
  .timeline-head a {font-size: 1rem}
  .timeline-item::before {left: -38px}
  .class-pev-r-text {text-align: left;}
  .timeline-content {margin-top: 25px;}
  .section-guest {padding: 35px 0}
  .top-logo {margin: 0}
  .t-text-2 {order: 2 !important;}
  .wrap-logo-footer {text-align: center;}
  .section-event-slider {padding: 60px 0 35px !important}
  .event-slider .slick-dots {display: none !important;}
  .event-slider .slick-arrow {display: block !important;}
  .event-slider .slick-prev {left: -20px !important}
  .event-slider .slick-next {right: -20px !important}
}

@media only screen and (max-width: 494px){
  .btn-register {padding: 5px 10px; font-size: 10px}
  .top-logo img {width: 120px}
}

@media only screen and (max-width: 425px){
  .speaker-img,.speaker-info{width: 100%}
  .speaker-info{background-image: none; background-color: #f1f5ff; padding: 25px;}
  .speaker-slider .slick-slide{padding: 0 10px;}
  .top-logo img {width: 120px}
  .banner-page h1 {letter-spacing: 1px}
  .banner-page-buttons .btn-v {font-size: 0.77rem}
  .wp-theme-html5blank-stable main {padding-top: 87px !important;}
}