/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 0.833vw; /* 16px / 1920 * 100 = 0.833vw */
  line-height: 1.4;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

:root {
  --safe-area-bottom: 0px; /* fallback */
  --fab-bottom-vv: 0px;   /* updated by JS using visualViewport */
}
@supports (bottom: env(safe-area-inset-bottom)) {
  +  :root { --safe-area-bottom: env(safe-area-inset-bottom); }
}
/* Header Styles */
.header {
  background: #fff;
  height: 4.167vw; /* 80px / 1920 * 100 = 4.167vw */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  box-shadow: 0 0.104vw 0.208vw rgba(0,0,0,0.1); /* 2px 4px / 1920 * 100 */
  padding-left: 13.021vw; /* 250px / 1920 * 100 = 13.021vw */
  padding-right: 13.021vw; /* 250px / 1920 * 100 = 13.021vw */
  width: 100%;
}

.container {
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  margin: 0 auto;
  overflow-x: hidden; /* Thêm dòng này */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 2.083vw; /* 40px / 1920 * 100 = 2.083vw */
}

/* Logo Styles */
.logo {
  display: flex;
  align-items: center;
  gap: 0.521vw; /* 10px / 1920 * 100 = 0.521vw */
}

.logo-icon {
  object-fit: contain;
  width: 3.75vw;
  height:100%;
}

.logo-line1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.938vw; /* 18px / 1920 * 100 = 0.938vw */
  line-height: 1;
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2.083vw; /* 40px / 1920 * 100 = 2.083vw */
  align-items: center;
  font-size: 1.146vw; /* 22px / 1920 * 100 = 1.146vw */
  font-weight: normal;
  width: 100%;
  justify-content: center;
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  text-decoration: none;
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05vw; /* 16px / 1920 * 100 = 0.833vw */
  font-weight: 500;
  transition: color 0.3s ease;
  min-width: fit-content;
}

.nav-menu a:hover {
  color: #666;
}
.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
  justify-content: space-between;
}

.hamburger-menu span {
  width: 100%;
  height: 0.15vw;
  background-color: #000;
  transition: all 0.3s ease;
}

/* Animation for hamburger menu */
.hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(0.35vw, 0.35vw);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(0.35vw, -0.35vw);
}

/* Hero Section - Đảm bảo zoom hoạt động */
.hero {
  height: 45.313vw; /* 870px / 1920 * 100 = 45.313vw */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4.427vw; /* 85px / 1920 * 100 = 4.427vw */
}

