.main-nav {
  background: #d40000;
  color: #fff;
  font-weight: 600;
  position: relative;
  z-index: 1000;
}

.main-nav .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.logo img {
  height: 38px;
  margin-right: 20px;
  vertical-align: middle;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-menu li {
  position: relative; /* 👈 cần thiết để submenu bám vào cha */
}

.nav-menu a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.nav-menu a:hover {
  background: #b30000;
  color: #fff;
}

/* ============ DROPDOWN MENU ============ */
.dropdown .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 180px;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  z-index: 2000;
}
.dropdown:hover .submenu {
  display: block;
}
.dropdown:hover > .submenu {
  display: block; /* 👈 khi hover cha mới show con */
}

.submenu li {
  display: block;
  width: 100%;
}

.submenu li a {
  padding: 10px 14px;
  color: #333;
  font-weight: 500;
}

.submenu li a:hover {
  background: #f5f5f5;
  color: #c00;
}

/* HOME ICON */
.fa-house {
  font-size: 1rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .main-nav .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-menu {
    flex-wrap: wrap;
  }

  .submenu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
  }
}
/* --- FIX MENU VIETLOTT KHÔNG XỔ --- */
.site-header,
.site-header__top,
.main-nav,
.main-nav .container {
  position: relative;
  overflow: visible !important; /* Cho phép submenu hiển thị ra ngoài */
  z-index: 1000;
}


/* Chỉ hiển thị 3 mục trên mobile (≤ 992px) */
@media (max-width: 992px){
  .main-nav .nav-menu{
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;      /* tránh vỡ dòng nếu chữ to */
    -webkit-overflow-scrolling: touch;
  }
  .main-nav .nav-menu > li{ display: none; }

  /* Giữ lại 3 mục: 1=Home, 2=XSMB, 5=VIETLOTT */
  .main-nav .nav-menu > li:nth-child(1),
  .main-nav .nav-menu > li:nth-child(2),
  .main-nav .nav-menu > li:nth-child(3),
  .main-nav .nav-menu > li:nth-child(4){
    display: flex;
  }
}
/* 1) Mặc định ẩn panel */
.drawer-menu .acc-section .acc-panel {
  display: none;
}

/* 2) Khi <details> mở, hiển thị panel */
.drawer-menu .acc-section[open] .acc-panel {
  display: block;
}

/* 3) Làm summary dễ bấm + loại dấu mũi tên mặc định (nếu có) */
.drawer-menu .acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between; /* text trái, caret phải */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.drawer-menu .acc-summary::-webkit-details-marker {
  display: none; /* ẩn marker mặc định trên iOS/Safari */
}

/* 4) Xoay caret khi mở */
.drawer-menu .acc-section .acc-caret {
  transition: transform .2s ease;
}

.drawer-menu .acc-section[open] .acc-caret {
  transform: rotate(180deg);
}

/* 1) Khoảng cách giữa các mục, cho cả details và link */
.drawer-menu .acc-section,
.drawer-menu .acc-link { margin: 8px 0; }

/* 2) Card box chung: áp cho summary và link để giống hệt nhau */
.drawer-menu .acc-summary,
.drawer-menu .acc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;

  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line, #eee);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);

  font-weight: 600;
  color: var(--text, #111);
  text-decoration: none;         /* để <a> không gạch chân */
}

/* 3) Icon trái đồng bộ */
.drawer-menu .acc-summary > span i,
.drawer-menu .acc-link > span i {
  width: 20px;
  text-align: center;
  margin-right: .25rem;
}

/* 4) Caret phải đồng bộ */
.drawer-menu .acc-caret { opacity: .7; }

/* 5) Hover/active */
.drawer-menu .acc-summary:hover,
.drawer-menu .acc-link:hover { background: var(--hover, #f6f6f6); }

/* 6) Ẩn marker mặc định của <summary> */
.drawer-menu .acc-summary::-webkit-details-marker { display: none; }

/* Extra small devices: tighten spacing to avoid wrap overflow */
@media (max-width: 480px){
  .nav-menu a { padding: 8px 10px; font-size: 0.9rem; }
}
@media (max-width: 360px){
  .nav-menu a { padding: 8px 8px; font-size: 0.85rem; }
}