/* Shared small-screen layout; desktop sizing remains in the original styles. */
.mobile-menu-toggle { display: none; }
@media (max-width: 1023px) {
  html { min-width: 0 !important; margin-top: 0 !important; }
  body { min-width: 0 !important; width: 100%; margin: 0; }
  .header-top-bar, .header-mask, .popupPMH { max-width: 100%; min-width: 0 !important; }
  html body header.header.v2024.sticky1.fixed1,
  html body header.header.v2024 { position: relative !important; top: auto !important; height: auto !important; min-width: 0; }
  .header.v2024 .header__top, .header.v2024 .header__top > div,
  .header.v2024 .header__main, .header.v2024 .header__main > div {
    width: 100% !important; min-width: 0 !important; max-width: 100%; margin: 0; height: auto;
  }
  .header.v2024 .header__top > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; box-sizing: border-box; }
  .header.v2024 .header__logo { display: block !important; flex: 0 0 100%; margin: 0; width: auto; }
  .header.v2024 .header__logo i { max-width: 100%; }
  .header.v2024 .header__search { order: 2; width: 100% !important; margin: 0; flex: 1 0 100%; }
  .header.v2024 .header__search input { font-size: 16px; min-height: 44px; }
  .header.v2024 .profile, .header.v2024 .voucher666,
  .header.v2024 .header__cart, .header.v2024 .header__address { display: block; position: relative; left: auto; right: auto; margin: 0; width: auto; max-width: 100%; flex: 1 1 auto; }
  .header.v2024 .header__address { min-height: 44px; }
  .header.v2024 .header__main { display: block !important; position: relative; padding: 0 8px 8px; box-sizing: border-box; }
  .header .main-menu.s666-menu, .main-menu { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 0 !important; padding: 0 !important; }
  .header .main-menu.s666-menu > li, .main-menu > li { min-width: 0; margin: 0; padding: 0; }
  .header .s666-menu > li > a, .header .s666-menu summary,
  .main-menu > li > a, .main-menu > li > details > summary {
    min-height: 44px; white-space: normal !important; overflow-wrap: anywhere; padding: 10px 8px; font-size: 12px; line-height: 1.5;
  }
  .header .s666-menu .s666-submenu, .main-menu .submenu {
    position: static !important; min-width: 0 !important; width: 100%; max-width: 100%; margin: 0; padding: 4px; box-sizing: border-box;
  }
  .header .s666-menu .s666-submenu a, .main-menu .submenu a { min-height: 44px; white-space: normal !important; overflow-wrap: anywhere; padding: 10px 8px; font-size: 13px; }
  section.detail.detailv2 { width: 100% !important; max-width: 100%; min-width: 0 !important; margin: 0 auto; padding: 16px 12px !important; box-sizing: border-box; }
  .detail .breadcrumb { display: flex; flex-wrap: wrap; white-space: normal; width: 100%; padding: 0; }
  .detail .product-name { display: flex; flex-wrap: wrap; width: 100%; }
  .detail .product-name h1 { width: 100%; white-space: normal; font-size: 22px; line-height: 1.4; }
  .detail .box_main { display: flex !important; flex-direction: column; width: 100%; gap: 20px; }
  .detail .box_left, .detail .box_right { float: none !important; width: 100% !important; min-width: 0; max-width: 100%; margin: 0 !important; padding: 0; }
  .detail .s666-product-banner { padding: 12px !important; }
  .detail img { max-width: 100%; }
  #s666-promo, #s666-offers, #s666-payment { max-width: 100% !important; width: 100%; }
  .detail .tabs, .detail .tab-content, .detail .specification-item,
  .detail .box-specifi, .detail .policy { width: 100%; max-width: 100%; box-sizing: border-box; }
  .detail .box-specifi .text-specifi > li { display: flex; flex-wrap: wrap; gap: 8px; }
  .detail .box-specifi .text-specifi > li > aside { width: auto !important; min-width: 0; flex: 1 1 55%; overflow-wrap: anywhere; }
  .detail .box-specifi .text-specifi > li > aside:first-child { flex: 1 1 35%; }
  .detail .box-specifi .text-specifi span { max-width: 100%; width: auto; }
  .detail .policy__list { display: block; }
  .detail .policy__list > li { width: 100%; }
  .detail .gamecombo, .detail .listproduct, .detail .list-viewed-products { max-width: 100%; overflow-x: auto; }
  .detail .gamecombo > ul { display: flex; overflow-x: auto; max-width: 100%; }
  .detail .gamecombo > ul > li { flex: 0 0 180px; }
  .detail .article, .detail .article__content, .detail .box-article { max-width: 100%; width: auto; }
  .detail table { display: block; max-width: 100%; overflow-x: auto; }
  .footer.v2024, .footer.v2024 > section, .footer.v2024 .footer__top { min-width: 0; width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .footer.v2024 .footer__top { display: flex; flex-wrap: wrap; padding: 20px 16px; gap: 20px; }
  .footer.v2024 .footer__col { float: none; width: calc(50% - 10px) !important; min-width: 0; overflow-wrap: anywhere; }
  .footer.v2024 .copyright { min-width: 0; padding: 16px; }
  .footer.v2024 .copyright > section { width: 100%; min-width: 0; }
  .locationbox-v2, .locationbox__popup { max-width: calc(100vw - 24px); box-sizing: border-box; }
  main, article, .banner { min-width: 0; overflow-wrap: anywhere; }
  .table-scroll { max-width: 100%; }
}
@media (max-width: 1023px) {
  html body { padding-top: 0 !important; }
  .header-top-bar, .header-mask { display: none !important; height: 0 !important; }
  html body header.header.v2024 { margin: 0 !important; }
  .header.v2024 .header__top > div, header .brand {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    gap: 10px; padding: 16px 14px; min-height: 74px;
  }
  .header.v2024 .header__logo { flex: 1 1 auto; min-width: 0; }
  .header.v2024 .header__logo > span { font-size: clamp(23px, 5.9vw, 30px) !important; line-height: 40px !important; }
  .header.v2024 .header__search, .header.v2024 .profile,
  .header.v2024 .voucher666, .header.v2024 .header__cart,
  .header.v2024 .header__address, header .brand > p { display: none !important; }
  header .mobile-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto;
    min-height: 44px; padding: 10px 12px; background: #211331; color: #ffe5a0;
    border: 1px solid #654240; border-radius: 10px; font: 700 12px/1 Arial,sans-serif; cursor: pointer;
  }
  .mobile-menu-toggle > span { font-size: 20px; }
  header.mobile-menu-ready:not(.mobile-menu-open) #mobile-navigation { display: none !important; }
  header.mobile-menu-open #mobile-navigation { display: block !important; }
  .header.v2024 .header__main, header > nav { padding: 0 12px 12px; }
  .header .main-menu.s666-menu, header .main-menu { gap: 8px; align-items: start; }
  header .main-menu > li:has(details[open]) { grid-column: 1 / -1; }
  .header .s666-menu details[open] .s666-submenu, header .main-menu details[open] .submenu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  .header .main-menu.s666-menu > li, header .main-menu > li {
    background: #fff7d6; border: 1px solid #b98c3040; border-radius: 10px; overflow: hidden;
  }
  .header .s666-menu > li > a, .header .s666-menu summary,
  header .main-menu > li > a, header .main-menu > li > details > summary {
    display: flex; align-items: center; justify-content: flex-start; gap: 6px;
    min-height: 52px; padding: 12px 10px; color: #291b32; font-size: 12px; font-weight: 700;
  }
  .header .s666-menu summary > span { font-size: 10px !important; margin-left: auto; }
  .header .s666-menu .s666-submenu, header .main-menu .submenu {
    border: 0; border-top: 1px solid #d8bf86; border-radius: 0; background: #fffdf5; box-shadow: none;
  }
  .header .s666-menu .s666-submenu a, header .main-menu .submenu a { font-weight: 400; font-size: 13px; }
  header .mobile-menu-toggle:focus-visible, header .main-menu a:focus-visible,
  header .main-menu summary:focus-visible { outline: 3px solid #883aba; outline-offset: -3px; }
  section.detail.detailv2 { margin-top: 0 !important; padding-top: 18px !important; }
  .detail .product-name h1 { flex: 0 0 100%; min-width: 0; max-width: 100%; }
}
@media (max-width: 600px) {
  .footer.v2024 .footer__col { width: 100% !important; }
  .detail .product-name h1 { font-size: 20px; }
  .detail .tabs { overflow-x: auto; }
  .detail input:not([type=checkbox]):not([type=radio]), .detail textarea, .detail select { max-width: 100%; font-size: 16px; }
  #s666-promo .promo-button, #s666-payment .payment-button { min-height: 48px; }
}