/* Hero Slider Styles */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.slide {
  width: 33.333%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.slide-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50vw; /* 960px / 1920 * 100 = 50vw */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

/* Dots indicator */
.slider-dots {
  position: absolute;
  bottom: 1.875vw; /* 36px / 1920 * 100 = 1.875vw */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.521vw; /* 10px / 1920 * 100 = 0.521vw */
  z-index: 4;
}

.dot {
  width: 1.25vw; /* 24px / 1920 * 100 = 1.25vw */
  height: 1.25vw; /* 24px / 1920 * 100 = 1.25vw */
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s ease;
}

.dot.active {
  background: white;
}

.footerHero{
  background-image: url('../img/footer_hero@3x.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 5.208vw; /* 100px / 1920 * 100 = 5.208vw */
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: center;
  justify-content: flex-start;
  object-fit: cover;
  left: 50%;
  transform: translateX(-50%);
  gap: 0.521vw; /* 10px / 1920 * 100 = 0.521vw */
  z-index: 3;
}
.detail_footerHero {
  font-family: Lato, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.677vw; /* 13px / 1920 * 100 = 0.677vw */
  left: 6.25vw; /* 120px / 1920 * 100 = 6.25vw */
  z-index: 4;
  width: 36.073vw; /* 635px / 1920 * 100 = 33.073vw */
  color: #fff;
  bottom: 1.25vw; /* 24px / 1920 * 100 = 1.25vw */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  padding-left: 3vw;
  text-align: justify;
}
.hero-button_kp{
  position: absolute;
  bottom: 14vw;
  left: 24vw;
}
.event-button_kp{
  position: absolute;
  bottom: 5vw;
  left: 40%;
  transform: translateX(50%);
}
.feat_gl{
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 2vw;
  bottom: 8vw;
  /*transform: translateY(100%);*/
  z-index: 10000;
  gap: 1vw;
}

.feat_gl .icon_feat {
  width: 4vw;
  height: 4vw;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.feat_gl .icon_feat:hover {
  transform: scale(1.1);
}
.icon_feat{
  transition: all 0.3s ease;
  /* Thêm transform để có thể nổi lên */
  transform: translateY(0);
  /* Thêm box-shadow để tạo hiệu ứng nổi */
  box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.2);
  border-radius: 100%;
  width: 4vw;
  height: 4vw;
}
.icon_feat:hover{
  transform: translateY(-0.3vw);
  box-shadow: 0 0.5vw 1vw rgba(0,0,0,0.4);
  transition: 0.4s;

}
.events {
  height: 80.271vw; /* 1330px / 1920 * 100 = 69.271vw */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  object-fit: cover;
}
.title_event{
  margin-top: 0.26vw; /* 5px / 1920 * 100 = 0.26vw */
  height: 14.167vw; /* 272px / 1920 * 100 = 14.167vw */
  width: 41.563vw; /* 798px / 1920 * 100 = 41.563vw */
}
.events-content{
  height: 73.958vw; /* 1420px / 1920 * 100 = 73.958vw */
  width: 100%;
  padding-left: 13.021vw; /* 250px / 1920 * 100 = 13.021vw */
  padding-right: 13.021vw; /* 250px / 1920 * 100 = 13.021vw */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.083vw; /* 40px / 1920 * 100 = 2.083vw */
}
.event_top{
  width: 100%;
  height: 34vw; /* 590px / 1920 * 100 = 30.729vw */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

}
.event_slider{
  margin-top: 2.083vw;
  width: 100%;
  height: 24vw;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.event_sub1,
.event_sub2,
.event_sub3{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.event-image{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mobile_event {
  height: 100%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1vw;
}

.sports {
  background-image: url('../img/bg_sports.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 49vw; /* 820px / 1920 * 100 = 42.708vw */
  width: 100%; /* Thay đổi từ 1920px thành 100% */
  display: flex;
  flex-direction: column;
  object-fit: cover;
 align-items: center;
}

.title_sports{
  display: flex;
  height: 11.82vw;
  width: 60.93vw;
  margin-top: 4.427vw;
}
.sports-content{
  display: flex;
  width:  100%;
  height: 23vw;
  justify-content: space-between;
  gap: 1vw;
  padding-left: 13.02vw;
  padding-right: 13.02vw;
  margin-top: 2vw;
}

.item_sport1,
.item_sport2,
.item_sport3
{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 23.33vw;
  width: 23.28vw;
  object-fit: cover;
  image-rendering: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.item_sport1{
  background-image: url('../img/item_sport1@3x.webp');
}
.item_sport2{
  background-image: url('../img/item_sport2@3x.webp');
}
.item_sport3{
  background-image: url('../img/item_sport3.webp');
}
.item_sport_content{
  display: flex;
  flex-direction: column;
  width: 23.33vw;
  height: 23.33vw;
  justify-content: center;
  align-items: flex-end;
  gap: 3vw;
}
.item_sport_content2{
  width: 23.33vw;
  height: 23.33vw;

}
.item_sport_content3{
  width: 23.33vw;
  height: 23.33vw;
}
.item_sub_sport{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-bottom: 4.9vw;*/
  width: 12.6vw;
  height: fit-content;
  gap: 0.3vw;
  margin-top: 1.5vw;
}
.item_sub_sport2{
  margin-top: 1vw;
  width: 13.4vw;
  gap: 1.1vw;
  /*gap: 0.5vw;*/
}

.item_sub_sport3{
  margin-top: 1.5vw;
  /*margin-bottom: 5vw;*/
  width: 12.25vw;
  gap: 1vw;
  /*gap: 0.8vw;*/
}

.c_item_sub{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.04vw;
  padding-right: 0.4vw;
}
.c_item_sub2{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.04vw;
  padding-right: 0.4vw;
  /*margin-top: 1vw;*/
}
.c_item_sub3{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.04vw;
  padding-right: 0.4vw;
}
.sub_sport_title{
  font-size: 0.75vw;
  font-weight: 700;
  color: white;
  line-height: 1.0vw;
  font-family: 'Montserrat', sans-serif;
 }
.sub_sport_detail{
  font-size: 0.5vw;
  font-weight: 400;
  color: white;
  line-height: 0.8vw;
  font-family: 'Montserrat', sans-serif;
}
.bayern {
  background-image: url('../img/bg_bayern.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 60.854vw; /* 1130px / 1920 * 100 = 58.854vw */
  width: 100%; /* Thay đổi từ 1920px thành 100% */
  display: flex;
  flex-direction: column;
  align-items: center;
  object-fit: contain;
  padding-left: 13.021vw;
  padding-right: 13.021vw;
  position: relative;
}
.bayern_thuoc{
  height: 25vw;
  width: 100%;
  position: relative;
  margin-top: 4.427vw;
  display: flex;
  flex-direction: row;
  /* Thay đổi từ space-between thành flex-start */
  justify-content: flex-start;
  /* Thêm overflow hidden để ẩn items ngoài viewport */
  overflow: hidden;
  /* Thêm transition cho smooth animation */
  transition: all 0.35s ease;
}

.bayern_items_container {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}

.item_bayern {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: fit-content;
  /* Thêm flex-shrink để items không bị co lại */
  flex-shrink: 0;
  /* Tính toán width để hiển thị đúng 4 items */
  width: calc((100% - 6vw) / 4); /* 6vw = gap * 3 (3 khoảng trống giữa 4 items) */
  height: 22vw;

}

/* Cập nhật button styles */
.iconRowL button,
.iconRowR button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5vw;
  border-radius: 50%;
  transition: all 0.3s ease;

}

.iconRowL button:hover,
.iconRowR button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

/* Ẩn button khi không cần thiết */
.iconRowL.hidden,
.iconRowR.hidden {
  opacity: 0.5;
  pointer-events: none;
}
.iconRowL{
  display:  flex;
  position: absolute;
  top: 12vw;
  left:4vw;
  width: 5vw;
  height: 5vw;
}
.iconRowR{
  display:  flex;
  position: absolute;
  top: 12vw;
  right:4vw;
  width: 5vw;
  height: 5vw;
}
.item_imgBayern{
  width: 8.23vw;
  height: 11.79vw;
}
.item_imgBayern_az{
  width: 3vw;
  height: 11.79vw;
}
.item_bayern
{
  align-items: center;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.c_detail_item_bayern{
  display: flex;
  width: 18.48vw;
  height: 100%;
  padding-top: 2vw;

  flex-direction: column;
  gap: 0.5vw;
  align-items: center;
}
.title_item_bayern{
  font-family: 'Montserrat', sans-serif;
  font-size:  1vw;
  font-weight: 600;
  color: white;
  text-align: center;
}
.detail_item_bayern{
  font-family: 'Montserrat', sans-serif;
  font-size:  0.85vw;
  font-weight: 400;
  color: white;
  font-style: italic;
}
.btn_pay_bayern{
  background: black;
 display: flex;
  justify-content: center;
  align-items: center;
  width: 8vw;
  height: 2.1vw;
  border-radius: 3vw;
  color: white;
  text-decoration: none;
  text-align:  center;
  transition: all 0.3s ease;
  /* Thêm transform để có thể nổi lên */
  transform: translateY(0);
  /* Thêm box-shadow để tạo hiệu ứng nổi */
  box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.2);
}
.btn_pay_bayern:hover{
  background: gray;
  transform: translateY(-0.3vw);
  box-shadow: 0 0.5vw 1vw rgba(0,0,0,0.4);
  transition: 0.4s;
}
.bayern_footer{
  width: 100%;
  height: 8vw;
  display:  flex;
  flex-direction: column;
  align-items: center;
}
.title_bayern_footer{
  font-family: 'Montserrat', sans-serif;
  font-size:  1.5vw;
  color: white;
  font-weight: 600;
}
.detail_bayern_footer{
  font-family: 'Montserrat', sans-serif;
  font-size:  1vw;
  color: white;
  padding: 1.5vw 0;
}
.banner_bayern_footer{
  width: 74.06vw;
  height: 34.21vw;
  margin-top: 2vw;
}

.register {
  background-image: url('../img/bg_postNew@3x.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 56.25vw; /* 1080px / 1920 * 100 = 56.25vw */
  width: 100%; /* Thay đổi từ 1920px thành 100% */
  display: flex;
  align-items: center;
  justify-content: space-between;
  object-fit: contain;
  flex-direction: row;
  padding-left:  13.021vw;
  padding-right: 13.021vw;

}

.postNew {
  background-image: url('../img/postNew@3x.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 111.823vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  object-fit: contain;
  padding-left: 13.021vw;
  padding-right: 13.021vw;
}
.c_postNew{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 60vw;
  margin-top: 6.7vw;
}
.title_bvm{
  margin-top: 20vw;
  height: 10.41vw;
  width: 40.41vw;
}
.c_item_postNewL{
  width: 50%;
  height: 30.31vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}
.c_item_postNewR{
  width:  50%;
  height: 30.31vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5vw;
  margin-left: 2.6vw;
}
.item_postNew1{
  width: 35.41vw;
  height: 22.3vw;
}
.title_postNew1{
  font-size: 1.1vw;
  font-weight: 500;
  text-align: center;
  font-family:  'Montserrat', sans-serif;
}
.item_postNewR{
  width: 100%;
  height: 8.85vw;
  display: flex;
  flex-direction: row;
  gap: 0.5vw;
}
.title_postNewR{
  font-size: 0.9vw;
  font-weight: 500;
  text-align: start;
  font-family:  'Montserrat', sans-serif;
  width: 100%;
  line-height: 1.3vw;
}
.img_postNewR{
  width: 14.53vw;
  height: 8.85vw;

}
.register-form {
  background-color: #8B0000;
  border-radius: 15px;
  padding: 3vw;
  width: 35.6vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.register-title {
  color: white;
  font-size: 1.5vw;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2vw;
  font-family: 'Montserrat', sans-serif;
}

.register-form-content {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
}

.register-input {
  padding: 1vw;
  border: none;
  border-radius: 8px;
  font-size: 1vw;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
  color: #333;
}

.register-input::placeholder {
  color: #666;
}

.register-submit {
  background-color: #000;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 1vw;
  font-size: 1vw;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}

.register-submit:hover {
  background-color: #333;
}
.detail_register_form{
  display: flex;
  flex-direction: column;
  width: 35vw;
  height: 13.5vw;
}
.title_detail_register_form{
  font-size: 2vw;
  font-weight: 700;
  color: black;
  font-family: 'Montserrat', sans-serif;
}
.detail_detail_register_form{
  font-size: 1.2vw;
  font-weight: 500;
  color: black;
  font-family: 'Montserrat', sans-serif;
}
.footer {
  background-image: url('../img/bg_footer@3x.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 26.06vw;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  object-fit: contain;
  padding-left: 13.021vw;
  padding-right: 13.021vw;
  justify-content: space-between;
  gap: 6vw;
}
.img_footer{
  width: 8.75vw;
  height: 7.3vw;
}
.footer-group1{
  width: 70vw;
  height: 17.9vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3.5vw;
}
.footer_text{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1vw;
}
.footer-group_detail{
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
}
.icon_footer_text{
  display: flex;
  flex-direction: row;
  gap: 0.5vw;
  align-items: center;
  height: fit-content;
}
.icon_footer1{
  width: 8vw;
  height: 3.2vw;
}
.icon_footer2{
  width: 8vw;
  height: 2.8vw;
}
.title_footer_text{
  font-size: 1vw;
  font-weight: 700;
  color: white;
}.detail_footer_text1,
 .detail_footer_text2{
  font-size: 0.9vw;
   color: white;
  font-weight: 400;
  line-height: 1.2vw;
   display: block;
   text-align: justify;
   text-justify: inter-word;
   text-align-last: justify;
}

.footer-group2{
  width: 36vw;
  height: 17.9vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5vw;
}
.footer-group3{
  width:  31vw;
  height: 17.9vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2.3vw;
}
.footer_social{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;

}
.t_footer_social{
  font-size: 1.1vw;
  font-weight: 700;
  color: white;
  width: fit-content;
}.t_detail_footer_social{
  font-size: 1vw;
  font-weight: 400;
  color: white;
   width: 100%;
  display: flex;
   flex-direction: column;
   align-items: flex-end;
  text-align: end;
}
 .j{

   margin-top: 0.5vw;
   gap:  1.5vw;
 }
 .social-icon-img{
   width: 1.5vw;
   height: 1.5vw;
 }
 .social-icons{
   display: flex;
   flex-direction: row;
   gap: 1.5vw;
 }
@media (max-width: 1360px) {
  .header {
    height: 6vw;
  }
  .logo-icon{
    width: 5vw;
  }
  .hero {
    margin-top: 6vw;
  }
  .nav-menu a {
    font-size:  1.24vw;
  }
  .event_slider{
    gap:  1.6vw;
  }
  .event_sub1,
  .event_sub2,
  .event_sub3,
  .event_sub4 {
    width: 17vw;
    height: 100%;
    display: flex;
    align-items: center;

  }
}

@media (max-width: 768px) {
  html {
    font-size: 1.823vw;
  }

  .header {
    height: 9vw;

  }
  .nav-menu {
   gap:  1vw;
  }
  .nav-menu a {
    font-size:  1.6vw;
  }
  .logo-icon{
    width: 8vw;
  }
  .hero {
    margin-top: 9vw;
  }
  .btn_pay_bayern{
    font-size: 1.5vw;
    height: 4vw;
    width:  14vw;
    border-radius: 12vw;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 1.823vw;
  }

  .header {
    height: 14vw;
    padding:0
  }
  .hero {
    margin-top: 14vw;
  }
  .nav {
    position: relative;
  }

  .nav-menu a {
    font-size:  1.8vw;
  }
  .logo-icon{
    width: 13vw;
  }

  .logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .hamburger-menu {
    display:flex;
    width: 4vw;
    height: 4vw;

    margin-left: 4vw;
  }

  .hamburger-menu span {
    height: 0.8vw;
    width: 5vw;
    background-color: #000;
    transition: all 0.4s ease;
    border-radius: 8px;
  }

  .nav-menu {
    position: fixed;
    top: 14vw;
    left: -100%;
    width: 100%;
    height: calc(100vh - 10vw);
    background-color: #fff;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 4vw;
    transition: left 0.4s ease;
    z-index: 999;
    box-shadow: 0 0.2vw 1vw rgba(0,0,0,0.1);
  }
  .nav-menu.active {
    left: 0;
  }

  .nav-menu a {
    font-size: 4vw;
    padding: 3vw 0;
    width: 90%;
    text-align: center;
    border-bottom: 0.1vw solid #eee;
    display: block;
  }

  .nav-menu a:last-child {
    border-bottom: none;
  }
  /* Animation cho hamburger menu khi active */
  .hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.7vw, 0.7vw);
  }

  .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0.7vw, -0.7vw);
  }
  .events{

    height: 120vw;
  }

  .title_event{
    width:  55vw;
    height: 25vw;
  }
  .events-content{
    height: 100.958vw;
    margin-top: 3.083vw;
    padding: 4vw;
  }
  .event_top{
   width: 100%;
    height: 45.729vw;
  }
  .event_slider{
    margin-top: 1vw;
    width: 100%;
    height: 35vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
  }
  .event_sub1,
  .event_sub2,
  .event_sub3{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2.083vw; /* 40px / 1920 * 100 = 2.083vw */
  }
  .mobile_event{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 2.083vw;
  }
  .sports {
    height: 176vw;
  }
  .sports-content{
    height: 176vw;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    gap: 0;
    justify-content: center;
  }
  .item_sport1{
    background-image: url('../img/item_sport_mb2@3x.webp');
    width: 100%;
    height: 46vw;
  }
  .item_sport2{
    background-image: url('../img/item_sport_mb3@3x.webp');
    width: 100%;
    height: 46vw;
  }
  .item_sport3{
    background-image: url('../img/item_sport_mb2@3x.webp');
    width: 100%;
    height: 46vw;
  }
  .item_sport_content{
    width: 43vw ;
    height: 46vw;
    gap: 2vw;
  }
  .item_sub_sport{
    width: 100%;
    height: 46vw;
    padding-top: 1vw;
    gap: 0vw;
    padding-left: 0.5vw;
  }
  .item_sub_sport2{
    /*margin-bottom: 4vw;*/
    gap: 0vw;
    padding-left: 0.5vw;
  }
  .item_sub_sport3{
    /*margin-bottom:  4vw;*/
    gap: 0vw;
    padding-left: 0.5vw;
  }
  .c_item_sub{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    padding-right: 0.4vw;
  }
  .sub_sport_title{
    font-size: 2.75vw;
    line-height: 3vw;
  }
  .sub_sport_detail{
    font-size: 2vw;
    line-height: 2vw;
  }
  br {
    display: none;
  }
  .bayern {
    height: 350vw;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 40px;
  }
  .iconRowL,.iconRowR {
    display: none;
  }
  .bayern_thuoc{
    height: fit-content;
    width: 100%;
    position: relative;
    margin-top: 4.427vw;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    overflow: auto;
  }
  .bayern_items_container{
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
  }
  .item_bayern{
    width: 50%;
    height: 90vw;
  }
  .item_imgBayern{
    height: 43vw;
    width: 28vw;
  }
  .item_imgBayern_az{
    width: 11vw;
    height: 43vw;
  }
  .c_detail_item_bayern{
    display: flex;
    width: 90%;
    height: 30vw;
    padding-top: 3vw;
    flex-direction: column;
    gap: 2vw;
    align-items: center;
  }
  .title_item_bayern{
    font-size:3vw;
    text-align: center;
  }
  .detail_item_bayern{
    font-size:  2vw;
    text-align: center;
  }
  .btn_pay_bayern{
    font-size: 3.5vw;
    height: 9vw;
    width:  28vw;
    border-radius: 12vw;
  }
  .bayern_footer{
    width: 100%;
    display:  flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
  }
  .title_bayern_footer{
    font-size:  4vw;
    text-align: center;
    width: 70vw;
  }
  .detail_bayern_footer{
    font-size:  2vw;

    padding: 1.5vw 0;
  }
  .banner_bayern_footer{
    width: 100%;
    height: auto;
    margin-top: 4vw;
  }
  .postNew{
    height: 480vw;
    padding-top: 5vw;
    padding-left: 10px;
    padding-right: 10px;
    background-image:  url('../img/postNewMb@3x.webp');

  }
  .c_postNew{
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    gap: 1vw;
  }
  .c_item_postNewL{
    width: 100%;
    height:50vw;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-bottom: 8vw;
  }
  .c_item_postNewR{
    width: 100%;
    height: 61vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4vw;
    margin: 0;
  }
  .item_postNew1{
    width: 100%;
    height: 42vw;
  }
  .title_postNew1{
    font-size: 3vw;
  }
  .btn_postNew1{
    display: none !important;
  }

  .item_postNewR {
    width: 100%;
    height: auto; /* Thay đổi từ 8.85vw thành auto */
    display: flex;
    flex-direction: column; /* Thay đổi từ row thành column */
    gap: 1vw; /* Tăng gap giữa ảnh và text */
    /*margin-bottom: 4vw; !* Thêm margin bottom cho mỗi item *!*/
  }

  .img_postNewR {
    width: 100%;
    height: 42vw;
    order: 1; /* Ảnh sẽ hiển thị trước (trên) */
  }

  .title_postNewR {
    font-size: 3.5vw; /* Tăng font size cho mobile */
    font-weight: 500;
    text-align: center; /* Căn giữa text */
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    line-height: 4.5vw; /* Tăng line height */
    order: 2; /* Text sẽ hiển thị sau (dưới) */
  }
  .register{
    justify-content: flex-end;
    gap: 6vw;
    height: 110vw;
    flex-direction: column-reverse;
  }
  .register-form{
    width: 100%;
    height: 64vw;
  }
  .register-title{
    font-size: 3.5vw;
  }
  .register-input{
    font-size: 3.5vw;
  }
  .register-submit{
    font-size: 3vw;
    width: fit-content;
    border-radius: 1vw;

  }
  .register-form-content{
    gap: 3vw;
  }
  .detail_register_form{
    width: 100%;
    height: fit-content;
    gap: 1vw;
  }
.title_detail_register_form{
  font-size: 4vw;
  width: 100%;
}
.detail_detail_register_form{
  font-size: 2.5vw;
line-height: 4vw;
}
}



/* Store Locator Styles */
.store-locator {
  width: 100%;
  margin: 0 auto;
  padding: 1.5vw; /* Giảm từ 2vw xuống 1.5vw */
  background: #fff;
  border-radius: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
  box-shadow: 0 0.15vw 0.8vw rgba(0,0,0,0.1); /* Giảm shadow */
}

.locator-header {
  text-align: center;
  margin-bottom: 1.5vw; /* Giảm từ 2vw xuống 1.5vw */
}

.locator-title {
  font-size: 1.5vw; /* Giảm từ 2.5vw xuống 2vw */
  color: #333;
  margin-bottom: 1vw; /* Giảm từ 1.5vw xuống 1vw */
}

.search-form {
  display: flex;
  gap: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5vw; /* Giảm từ 2vw xuống 1.5vw */
}

.form-group {
  display: flex;
  gap: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
  align-items: center;
}

.address-input {
  width: 25vw; /* Giảm từ 30vw xuống 25vw */
  padding: 0.8vw 1vw; /* Giảm padding */
  border: 1px solid #ddd;
  border-radius: 0.4vw; /* Giảm từ 0.5vw xuống 0.4vw */
  font-size: 1vw; /* Giảm từ 1.2vw xuống 1vw */
}

.search-btn {
  padding: 0.8vw 1.5vw; /* Giảm padding */
  background: #007cba;
  color: white;
  border: none;
  border-radius: 0.4vw; /* Giảm từ 0.5vw xuống 0.4vw */
  cursor: pointer;
  font-size: 1vw; /* Giảm từ 1.2vw xuống 1vw */
  font-weight: 500;
}

.search-btn:hover {
  background: #005a87;
}

.radius-selector {
  display: flex;
  align-items: center;
  gap: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
}

.radius-selector label {
  font-size: 1vw; /* Giảm từ 1.2vw xuống 1vw */
  color: #666;
}

.radius-selector select {
  padding: 0.8vw 0; /* Giảm padding */
  border: 1px solid #ddd;
  border-radius: 0.4vw; /* Giảm từ 0.5vw xuống 0.4vw */
  font-size: 1vw; /* Giảm từ 1.2vw xuống 1vw */
}

.locator-container {
  display: flex;
  gap: 1vw; /* Giảm từ 2vw xuống 1.5vw */
  height: 30vw; /* Giảm từ 40vw xuống 35vw */
  width: 100%;
}

.store-list-panel {
  width: 21vw; /* Giảm từ 800px xuống 700px */
  background: #f8f9fa;
  border-radius: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
  padding: 1.2vw; /* Giảm từ 1.5vw xuống 1.2vw */
}

.list-header {
  margin-bottom: 1.2vw; /* Giảm từ 1.5vw xuống 1.2vw */
  padding-bottom: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
  border-bottom: 1px solid #ddd;
}

.list-header h3 {
  margin: 0 0 0.8vw 0; /* Giảm từ 1vw xuống 0.8vw */
  font-size: 1.2vw; /* Giảm từ 1.4vw xuống 1.2vw */
  color: #333;
}

.list-controls {
  display: flex;
  gap: 0.6vw; /* Giảm từ 0.8vw xuống 0.6vw */
}

.control-btn {
  padding: 0.4vw 0.8vw; /* Giảm padding */
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 0.25vw; /* Giảm từ 0.3vw xuống 0.25vw */
  cursor: pointer;
  font-size: 0.9vw; /* Giảm từ 1vw xuống 0.9vw */
}

.control-btn:hover {
  background: #5a6268;
}

.store-list {
  max-height: 22vw; /* Giảm từ 35vw xuống 30vw */
  overflow-y: auto;
}

.store-item {
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.5vw; /* Giảm từ 0.6vw xuống 0.5vw */
  padding: 0.5vw; /* Giảm từ 1vw xuống 0.8vw */
  margin-bottom: 0.6vw; /* Giảm từ 0.8vw xuống 0.6vw */
  cursor: pointer;
  transition: all 0.2s ease;
}

.store-item:hover {
  border-color: #007cba;
  box-shadow: 0 0.15vw 0.4vw rgba(0,0,0,0.1); /* Giảm shadow */
}

.store-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.3vw; /* Giảm từ 0.4vw xuống 0.3vw */
  font-size: 0.9vw; /* Giảm từ 1.2vw xuống 1.1vw */
}

.store-address {
  color: #666;
  font-size: 0.7vw; /* Giảm từ 1vw xuống 0.9vw */
  margin-bottom: 0.15vw; /* Giảm từ 0.2vw xuống 0.15vw */
}

.store-phone {
  color: #666;
  font-size: 0.7vw; /* Giảm từ 1vw xuống 0.9vw */
  margin-bottom: 0.15vw; /* Giảm từ 0.2vw xuống 0.15vw */
}

.store-hours {
  color: #666;
  font-size: 0.7vw; /* Giảm từ 1vw xuống 0.9vw */
  margin-bottom: 0.15vw; /* Giảm từ 0.2vw xuống 0.15vw */
}

.store-distance {
  color: #007cba;
  font-size: 0.7vw; /* Giảm từ 1vw xuống 0.9vw */
  font-weight: 500;
  margin-bottom: 0.5vw; /* Giảm từ 0.6vw xuống 0.5vw */
}

.store-actions {
  display: flex;
  gap: 0.5vw; /* Giảm từ 0.6vw xuống 0.5vw */
}

.btn-directions,
.btn-details {
  padding: 0.25vw 0.5vw; /* Giảm padding */
  border: none;
  border-radius: 0.3vw; /* Giảm từ 0.2vw xuống 0.15vw */
  cursor: pointer;
  font-size: 0.8vw; /* Giảm từ 0.9vw xuống 0.8vw */
  font-weight: 500;
}

.btn-directions {
  background: #007cba;
  color: white;
}

.btn-details {
  background: #28a745;
  color: white;
}

.btn-directions:hover {
  background: #005a87;
}

.btn-details:hover {
  background: #218838;
}

.map-panel {
  flex: 1;
  position: relative;
  border-radius: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
  overflow: hidden;
}

.map-controls {
  position: absolute;
  top: 0.6vw; /* Giảm từ 0.8vw xuống 0.6vw */
  left: 0.6vw; /* Giảm từ 0.8vw xuống 0.6vw */
  z-index: 1000;
  display: flex;
  gap: 0.3vw; /* Giảm từ 0.4vw xuống 0.3vw */
}

.map-btn {
  padding: 0.5vw 0.8vw; /* Giảm padding */
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.25vw; /* Giảm từ 0.3vw xuống 0.25vw */
  cursor: pointer;
  font-size: 0.9vw; /* Giảm từ 1vw xuống 0.9vw */
  box-shadow: 0 0.15vw 0.3vw rgba(0,0,0,0.1); /* Giảm shadow */
}

.map-btn:hover {
  background: #f8f9fa;
}

.map-btn.active {
  background: #007cba;
  color: white;
  border-color: #007cba;
}

.map-container {
  width: 100%;
  height: 100%;
  border-radius: 0.8vw; /* Giảm từ 1vw xuống 0.8vw */
}

/* Custom marker styles */
.custom-marker {
  background: #007cba;
  border: 2px solid white;
  border-radius: 50%;
  width: 1.5vw; /* Giảm từ 1.8vw xuống 1.5vw */
  height: 1.5vw;
  box-shadow: 0 0.15vw 0.3vw rgba(0,0,0,0.3); /* Giảm shadow */
}

.custom-marker.selected {
  background: #dc3545;
  transform: scale(1.2);
}

/* Responsive Design */

@media (max-width: 480px) {
  .store-locator {
    margin-top: 20vw;
    padding: 0.8vw;
    height: 420vw;
    margin-bottom: 15vw;
    /*background: red;*/
  }
  .locator-container{
    flex-direction: column;
    height: 100%;
    padding-bottom: 10vw;
    margin-bottom:  0;
  }
  .store-list-panel{
    width: 100%;
   height: 80vw;

  }
  .store-list{
    max-height: 60vw;
    display: flex;
    flex-direction:  column;
    gap: 1vw;
  }
  .store-item{
    padding:2vw;
    border-radius: 1vw;
  }
  .store-info{
    height: 100%;
  }
  .store-name {
    font-size: 4vw;
  }
  .store-address {
    font-size: 3.5vw;
  }
  .locator-title {
    font-size: 3vw;
  }
.store-phone{
  font-size: 2.5vw;
}

.btn-directions,
.btn-details{
  padding: 2vw 7vw;
  border-radius: 1vw;
  font-size: 2.5vw;
}

  .map-panel {
    height: 100%;

  }

  .store-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.3vw; /* Giảm từ 0.4vw xuống 0.3vw */
    font-size: 3vw; /* Giảm từ 1.2vw xuống 1.1vw */
  }

  .store-address {
    color: #666;
    font-size: 2.8vw; /* Giảm từ 1vw xuống 0.9vw */
    margin-bottom: 0.15vw; /* Giảm từ 0.2vw xuống 0.15vw */
  }

  .store-phone {
    color: #666;
    font-size: 2.8vw; /* Giảm từ 1vw xuống 0.9vw */
    margin-bottom: 0.15vw; /* Giảm từ 0.2vw xuống 0.15vw */
  }

  .store-hours {
    color: #666;
    font-size: 2.8vw; /* Giảm từ 1vw xuống 0.9vw */
    margin-bottom: 0.15vw; /* Giảm từ 0.2vw xuống 0.15vw */
  }

  .store-distance {
    color: #007cba;
    font-size: 2.8vw; /* Giảm từ 1vw xuống 0.9vw */
    font-weight: 500;
    margin-bottom: 0.5vw; /* Giảm từ 0.6vw xuống 0.5vw */
  }

  .store-actions {
    display: flex;
    gap: 2.8vw; /* Giảm từ 0.6vw xuống 0.5vw */
  }
  .list-controls{
    gap: 2vw;
  }
  .control-btn {
    font-size: 3.5vw;
    border-radius: 1vw;
    padding: 1vw 2vw;
  }
  .list-header h3 {
    margin: 0 0 2vw 0; /* Giảm từ 1vw xuống 0.8vw */
    font-size: 3vw; /* Giảm từ 1.4vw xuống 1.2vw */

  }
  .address-input{
    font-size: 2.75vw;
    width: 35vw;
    border-radius: 1vw;

  }
  .search-btn{
    font-size: 2.3vw;
    border-radius: 1vw;
    padding: 1vw 2vw;
  }

  .radius-selector label {
    font-size: 2.5vw; /* Giảm từ 1.2vw xuống 1vw */
    color: #666;
    font-weight: 500;
  }

  .radius-selector select {
    padding: 0.6vw 1vw;
    padding-left: 0.5vw;
    border: 1px solid #ddd;
    font-size: 2.5vw; /* Giảm từ 1.2vw xuống 1vw */
    border-radius: 1vw;
  }
.locator-title{
  font-size: 4.5vw;
}
.map-btn{
  font-size: 3.5vw;
  border-radius: 1vw;
  padding: 1vw 2vw;
}
  .map-controls{
    gap: 2vw;
  }
  .locator-header{
    display: flex;
    flex-direction: column;
    gap: 2vw;
  }
  .footer{
    flex-direction: column;
    height: 110vw;
    justify-content: center;
  }
  .footer-group1{
    flex-direction: column;
    width: 100%;
    height:fit-content;
  }
  .img_footer{
    width: 16.18vw;
    height: 14.11vw;
    margin-top: 2vw;
  }
  .footer_text{
    flex-direction: column;
    width: 100%;
  } .footer-group_detail{
    flex-direction: column;
    width: 100%;
  height: fit-content;
  }
  .title_footer_text{
    font-size: 3vw;
  }

  .detail_footer_text1,
  .detail_footer_text2
  {
    font-size: 2.5vw;
    line-height: 3.8vw;
    text-align-last:auto;
  }
  .footer-group2{
    flex-direction: row;
    height: fit-content;
    width: 100%;
    flex-wrap: wrap;
    gap: 3vw;
  }
 .footer-group3{
   flex-direction: row;
   width: 100%;
   align-content:  flex-start;
   align-items: flex-start;
   justify-content: space-between;
   height: fit-content;
 }
 .t_footer_social{
   font-size:  3vw;
 }
 .t_detail_footer_social{
   font-size:  2.5vw;
 }
 .social-icon-img{
   width: 4.5vw;
   height: 4.5vw;
 }
 .footer_social{
   align-items: flex-start;
 }
 .t_detail_footer_social{
   align-items:  flex-start;
 }
 .icon_footer_text{
   height: 10vw;
   align-items: center;
   align-content: center;
   gap: 2vw;
 }
  .icon_footer1{
    width: 24vw;
    height: 9.5vw;
  }
  .icon_footer2{
    margin-top: 1vw;
    width: 20vw;
    height: 7vw;
  }
  .feat_gl{
    right: 3vw;
    /*bottom: 20vw;*/
    bottom: calc(20vw + var(--safe-area-bottom) + var(--fab-bottom-vv));
    gap: 2.5vw;
  }

  .feat_gl .icon_feat {
    width: 10vw;
    height: 10vw;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .hero-button_kp{
    width: 4vw;
    height: 4vw;
    bottom: 25vw;
    left: 20vw;
  }
  .event-button_kp{
    left: 4vw;
    bottom: 8vw;
  }
  .hero-button_zzzz{
    font-size: 2vw;
    height: 5vw;
    width: 18vw;
  }
  .hero{
    height: 61vw;
  }
  .slider-dots{
    bottom: 13.875vw;
    gap: 2vw;
  }

  .dot {
    width: 3.25vw; /* 24px / 1920 * 100 = 1.25vw */
    height: 3.25vw; /* 24px / 1920 * 100 = 1.25vw */
  }
  .footerHero{
  height: 13vw;
     }
  .detail_footerHero {
    font-size: 1.85vw;
    width: 90vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 480px){
  .sub_sport_title br { display: inline; }
  .sub_sport_title { white-space: normal; overflow-wrap: anywhere; }
}