/* ============================================================
   BS5 Theme — Responsive overrides
   ============================================================ */

/* ── Large desktop hover dropdown ── */
@media (min-width: 992px) {
  .main-nav .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: nvDropIn 0.18s ease;
  }
  .dropdown-submenu { position: relative; }
  .dropdown-submenu > .dropdown-menu {
    display: none;
    top: 0;
    left: 100%;
    margin-top: 0;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    animation: nvDropIn 0.18s ease;
  }
  .main-nav .navbar-nav { gap: 8px; }
}

/* ── Tablet ── */
@media (max-width: 991.98px) {
  .hero-section { min-height: auto; padding: 60px 0 0; }
  .hero-img-wrap { margin-top: 36px; }
  .hero-img-wrap img { max-height: 380px; }
  .hero-float-badge.top    { top: 8%; left: -4%; }
  .hero-float-badge.bottom { bottom: 10%; right: -4%; }

  .usp-grid { grid-template-columns: repeat(2,1fr); }

  .main-nav .navbar-collapse {
    /* Thoát ra ngoài container padding để full-width */
    margin-left: -12px;
    margin-right: -12px;
    padding: 8px 16px 16px;
    background: var(--p);
  }
  /* Nav-link bên trong collapse: chữ trắng trên nền xanh */
  .main-nav .navbar-collapse .nav-link {
    padding: 10px 4px !important;
    border-bottom: 1px solid var(--p2) !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .main-nav .navbar-collapse .nav-link:hover { color: #fff !important; }
  /* Ẩn underline animation trên mobile */
  .main-nav .nav-link::before { display: none; }
  /* Caret cho menu item có sub-menu: flex để đẩy ▼ sang phải */
  .main-nav .navbar-nav .nav-item.dropdown > .nav-link {
    display: flex;
    align-items: center;
  }
  .main-nav .navbar-nav .nav-item.dropdown > .nav-link::after {
    content: '\25BC' !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    margin-left: auto !important;
    padding-left: 8px;
    font-size: 0.5em;
    opacity: 0.65;
    color: #fff;
  }
  .btn-nav-zalo { margin-top: 12px; text-align: center; display: block; background: #fff !important; color: var(--p) !important; }

  /* Dropdown cấp 1 mobile: nền xanh đậm hơn, chữ trắng */
  .main-nav .navbar-nav .dropdown-menu {
    position: static !important;
    transform: none !important;
    top: auto !important; left: auto !important;
    background: var(--p2);
    box-shadow: none; border: none; border-radius: 0;
    border-left: 3px solid var(--p3);
    padding: 4px 0; margin-left: 1rem;
    animation: nvDropIn 0.2s ease;
  }
  .main-nav .navbar-nav .dropdown-menu .dropdown-item {
    padding: 10px 0 10px 0.75rem;
    border-bottom: 1px solid var(--p3);
    white-space: normal;
    color: rgba(255,255,255,0.85) !important;
  }
  .main-nav .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: var(--p3);
    color: #fff !important;
  }
  /* Dropdown-submenu cấp 2: ẩn mặc định, mở/đóng bằng nút toggle JS */
  .dropdown-submenu > .dropdown-menu {
    display: none;
  }
  .dropdown-submenu > .dropdown-menu.show {
    display: block !important;
  }
  /* Nút toggle submenu cấp 2 (inject bởi JS) */
  .submenu-toggle-btn {
    position: absolute; right: 0; top: 0;
    height: 100%; padding: 0 14px;
    background: none; border: none; border-left: 1px solid rgba(255,255,255,0.2);
    cursor: pointer; color: rgba(255,255,255,0.7); font-size: 12px;
    display: flex; align-items: center;
  }
  .submenu-toggle-btn .arrow { display: inline-block; transition: transform .2s; }
  .submenu-toggle-btn.open .arrow { transform: rotate(180deg); }
  /* li.dropdown-submenu cần position relative để chứa nút absolute */
  .main-nav .navbar-nav .dropdown-menu li.dropdown-submenu {
    position: relative;
  }
  .main-nav .navbar-nav .dropdown-menu li.dropdown-submenu > .dropdown-item {
    padding-right: 3rem;
  }
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
  .hero-section h1 { font-size: 28px; }
  .hero-img-wrap img { max-height: 280px; }
  .hero-float-badge { padding: 8px 12px; }
  .hfb-n { font-size: 12px; }
  .hfb-l { font-size: 10px; }

  .usp-grid { grid-template-columns: 1fr; }
  .usp-big { font-size: 36px; }

  .trust-bar .d-flex { flex-wrap: wrap; justify-content: center; gap: 12px !important; }

  .zalo-float span { display: none; }
  .zalo-float { padding: 14px; border-radius: 50%; }

  .hero-stats .d-flex { gap: 20px !important; }
  .stat-n { font-size: 22px; }
}