/* ==========================================================================
   LogisQuest — Mobile Home Redesign v3.2 (<= 700px)
   3D Toy / Sunlit Boardgame Aesthetic across all 9 mobile screens.
   Desktop (> 700px) keeps its original composition 100% untouched.
   ========================================================================== */
.home-banner-title-mobile,
.home-mobile-hero-cta,
.home-mobile-hero-facts,
.mx-nav-backdrop,
.mobile-nav-backdrop {
  display: none;
}

.mx-pillar-art-stage,
.mx-nav-subgrid,
.mx-nav-cta-footer {
  display: contents;
}

@media (max-width: 700px) {
  /* ---------- Design Tokens ---------- */
  :root {
    --lq-white: #FFFFFF;
    --lq-cream: #FFFDF7;
    --lq-sky-50: #F0F9FF;
    --lq-sky-100: #E0F2FE;
    --lq-sky-200: #BAE6FD;
    --lq-sky-300: #7DD3FC;
    --lq-sky-400: #38BDF8;
    --lq-sky-500: #0EA5E9;
    --lq-sky-600: #0284C7;
    --lq-sky-700: #0369A1;
    --lq-navy-800: #0F172A;
    --lq-navy-900: #181C28;
    --lq-sun-50: #FFF7ED;
    --lq-sun-100: #FFEDD5;
    --lq-sun-200: #FED7AA;
    --lq-sun-400: #FB923C;
    --lq-sun-500: #FF6B00;
    --lq-sun-600: #EA580C;
    --lq-sun-700: #C2410C;
    --lq-amber-100: #FEF3C7;
    --lq-amber-300: #FCD34D;
    --lq-amber-400: #FBBF24;
    --lq-amber-700: #B45309;
    --lq-ink: #1E293B;
    --lq-ink-soft: #475569;
    --lq-radius: 22px;
    --lq-shadow: 0 14px 32px rgba(2, 132, 199, 0.16);
  }

  /* ---------- Document Flow ---------- */
  html {
    scroll-behavior: smooth;
    scroll-snap-type: none;
  }

  body {
    overflow-x: hidden;
  }

  #homeView {
    overflow: visible;
    height: auto;
    max-height: none;
    color: var(--lq-ink);
    background: var(--lq-sky-50);
  }

  #homeView > section {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 48px 14px;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    scroll-snap-align: none;
  }

  .nautical-scroll-rail {
    display: none !important;
  }

  /* ==========================================================================
     1. FLOATING HEADER & BOARDGAME POPOVER MENU (#header, #mobileNav) — Ảnh 1 & 2
     ========================================================================== */
  .main-header,
  .main-header.scrolled,
  .main-header.header-hidden {
    position: fixed !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    z-index: 1010 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: none;
  }

  .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 12px !important;
    gap: 8px;
    box-sizing: border-box;
  }

  /* Left Floating Pill: Logo LogisQuest */
  .logo-area {
    pointer-events: auto;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 42px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    background: #FFFFFF !important;
    border: 2px solid #BAE6FD;
    box-shadow: 0 4px 0 #7DD3FC, 0 8px 20px rgba(15, 23, 42, 0.16);
    text-decoration: none;
  }

  .site-logo {
    width: 34px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  .logo-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 0.84rem !important;
    line-height: 1.02 !important;
    color: var(--lq-navy-900) !important;
    white-space: nowrap;
  }

  .sub-logo {
    font-size: 0.38rem !important;
    letter-spacing: 1.4px !important;
    margin-top: 1px !important;
    color: var(--lq-sky-700) !important;
    font-weight: 700 !important;
  }

  /* Right Floating Actions: Solid Black "Mua Ngay" Pill + Hamburger Pill */
  .header-actions {
    pointer-events: auto;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .header-actions .nav-delivery-btn {
    width: auto !important;
    min-width: 112px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #181C28 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Ảnh 2 Fix: Hide Header "Mua Ngay" button & Hero bottom CTA when Mobile Menu is open! */
  body.mobile-nav-open #headerDeliveryBtn,
  body:has(#mobileNav.active) #headerDeliveryBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.9) !important;
  }

  body.mobile-nav-open #hero .home-mobile-hero-cta,
  body.mobile-nav-open #hero .home-mobile-hero-facts,
  body:has(#mobileNav.active) #hero .home-mobile-hero-cta,
  body:has(#mobileNav.active) #hero .home-mobile-hero-facts {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .header-actions .nav-delivery-btn .button-label {
    color: #FFFFFF !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    gap: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .header-actions .header-cart-icon {
    width: 14px !important;
    height: 14px !important;
    stroke: #FBBF24 !important;
  }

  #mobileToggle {
    pointer-events: auto;
    flex: none !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    border: 2px solid #BAE6FD !important;
    box-shadow: 0 4px 0 #7DD3FC, 0 8px 20px rgba(15, 23, 42, 0.16) !important;
    transition: background 0.22s ease, transform 0.2s ease;
  }

  #mobileToggle span {
    width: 18px !important;
    height: 2.4px !important;
    margin: 0 !important;
    border-radius: 2px;
    background: #0369A1 !important;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
  }

  #mobileToggle.active {
    background: #FF6B00 !important;
    border-color: #FFF7ED !important;
    box-shadow: 0 4px 0 #C2410C, 0 8px 20px rgba(234, 88, 12, 0.35) !important;
  }

  #mobileToggle.active span {
    background: #FFFFFF !important;
  }

  /* Blurred Backdrop for Popover Menu */
  .mobile-nav-backdrop,
  .mx-nav-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1004;
    background: rgba(12, 34, 64, 0.52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  .mobile-nav-backdrop.active,
  .mx-nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Ảnh 2 Fix: Playful Boardgame Card Drawer (#mobileNav) */
  #mobileNav,
  #mobileNav.mobile-nav {
    position: fixed !important;
    top: 62px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - 76px) !important;
    z-index: 1008 !important;
    padding: 16px 14px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, #FFFDF7 0%, #F0F9FF 100%) !important;
    border: 3px solid #38BDF8 !important;
    box-shadow: 0 8px 0 #0284C7, 0 24px 48px rgba(8, 28, 56, 0.38) !important;
    overflow-y: auto !important;
    transform: none !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    box-sizing: border-box !important;
  }

  #mobileNav.active,
  #mobileNav.mobile-nav.active {
    display: flex !important;
  }

  .mx-nav-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    padding: 2px 4px 10px;
    border-bottom: 2px dashed #BAE6FD;
  }

  .mx-nav-kicker {
    font: 900 11.5px/1.2 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
    color: var(--lq-sky-700);
  }

  .mx-nav-badge {
    font: 800 10.5px/1.2 'Montserrat', sans-serif;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FEF3C7;
    border: 1.5px solid #FBBF24;
    color: #B45309;
    box-shadow: 0 2px 0 #F59E0B;
  }

  #mobileNav > a.mobile-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 9px 12px !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    border: 2px solid #BAE6FD !important;
    box-shadow: 0 3px 0 #7DD3FC !important;
    color: var(--lq-navy-900) !important;
    font: 800 14px/1.2 'Montserrat', sans-serif !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  #mobileNav > a.mobile-link.active {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
    border-color: #0EA5E9 !important;
    box-shadow: 0 3px 0 #0284C7 !important;
    color: #0369A1 !important;
  }

  #mobileNav .mx-nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #FFF7ED;
    border: 1.5px solid #FED7AA;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none;
  }

  #mobileNav .mx-nav-label {
    font: 800 13.5px/1.2 'Montserrat', sans-serif;
    color: inherit;
  }

  #mobileNav .mx-nav-arrow {
    margin-left: auto;
    font-size: 15px;
    font-weight: 900;
    color: #0EA5E9;
  }

  #mobileNav .mobile-dropdown-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 10px 10px !important;
    border-radius: 18px !important;
    background: #E0F2FE !important;
    border: 2px solid #7DD3FC !important;
    box-sizing: border-box !important;
  }

  #mobileNav .mobile-group-title {
    display: block !important;
    font: 900 10.5px/1.2 'Montserrat', sans-serif !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #0369A1 !important;
    text-align: left !important;
    padding: 0 2px !important;
  }

  /* Ảnh 2 Fix: Sub-items without dashes, clean 1-line fit */
  #mobileNav .mx-nav-subgrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #mobileNav .mobile-sub-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 9px 8px !important;
    border-radius: 13px !important;
    background: #FFFFFF !important;
    border: 2px solid #38BDF8 !important;
    box-shadow: 0 3px 0 #0EA5E9 !important;
    color: var(--lq-navy-900) !important;
    font: 800 11.5px/1.2 'Montserrat', sans-serif !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #mobileNav .mobile-sub-link .mx-nav-icon {
    width: 24px;
    height: 24px;
    font-size: 13px;
    border-radius: 7px;
  }

  #mobileNav .mobile-sub-link .mx-nav-label {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Ảnh 2 Fix: Toy Orange/Gold CTA Button inside 340.000₫ Box */
  .mx-nav-cta-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    margin-top: 2px;
    padding: 11px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FFEDD5 100%);
    border: 2px solid #FBBF24;
    box-shadow: 0 4px 0 #F59E0B;
    box-sizing: border-box;
  }

  .mx-nav-price-tag {
    display: flex !important;
    flex-direction: column;
    text-align: left;
  }

  .mx-nav-price-label {
    font: 800 10.5px/1.2 'Montserrat', sans-serif;
    color: #9A3412;
  }

  .mx-nav-price-val {
    font: 900 18px/1.15 'Montserrat', sans-serif;
    color: #EA580C;
  }

  #mobileNav .nav-delivery-btn,
  #sidebarDeliveryBtn {
    width: auto !important;
    min-width: 132px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #FF8A00 0%, #FF5E00 100%) !important;
    border: 2px solid #FFF7ED !important;
    border-bottom: 4px solid #C2410C !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.38) !important;
  }

  #mobileNav .nav-delivery-btn .button-label,
  #sidebarDeliveryBtn .button-label {
    color: #FFFFFF !important;
    font: 900 13.5px/1 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 1px 2px rgba(154, 52, 18, 0.5) !important;
  }

  /* ==========================================================================
     2. HERO BANNER (#hero) — Ảnh 1 Fixes (Solid 3D Toy Button + Balanced Layout)
     ========================================================================== */
  #homeView > #hero,
  #hero {
    position: relative;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: none;
    margin-top: 0;
    padding: 0 !important;
    overflow: hidden;
  }

  #hero .home-banner-wrapper {
    position: relative;
    z-index: 3 !important;
    width: 100%;
    height: 100%;
  }

  #hero .home-banner-img {
    object-fit: cover;
    object-position: center bottom;
  }

  /* Hide duplicate 3D logo inside Hero */
  #hero .home-banner-mobile-logo {
    display: none !important;
  }

  /* CRITICAL FIX FOR ẢNH 1: Remove #hero::after dark overlay that sat on top of .home-banner-wrapper and turned the CTA button muddy brown! */
  #hero::after {
    display: none !important;
    content: none !important;
  }

  /* Ảnh 1 Fix: Lower top headline cluster by ~24px (top: 86px) & lift bottom CTA above mobile browser bar (bottom: 88px) */
  #hero .home-banner-caption {
    position: absolute !important;
    top: 86px !important;
    bottom: 88px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 10 !important;
    pointer-events: none;
  }

  /* Top Polarity: Headline + Subtitle Capsule */
  #hero .home-banner-title-svg-wrapper {
    order: 1;
    margin: 0 !important;
  }

  #hero .game-title-svg {
    display: none !important;
  }

  #hero .home-banner-title-mobile {
    display: block;
    color: var(--lq-white);
    font: italic 900 clamp(32px, 9.2vw, 40px)/1.04 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 0 #0284C7, 0 8px 20px rgba(3, 43, 82, 0.45);
  }

  #hero .home-banner-sub-capsule {
    order: 2;
    margin: 4px auto auto !important; /* Pushes bottom cluster cleanly down while keeping top cluster lower */
    width: auto;
    max-width: 100%;
    padding: 7px 16px;
    gap: 6px;
    box-sizing: border-box;
    border: 2px solid #38BDF8 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 0 #0284C7, 0 8px 18px rgba(3, 43, 82, 0.22) !important;
    clip-path: none !important;
    transform: none !important;
  }

  #hero .home-banner-sub {
    font-size: clamp(12px, 3.4vw, 13.5px);
    line-height: 1.3;
    color: var(--lq-sky-700) !important;
    font-weight: 800;
    text-shadow: none !important;
  }

  #hero .sub-capsule-arrow {
    font-size: 11px;
    color: var(--lq-sun-500) !important;
    font-weight: 900;
    text-shadow: none !important;
  }

  /* Ảnh 1 Fix: 3 Quick-Fact Badges in Solid Ivory/White (#FFFFFF) with Sky-Blue border */
  #hero .home-mobile-hero-facts {
    order: 3;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 6px !important;
    padding: 0;
    list-style: none;
    pointer-events: auto;
  }

  #hero .home-mobile-hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 11px;
    border: 2px solid #38BDF8 !important;
    border-radius: 999px;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 3px 0 #0284C7, 0 8px 16px rgba(15, 23, 42, 0.25) !important;
    color: #0F172A !important;
    font: 800 11.5px/1.2 'Montserrat', sans-serif;
    white-space: nowrap;
    opacity: 1 !important;
  }

  /* Ảnh 1 Fix: 100% Solid 3D Toy Button (#FF6B00, thick 3D bottom rim, bold white text, zero glass transparency) */
  #hero .home-mobile-hero-cta {
    order: 4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-height: 56px;
    padding: 14px 28px;
    border-radius: 999px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FF8A00 0%, #FF6B00 55%, #EA580C 100%) !important;
    border: 2.5px solid #FFF7ED !important;
    border-bottom: 6px solid #9A3412 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #FFFFFF !important;
    font: 900 17px/1.2 'Montserrat', sans-serif !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 2px 0 #9A3412;
    box-shadow: 0 10px 24px rgba(234, 88, 12, 0.55), 0 2px 0 rgba(255, 255, 255, 0.45) inset !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto;
  }

  /* ---------- Shared Section Heading System ---------- */
  #homeView .showcase-sub-headline,
  #homeView .quychien-gameplay-headline,
  #block4-pillars .pillars-headline-modern,
  #block5-guide .headline-part-top,
  #buy .home-cta-title-line1 {
    display: block;
    margin: 0 0 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 900 !important;
    font-size: clamp(20px, 5.8vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: var(--lq-sky-700) !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    text-wrap: balance;
    transform: none !important;
  }

  #homeView .quychien-highlight-cyan {
    display: inline !important;
    white-space: normal !important;
    color: var(--lq-sun-600) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    background: none !important;
  }

  /* Eyebrow pill */
  #homeView .nautical-ribbon-badge {
    display: inline-flex !important;
    width: auto;
    max-width: 100%;
    margin: 0 auto 8px !important;
    transform: none !important;
    filter: none !important;
  }

  #homeView .nautical-ribbon-badge .ribbon-tail-l,
  #homeView .nautical-ribbon-badge .ribbon-tail-r {
    display: none !important;
  }

  #homeView .nautical-ribbon-badge .ribbon-content,
  #block1-showcase .showcase-top-tier::before {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 2px solid #FBBF24 !important;
    border-radius: 999px !important;
    background: #FEF3C7 !important;
    box-shadow: 0 3px 0 #F59E0B !important;
    color: #B45309 !important;
    font: 900 11px/1.2 'Montserrat', sans-serif !important;
    letter-spacing: 0.08em !important;
    text-shadow: none !important;
    clip-path: none !important;
  }

  #homeView .nautical-ribbon-badge .ribbon-content::before,
  #homeView .nautical-ribbon-badge .ribbon-content::after {
    display: none !important;
  }

  #homeView .nautical-ribbon-badge .ribbon-text,
  #homeView .nautical-ribbon-badge .ribbon-icon {
    color: inherit !important;
    font: inherit !important;
    text-shadow: none !important;
  }

  #homeView .quychien-headline-divider-amber,
  #block4-pillars .quychien-headline-divider {
    width: 48px !important;
    height: 4px !important;
    margin: 4px auto 0 !important;
    border-radius: 2px;
    background: var(--lq-sun-500) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #homeView .showcase-body-p,
  #homeView .gameplay-p,
  #block4-pillars .home-pillars-container > .text-center p,
  #buy .home-cta-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--lq-ink) !important;
    text-shadow: none !important;
  }

  /* ==========================================================================
     3. KHỐI 1: GIỚI THIỆU VỀ LOGISQUEST (#block1-showcase) — Ảnh 3 Fixes
     ========================================================================== */
  #block1-showcase {
    height: 100svh !important;
    min-height: 600px !important;
    max-height: 100svh !important;
    padding: 58px 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #38BDF8 !important;
  }

  #block1-showcase .home-showcase-bg-layer {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  #block1-showcase .home-showcase-bg-img,
  #block1-showcase .showcase-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Remove dark overlay so the bright 3D cartoon harbor shines through */
  #block1-showcase .showcase-dark-overlay {
    display: none !important;
  }

  #block1-showcase .showcase-plane-deco,
  #block1-showcase .showcase-brand-logo-wrap,
  #block1-showcase .showcase-main-headline {
    display: none !important;
  }

  /* Ảnh 3 Fix: Playful Toy Game Card Frame (#F0F9FF, thick rounded border, compact to show background) */
  #block1-showcase .home-showcase-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 14px 14px;
    margin: 0 auto;
    border-radius: 26px;
    background: #F0F9FF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 3px solid #38BDF8 !important;
    box-shadow: 0 7px 0 #0284C7, 0 18px 36px rgba(3, 105, 161, 0.28) !important;
    box-sizing: border-box;
  }

  #block1-showcase .showcase-top-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 8px;
  }

  #block1-showcase .showcase-top-tier::before {
    content: "⚓ GIỚI THIỆU LOGISQUEST";
    margin-bottom: 5px;
  }

  #block1-showcase .showcase-sub-headline {
    font-size: clamp(18px, 5vw, 21px) !important;
    margin-bottom: 0 !important;
  }

  #block1-showcase .showcase-main-tier {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
  }

  #block1-showcase .showcase-gallery-col,
  #block1-showcase .showcase-desc-col {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  #block1-showcase .showcase-glass-card {
    width: 100%;
    margin: 0 auto;
    padding: 7px;
    box-sizing: border-box;
    border: 2px solid #7DD3FC !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.10) !important;
  }

  /* Ảnh 3 Fix: Explicit height & 16:10 aspect ratio so carousel is NEVER blank */
  #block1-showcase .showcase-carousel-wrap {
    width: 100% !important;
    height: 185px !important;
    max-height: 25svh !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 auto;
    border-radius: 12px;
    background: #E0F2FE !important;
    overflow: hidden !important;
    box-shadow: none;
  }

  #block1-showcase .showcase-carousel-track {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }

  #block1-showcase .showcase-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    scroll-snap-align: center !important;
  }

  #block1-showcase .showcase-slide-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #block1-showcase .showcase-slide-img--box {
    object-fit: contain !important;
    padding: 6px;
    background: radial-gradient(circle, #FFFFFF 0%, #E0F2FE 100%);
  }

  #block1SlideCaption,
  .showcase-slide-caption,
  .mx-slide-caption {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px auto 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: #F0F9FF;
    border: 1.5px solid #BAE6FD;
    font: 800 11px/1.2 'Montserrat', sans-serif;
    color: var(--lq-sky-700);
  }

  #block1CaptionStep,
  .mx-slide-step {
    color: var(--lq-sun-600);
    font-weight: 900;
  }

  #block1CaptionTitle,
  .mx-slide-title {
    color: var(--lq-sky-700);
  }

  #block1-showcase .showcase-pagination-bar {
    margin-top: 6px;
  }

  #block1-showcase .showcase-body-p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 8px auto 0;
    text-align: center;
    color: var(--lq-ink) !important;
  }

  #block1-showcase .showcase-body-p b {
    color: var(--lq-sky-700);
  }

  #block1-showcase .showcase-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 16px;
    box-sizing: border-box;
    border: 2px solid #FFF7ED !important;
    border-bottom: 4px solid #C2410C !important;
    border-radius: 14px;
    background: linear-gradient(180deg, #FF8A00 0%, #FF6B00 60%, #EA580C 100%) !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.30) !important;
    color: var(--lq-white) !important;
    font: 900 13px/1.2 'Montserrat', sans-serif;
    letter-spacing: 0.04em;
    text-shadow: none !important;
  }

  /* ==========================================================================
     4. KHỐI 2 (LỐI CHƠI — Ảnh 4) & KHỐI 3 (QUY MÔ CHIẾN TRƯỜNG — Ảnh 5)
     ========================================================================== */
  #block2-gameplay {
    background: url('assets/home-mobile-v3/block2-gameplay-bg.png?v=20261031b') center / cover no-repeat !important;
    padding: 64px 14px 44px !important;
    overflow-x: clip;
  }

  #block3-scale {
    background: url('assets/home-mobile-v3/block3-scale-bg.png?v=20261031b') center / cover no-repeat !important;
    padding: 64px 14px 48px !important;
    overflow-x: clip;
  }

  /* Ảnh 4 & 5 Fix: Keep bright ocean/sunlit deck backgrounds from top to bottom! NO dark navy bottom gradient! */
  #block2-gameplay::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.55) 0%, rgba(224, 242, 254, 0.25) 55%, rgba(186, 230, 253, 0.45) 100%) !important;
  }

  #block3-scale::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.55) 0%, rgba(254, 243, 199, 0.22) 55%, rgba(224, 242, 254, 0.42) 100%) !important;
  }

  #block2-gameplay::after,
  #block3-scale::after {
    display: none !important;
  }

  #block2-gameplay .home-quychien-inner,
  #block3-scale .home-quychien-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
  }

  #block2-gameplay .home-quychien-text-col,
  #block3-scale .home-quychien-text-col {
    display: contents;
  }

  #homeView .nautical-ribbon-badge {
    order: 1;
  }

  #homeView .quychien-gameplay-headline {
    order: 2;
    text-shadow: 0 2px 0 #FFFFFF, 0 4px 12px rgba(255, 255, 255, 0.95) !important;
  }

  #homeView .quychien-headline-divider-amber {
    order: 2;
  }

  #block2-gameplay .home-quychien-img-col,
  #block3-scale .home-quychien-img-col {
    order: 3;
    width: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 12px 0 0;
    padding: 0;
  }

  #homeView .boardgame-glow-backdrop,
  #homeView .photo-glow-backdrop {
    display: none !important;
  }

  /* Ảnh 4 Fix: Enlarge 3D Boardgame + Add Floating 3D Ships/Cards/Containers around it */
  #block2-gameplay .quychien-boardgame-showcase {
    position: relative;
    width: 100%;
    padding: 10px 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #block2-gameplay .quychien-boardgame-cutout-img {
    position: relative;
    z-index: 3;
    display: block;
    width: 104% !important;
    max-width: 390px !important;
    max-height: 275px !important;
    margin: 0 auto -18px;
    object-fit: contain;
    transform: scale(1.08) !important;
    filter: saturate(1.15) contrast(1.05) drop-shadow(0 16px 24px rgba(3, 105, 161, 0.32));
  }

  .mx-board-float {
    display: block !important;
    position: absolute;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.28));
  }

  .mx-board-float--ship {
    width: 82px;
    top: -6px;
    left: 2px;
    transform: rotate(-8deg);
  }

  .mx-board-float--card {
    width: 68px;
    top: -4px;
    right: 4px;
    transform: rotate(12deg);
  }

  .mx-board-float--cont {
    width: 66px;
    bottom: 8px;
    right: 6px;
    transform: rotate(-6deg);
  }

  /* Ảnh 4 Fix: Hide long 2-paragraph wall of text on mobile; show 3 concise icon bullet cards instead */
  #block2-gameplay .quychien-gameplay-paragraphs {
    display: none !important;
  }

  .mx-gameplay-bullets {
    position: relative;
    z-index: 4;
    order: 4;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
    padding: 22px 12px 12px;
    list-style: none;
    border-radius: 24px;
    background: #F0F9FF;
    border: 3px solid #38BDF8;
    box-shadow: 0 6px 0 #0284C7, 0 16px 32px rgba(3, 105, 161, 0.22);
    box-sizing: border-box;
  }

  .mx-gameplay-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1.5px solid #BAE6FD;
    box-shadow: 0 3px 0 #E0F2FE;
    text-align: left;
  }

  .mx-bullet-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1.5px solid #FBBF24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
  }

  .mx-bullet-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .mx-bullet-copy strong {
    font: 900 13.5px/1.2 'Montserrat', sans-serif;
    color: var(--lq-navy-900);
  }

  .mx-bullet-copy span {
    font: 600 12px/1.3 'Montserrat', sans-serif;
    color: var(--lq-ink-soft);
  }

  /* Ảnh 4 Fix: Replace plain compass circle with Cartoon Sea Wave Divider */
  #homeView .nautical-route-transition {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    margin: -17px 0 !important;
    position: relative;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
  }

  #homeView .nautical-route-svg,
  #homeView .route-compass-marker,
  #homeView .nautical-compass-node {
    display: none !important;
  }

  #homeView .mx-wave-divider {
    display: block !important;
    width: 100%;
    height: 100%;
  }

  /* Ảnh 5 Fix: Toy Game Card / Ship Porthole Frame + Brightened Real Photos */
  #block3-scale .quychien-photo-showcase {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #block3-scale .photo-card-wrapper {
    position: relative;
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid #FBBF24 !important;
    outline: 3px solid #FFFFFF !important;
    border-radius: 26px !important;
    background: #E0F2FE !important;
    box-shadow: 0 7px 0 #D97706, 0 16px 32px rgba(15, 23, 42, 0.24) !important;
    transform: none !important;
  }

  .mx-porthole-frame-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 10;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1.5px solid #38BDF8;
    color: #0369A1;
    font: 900 10px/1.1 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  }

  /* Brighten & color-boost community photos so shadows/backlighting look vibrant */
  #block3-scale .quychien-community-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(1.16) saturate(1.22) contrast(1.04) !important;
  }

  .mx-photo-dots {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1.5px solid #BAE6FD;
    box-shadow: 0 3px 0 #7DD3FC;
  }

  .mx-photo-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #CBD5E1;
    transition: width 0.2s ease, background 0.2s ease;
  }

  .mx-photo-dot.is-active,
  .mx-photo-dot.active {
    width: 22px;
    background: var(--lq-sun-500);
  }

  .mx-scale-badges {
    order: 4;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 12px auto 0;
  }

  .mx-scale-badges > span,
  .mx-scale-chip {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 2px solid #38BDF8;
    box-shadow: 0 3px 0 #0284C7;
    color: var(--lq-navy-900);
    font: 800 11px/1.2 'Montserrat', sans-serif;
    white-space: nowrap;
  }

  /* Ảnh 5 Fix: Hide repetitive 10-line paragraphs; show concise 3-line summary */
  #block3-scale .quychien-gameplay-paragraphs {
    display: none !important;
  }

  .mx-scale-summary {
    order: 5;
    display: block !important;
    width: 100%;
    margin: 10px auto 0;
    padding: 12px 14px;
    border-radius: 18px;
    background: #FFFDF7;
    border: 2px solid #FBBF24;
    box-shadow: 0 4px 0 #F59E0B, 0 10px 22px rgba(15, 23, 42, 0.12);
    color: var(--lq-ink);
    font: 600 13px/1.45 'Montserrat', sans-serif;
    text-align: center;
    box-sizing: border-box;
  }

  .mx-scale-summary b {
    color: var(--lq-sun-600);
    font-weight: 800;
  }

  /* ==========================================================================
     5. KHỐI 4: 4 TRỤ CỘT CHIẾN THUẬT (#block4-pillars) — Ảnh 6 Fixes
     ========================================================================== */
  #block4-pillars {
    padding: 64px 14px 52px !important;
    background: #E0F2FE !important;
  }

  #block4-pillars .pillars-diorama-bg-layer {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  #block4-pillars .pillars-diorama-img,
  #block4-pillars .pillars-diorama-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Ảnh 6 Fix: Remove dark navy overlay! Use a bright sunlit sky wash instead */
  #block4-pillars .pillars-diorama-overlay,
  #block4-pillars .pillars-diorama-vignette {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.78) 0%, rgba(224, 242, 254, 0.35) 45%, rgba(240, 249, 255, 0.65) 100%) !important;
  }

  #block4-pillars .pillar-decor-3d,
  #block4-pillars .fandeck-card-glare {
    display: none !important;
  }

  #block4-pillars .home-pillars-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
  }

  /* Ảnh 6 Fix: Remove the big white box around the section header! Place directly on bright background */
  #block4-pillars .home-pillars-container > .text-center {
    margin-bottom: 0 !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #block4-pillars .home-pillars-container > .text-center::before {
    content: "🃏 4 TRỤ CỘT CHIẾN THUẬT";
    display: inline-flex;
    margin-bottom: 8px;
    padding: 5px 14px;
    border: 2px solid #FBBF24;
    border-radius: 999px;
    background: #FEF3C7;
    box-shadow: 0 3px 0 #F59E0B;
    color: #B45309;
    font: 900 11px/1.2 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
  }

  #block4-pillars .pillars-headline-modern {
    text-shadow: 0 2px 0 #FFFFFF, 0 4px 12px rgba(255, 255, 255, 0.95) !important;
  }

  #block4-pillars .home-pillars-container > .text-center p {
    max-width: 36rem !important;
    margin: 6px auto 0 !important;
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    font-size: 13px !important;
    font-weight: 600;
  }

  #block4-pillars .home-pillars-container > .text-center p b {
    color: var(--lq-sun-600) !important;
  }

  #block4-pillars .pillars-fandeck-wrapper {
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    display: block;
  }

  #block4-pillars .pillars-fandeck-area {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 0;
    overflow: visible !important;
    perspective: none !important;
    box-sizing: border-box;
  }

  /* Ảnh 6 Fix: Glossy Toy Containers / 3D Card Decks (Vibrant Lime, Coral, Cobalt, Warm Gold) */
  #block4-pillars .pillar-fandeck-card,
  #block4-pillars .pillar-fandeck-card.card-green-style,
  #block4-pillars .pillar-fandeck-card.card-red-style,
  #block4-pillars .pillar-fandeck-card.card-blue-style,
  #block4-pillars .pillar-fandeck-card.card-yellow-style {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  #block4-pillars .pillar-fandeck-card.card-green-style {
    border: 2.5px solid #22C55E !important;
    box-shadow: 0 5px 0 #15803D, 0 12px 24px rgba(21, 128, 61, 0.20) !important;
  }

  #block4-pillars .pillar-fandeck-card.card-red-style {
    border: 2.5px solid #FB7185 !important;
    box-shadow: 0 5px 0 #E11D48, 0 12px 24px rgba(225, 29, 72, 0.20) !important;
  }

  #block4-pillars .pillar-fandeck-card.card-blue-style {
    border: 2.5px solid #38BDF8 !important;
    box-shadow: 0 5px 0 #0284C7, 0 12px 24px rgba(2, 132, 199, 0.20) !important;
  }

  #block4-pillars .pillar-fandeck-card.card-yellow-style {
    border: 2.5px solid #F59E0B !important;
    box-shadow: 0 5px 0 #B45309, 0 12px 24px rgba(180, 83, 9, 0.20) !important;
  }

  /* Glossy Toy Container Stage (Bright background instead of dark #0F172A) */
  #block4-pillars .mx-pillar-art-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 13px;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) inset;
  }

  .card-green-style .mx-pillar-art-stage { background: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%) !important; }
  .card-red-style .mx-pillar-art-stage { background: linear-gradient(135deg, #FFE4E6 0%, #FDA4AF 100%) !important; }
  .card-blue-style .mx-pillar-art-stage { background: linear-gradient(135deg, #E0F2FE 0%, #7DD3FC 100%) !important; }
  .card-yellow-style .mx-pillar-art-stage { background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%) !important; }

  #block4-pillars .fandeck-card-img {
    flex: none;
    display: block;
    width: 66.667% !important;
    height: 150% !important;
    object-fit: cover !important;
    border-radius: 0;
    transform: rotate(-90deg) !important;
    filter: brightness(1.08) saturate(1.18) contrast(1.05);
  }

  /* Boost contrast on yellow INCOTERM container so white text is readable */
  #block4-pillars .card-yellow-style .fandeck-card-img {
    filter: brightness(0.96) saturate(1.35) contrast(1.18) !important;
  }

  /* Tactical Deck Card Metadata Footer */
  .mx-pillar-meta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 8px 2px 2px;
    text-align: left;
    box-sizing: border-box;
  }

  .mx-pillar-role {
    font: 800 9.5px/1.2 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 6px;
  }

  .card-green-style .mx-pillar-role { background: #DCFCE7; color: #15803D; }
  .card-red-style .mx-pillar-role { background: #FFE4E6; color: #BE123C; }
  .card-blue-style .mx-pillar-role { background: #E0F2FE; color: #0369A1; }
  .card-yellow-style .mx-pillar-role { background: #FEF3C7; color: #B45309; }

  .mx-pillar-name {
    font: 900 13.5px/1.2 'Montserrat', sans-serif;
    color: var(--lq-navy-900);
  }

  /* Ảnh 6 Fix: Interactive Toy Pill Button instead of plain gray "Lật mở ->" */
  .mx-pillar-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 3px;
    padding: 6px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%);
    border: 1.5px solid #FDBA74;
    box-shadow: 0 2px 0 #F97316;
    color: #C2410C !important;
    font: 800 11px/1.1 'Montserrat', sans-serif;
    box-sizing: border-box;
  }

  /* ==========================================================================
     6. KHỐI 5: VIDEO HƯỚNG DẪN (#block5-guide) — Ảnh 7 Fixes
     ========================================================================== */
  #block5-guide {
    padding: 64px 14px 48px !important;
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 50%, #E0F2FE 100%) !important;
  }

  #block5-guide .guide-bg-layer {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.22 !important;
    pointer-events: none;
  }

  #block5-guide .home-guide-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
  }

  #block5-guide .nautical-boardgame-badge {
    width: auto;
    margin: 0 auto 8px;
    filter: none !important;
    transform: none !important;
  }

  #block5-guide .badge-medallion,
  #block5-guide .plaque-woodgrain-svg,
  #block5-guide .plaque-highlight,
  #block5-guide .plaque-bottom-bevel {
    display: none !important;
  }

  #block5-guide .badge-wooden-plaque {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 14px !important;
    border: 2px solid #FBBF24 !important;
    border-radius: 999px !important;
    background: #FEF3C7 !important;
    box-shadow: 0 3px 0 #F59E0B !important;
    clip-path: none !important;
  }

  #block5-guide .badge-wooden-plaque::before,
  #block5-guide .badge-wooden-plaque::after {
    display: none !important;
  }

  #block5-guide .plaque-typography {
    position: static !important;
    color: #B45309 !important;
    font: 900 11px/1.2 'Montserrat', sans-serif !important;
    letter-spacing: 0.08em !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  #block5-guide .guide-nautical-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 0 14px;
    text-shadow: none !important;
  }

  #block5-guide .headline-part-bottom {
    color: var(--lq-sun-600) !important;
    font: 800 14px/1.3 'Montserrat', sans-serif !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
    text-wrap: balance;
  }

  #block5-guide .video-frame {
    position: relative;
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    overflow: hidden;
    border: 4px solid #38BDF8;
    border-radius: 22px;
    background: var(--lq-navy-900);
    box-shadow: 0 6px 0 #0284C7, 0 16px 32px rgba(2, 132, 199, 0.22);
  }

  #block5-guide .video-frame__viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--lq-navy-900) !important;
  }

  #block5-guide .video-frame__viewport iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
  }

  #block5-guide .video-frame__3d-overlay {
    display: none;
  }

  /* Ảnh 7 Fix: Custom Thumbnail Overlay hiding YouTube's default overlapping title before play */
  .mx-video-cover {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #0F172A;
    cursor: pointer;
    overflow: hidden;
  }

  .mx-video-cover.is-playing {
    display: none !important;
  }

  .mx-video-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    filter: brightness(1.05) saturate(1.15);
  }

  .mx-video-cover-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.48) 100%);
  }

  .mx-video-play-toy {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00F2FE 0%, #0284C7 50%, #0369A1 100%) !important;
    border: 3px solid #FFFFFF !important;
    border-bottom: 5px solid #075985 !important;
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.6) !important;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
  }

  .mx-video-cover-pill {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid #38BDF8;
    color: #0369A1;
    font: 800 11.5px/1.2 'Montserrat', sans-serif;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  }

  /* Ảnh 7 Fix: Convert 3-Column Cramped Steps into a Clean Vertical Stack of 3 Horizontal Rows! */
  .mx-guide-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    width: 100%;
    margin: 14px auto 0;
  }

  .mx-guide-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 2px solid #BAE6FD;
    box-shadow: 0 4px 0 #7DD3FC, 0 8px 16px rgba(2, 132, 199, 0.08);
    text-align: left;
    box-sizing: border-box;
  }

  .mx-step-num {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font: 900 13px/1 'Montserrat', sans-serif;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FF8A00 0%, #EA580C 100%);
    border: 2px solid #FFF7ED;
    border-bottom: 3px solid #9A3412;
    border-radius: 11px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mx-step-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mx-guide-step strong {
    display: block;
    font: 900 13.5px/1.2 'Montserrat', sans-serif;
    color: var(--lq-navy-900);
    margin: 0 !important;
  }

  .mx-step-copy span {
    font: 600 12px/1.3 'Montserrat', sans-serif;
    color: var(--lq-ink-soft);
  }

  .mx-guide-rulebook-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 2px solid #38BDF8;
    box-shadow: 0 4px 0 #0284C7;
    color: var(--lq-sky-700);
    font: 800 13px/1.2 'Montserrat', sans-serif;
    text-decoration: none;
    box-sizing: border-box;
  }

  /* ---------- KHỐI 6: CTA ĐẶT MUA SẢN PHẨM (#buy) — Ảnh 8 Fixes ---------- */
  #buy {
    padding: 58px 14px 48px !important;
    background: linear-gradient(180deg, #BAE6FD 0%, #E0F2FE 45%, #FEF3C7 100%) !important;
  }

  #buy .home-cta-banner-full {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent !important;
  }

  /* Ảnh 8 Fix: Full 3D Harbor Pedestal Stage with Both Game Boxes Centered + Ships, Containers & Cards around */
  #buy .home-cta-bg-layer {
    position: relative !important;
    inset: auto !important;
    z-index: 3;
    width: 100%;
    max-width: 390px;
    height: 195px !important;
    margin: 0 auto -32px;
    padding: 0;
    background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.85) 0%, rgba(186, 230, 253, 0.35) 62%, rgba(186, 230, 253, 0) 100%) !important;
    pointer-events: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  #buy .home-cta-bg-picture,
  #buy .home-cta-overlay-gradient {
    display: none !important;
  }

  .mx-buy-stage-pedestal {
    display: block !important;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 58px;
    border-radius: 999px;
    background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 0 #0369A1, 0 14px 28px rgba(2, 132, 199, 0.35);
    z-index: 1;
  }

  #buy .home-cta-mobile-product {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 3;
    width: 260px !important;
    max-width: 78% !important;
    height: 175px !important;
    max-height: 175px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    margin: 0 auto !important;
    transform: none !important;
    filter: brightness(1.10) saturate(1.18) contrast(1.05) drop-shadow(0 14px 20px rgba(15, 23, 42, 0.32));
  }

  .mx-buy-prop {
    display: block !important;
    position: absolute;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.28));
  }

  .mx-buy-prop--ship {
    width: 90px;
    bottom: 8px;
    left: 6px;
    transform: rotate(-6deg);
  }

  .mx-buy-prop--cont {
    width: 76px;
    bottom: 10px;
    right: 8px;
    transform: rotate(6deg);
  }

  .mx-buy-prop--card {
    width: 68px;
    top: 8px;
    left: 16px;
    transform: rotate(-14deg);
  }

  #buy .home-cta-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    background: transparent !important;
  }

  #buy .home-cta-content-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 46px 14px 18px;
    box-sizing: border-box;
    border: 3px solid #FBBF24 !important;
    border-radius: 26px;
    background: #FFFFFF !important;
    box-shadow: 0 7px 0 #F59E0B, 0 20px 44px rgba(234, 88, 12, 0.18) !important;
    text-align: center;
  }

  #buy .home-cta-badge {
    margin: 0;
    padding: 5px 14px;
    border: 2px solid #FBBF24 !important;
    border-radius: 999px;
    background: #FEF3C7 !important;
    box-shadow: 0 2px 0 #F59E0B !important;
    color: #B45309 !important;
    font: 900 11px/1.2 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
  }

  #buy .home-cta-badge span {
    color: inherit !important;
    text-shadow: none !important;
  }

  #buy .home-cta-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
  }

  #buy .home-cta-title-line1 {
    margin: 0 !important;
  }

  #buy .home-cta-yellow-title {
    color: var(--lq-sun-500) !important;
    font: 900 32px/1.05 'Montserrat', sans-serif !important;
    text-shadow: 0 3px 0 var(--lq-amber-300) !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }

  #buy .home-cta-description {
    max-width: 36rem;
    margin: 0 auto;
    font-size: 13px !important;
  }

  #buy .home-cta-price {
    display: inline-flex !important;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0;
    padding: 7px 18px;
    border-radius: 999px;
    background: #FFF7ED;
    border: 2px solid #FED7AA;
    color: var(--lq-ink);
    font: 700 13.5px/1.2 'Montserrat', sans-serif;
  }

  #buy .home-cta-price strong {
    color: var(--lq-sun-600);
    font-size: 24px;
    font-weight: 900;
  }

  #buy .home-cta-action-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 2px 0 0;
  }

  #buy .home-cta-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    border: 2px solid #FFF7ED !important;
    border-bottom: 5px solid #9A3412 !important;
    border-radius: 16px;
    background: linear-gradient(180deg, #FF8A00 0%, #FF6B00 55%, #EA580C 100%) !important;
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.32) !important;
    color: var(--lq-white) !important;
    font: 900 16px/1.2 'Montserrat', sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(154, 52, 18, 0.5) !important;
  }

  #buy .home-cta-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 46px;
    border: 2px solid var(--lq-sky-500) !important;
    box-shadow: 0 3px 0 #0284C7 !important;
    border-radius: 16px;
    background: var(--lq-white) !important;
    color: var(--lq-sky-700) !important;
    font: 800 13.5px/1.2 'Montserrat', sans-serif;
    text-decoration: none;
    text-shadow: none !important;
  }

  #buy .home-cta-btn-secondary * {
    color: inherit !important;
  }

  /* Ảnh 8 Fix: 3 Trust Badges cleanly on 1 single line without awkward text wrapping */
  #buy .home-cta-features-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
    width: 100%;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1.5px dashed #FED7AA;
    background: none !important;
    box-shadow: none !important;
  }

  #buy .cta-feature-divider {
    display: none !important;
  }

  #buy .cta-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 12px;
    background: #F0F9FF !important;
    border: 1px solid #BAE6FD;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #buy .cta-feature-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #FFFFFF !important;
    color: var(--lq-sky-600) !important;
    box-shadow: none !important;
  }

  #buy .cta-feature-icon svg {
    width: 16px;
    height: 16px;
  }

  #buy .cta-feature-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
  }

  /* Replace long 2-line title with concise 1-line data-mobile-short attribute */
  #buy .cta-feature-title[data-mobile-short] {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #buy .cta-feature-title[data-mobile-short]::after {
    content: attr(data-mobile-short);
    color: var(--lq-navy-900);
    font: 800 10.5px/1.2 'Montserrat', sans-serif;
    white-space: nowrap;
    display: block;
  }

  #buy .cta-feature-sub {
    display: none !important;
  }

  /* ==========================================================================
     8. FOOTER (#bgFooter) — Ảnh 9 Fixes (No Over-Carding, Unified Harbor Footer)
     ========================================================================== */
  footer.bg-footer,
  .bg-footer {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 58px 16px 52px !important;
    border-top: 4px solid #38BDF8 !important;
    background: linear-gradient(180deg, #E0F2FE 0%, #BAE6FD 55%, #7DD3FC 100%) !important;
    color: var(--lq-ink) !important;
    scroll-snap-align: none;
  }

  .bg-footer-hero,
  .bg-checker-strip,
  .bg-col-single-cont-wrap,
  .bg-copy-decor,
  .bg-copyright-wave-svg {
    display: none !important;
  }

  .bg-footer-main {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Ảnh 9 Fix: Single unified footer surface (remove 4 separate white boxes / over-carding) */
  .bg-footer-main-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px !important;
    max-width: 400px;
    margin: 0 auto;
    padding: 18px 16px !important;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(3, 105, 161, 0.18) !important;
    text-align: left;
    box-sizing: border-box;
  }

  .bg-footer-col {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
  }

  /* Ảnh 9 Fix: Reorder Footer sections on mobile:
     1. ĐĂNG KÝ NHẬN TIN (nth-child(4)) at the top
     2. THÔNG TIN CHUNG (nth-child(2)) & HỖ TRỢ (nth-child(3)) in 2 columns
     3. VỀ LOGISQUEST (nth-child(1)) concise brand summary at the bottom */
  .bg-footer-col:nth-child(4) {
    grid-column: 1 / -1;
    order: 1;
    padding-bottom: 14px !important;
    border-bottom: 1.5px dashed #BAE6FD !important;
  }

  .bg-footer-col:nth-child(2) {
    grid-column: span 1;
    order: 2;
  }

  .bg-footer-col:nth-child(3) {
    grid-column: span 1;
    order: 3;
  }

  .bg-footer-col:nth-child(1) {
    grid-column: 1 / -1;
    order: 4;
    padding-top: 12px !important;
    border-top: 1.5px dashed #BAE6FD !important;
  }

  /* Hide redundant "TÌM HIỂU THÊM ->" button in Footer because "Về LogisQuest" is right in the links above */
  .bg-btn-and-cont-row,
  .bg-btn-more {
    display: none !important;
  }

  .bg-col-header {
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 3px;
  }

  .bg-col-icon-wrap {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #FFF7ED !important;
    border: 1px solid #FED7AA;
    box-shadow: none !important;
    flex: none;
  }

  .bg-col-icon-wrap svg {
    width: 15px;
    height: 15px;
    stroke: var(--lq-sun-500);
  }

  .bg-col-title {
    margin: 0;
    color: var(--lq-sky-700) !important;
    font: 900 12.5px/1.3 'Montserrat', sans-serif !important;
    letter-spacing: 0.04em;
    text-shadow: none !important;
  }

  .bg-title-underline {
    width: 26px;
    height: 3px;
    margin: 3px 0 8px !important;
    border-radius: 2px;
    background: var(--lq-sun-400) !important;
  }

  .bg-col-desc {
    max-width: none;
    margin: 0 0 10px;
    color: var(--lq-ink-soft) !important;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .bg-footer-col:nth-child(1) .bg-col-desc {
    margin-bottom: 0;
  }

  .bg-footer-links {
    display: grid !important;
    gap: 2px !important;
    justify-content: start !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .bg-footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    color: var(--lq-ink) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  .bg-link-arrow {
    font-size: 10px !important;
    color: var(--lq-sun-500) !important;
  }

  .bg-newsletter-form {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
  }

  .bg-news-input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 2px solid #7DD3FC !important;
    border-radius: 12px;
    background: #F0F9FF !important;
    color: var(--lq-ink) !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
  }

  .bg-news-input::placeholder {
    color: var(--lq-ink-soft);
  }

  .bg-news-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 2px solid #FFF7ED !important;
    border-bottom: 4px solid #C2410C !important;
    border-radius: 12px;
    background: linear-gradient(180deg, #FF8A00 0%, #EA580C 100%) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
    color: var(--lq-white) !important;
    font: 900 12px/1 'Montserrat', sans-serif;
  }

  .bg-social-section {
    padding-top: 10px;
    border-top: 1px dashed #BAE6FD;
    text-align: center;
  }

  .bg-social-title {
    margin: 0 0 8px;
    color: var(--lq-sky-700) !important;
    font: 800 11px/1.2 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .social-links {
    display: flex !important;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
  }

  /* Ảnh 9 Fix: Hide GitHub & X/Twitter on mobile; show Facebook, Instagram, TikTok, YouTube */
  .social-link--github,
  .social-link--twitter {
    display: none !important;
  }

  .social-link--tiktok {
    display: inline-flex !important;
  }

  .bg-footer-copyright {
    position: relative;
    max-width: 400px;
    margin: 14px auto 0 !important;
    padding: 10px 12px 0 !important;
    background: transparent !important;
    color: #0369A1 !important;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
  }

  .bg-footer-copyright * {
    color: inherit !important;
    text-shadow: none !important;
  }

  .bg-copyright-title-text {
    font-size: 11.5px !important;
    margin: 0 !important;
  }
}

@media (max-width: 360px) {
  .header-container { padding-inline: 8px !important; gap: 6px; }
  .header-actions { gap: 6px; }
  #hero .home-banner-caption { left: 10px !important; right: 10px !important; }
  #hero .home-mobile-hero-facts li { padding: 5px 7px; font-size: 10.5px; }
}

/* ============================================================
   MASTER TEMPLATE (HÌNH 3) & TOÀN DIỆN 10 HẠNG MỤC REDESIGN
   ============================================================ */

/* --- HÌNH 1: HERO BANNER --- */
@media (max-width: 700px) {
  #hero .home-banner-caption {
    top: 104px !important;
    bottom: env(safe-area-inset-bottom, 8px) !important;
    padding-bottom: 2px !important;
  }
  #hero .home-banner-title-mobile {
    font-size: clamp(2.4rem, 10vw, 3.3rem) !important;
    line-height: 1.08 !important;
    text-shadow: 0 4px 20px rgba(2, 44, 92, 0.5) !important;
  }
  #hero .home-mobile-hero-facts,
  #hero .home-banner-bottom-cluster {
    bottom: 0 !important;
    margin-bottom: 4px !important;
  }
  #hero .home-mobile-hero-facts {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 24px rgba(2, 44, 92, 0.16) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
  }
  #hero .home-mobile-fact-item {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #034A75 !important;
  }
  #hero .home-mobile-hero-cta {
    margin-bottom: 0 !important;
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
    border: 2.5px solid #38BDF8 !important;
    border-bottom: 6px solid #0C4A6E !important;
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.55) !important;
    color: #FFFFFF !important;
  }
  #hero .home-mobile-hero-cta:active {
    transform: translateY(3px) !important;
    border-bottom-width: 3px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
  }
}

/* --- HÌNH 2: MENU OVERLAY --- */
@media (max-width: 700px) {
  #mobileNav.mobile-nav {
    top: 92px !important;
    max-height: calc(100vh - 96px) !important;
  }
  #mobileToggle.active {
    background: #0F172A !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 0 #020617, 0 8px 24px rgba(15, 23, 42, 0.45) !important;
  }
  #mobileToggle.active span {
    background: #FFFFFF !important;
  }
  .mx-nav-badge {
    display: none !important;
  }
}

/* --- HÌNH 3: MASTER TEMPLATE (GIỚI THIỆU LOGISQUEST) --- */
@media (max-width: 700px) {
  #block1-showcase {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    background: radial-gradient(circle at 50% 20%, #E0F2FE 0%, #BAE6FD 45%, #7DD3FC 100%) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #block1-showcase::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(2, 132, 199, 0.12) 1.5px, transparent 1.5px),
                      radial-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px) !important;
    background-size: 24px 24px, 12px 12px !important;
    background-position: 0 0, 12px 12px !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
  }
  #block1-showcase .home-showcase-container {
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    padding: 20px 16px 20px !important;
    box-sizing: border-box !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 3.5px solid #FFFFFF !important;
    box-shadow: 0 16px 40px rgba(2, 44, 92, 0.18), 0 0 0 1.5px #38BDF8 !important;
  }
  #block1-showcase .showcase-carousel-wrap {
    height: 220px !important;
    max-height: 35vh !important;
    aspect-ratio: auto !important;
    background: #F0F9FF !important;
    border: 1.5px solid #BAE6FD !important;
    border-radius: 16px !important;
  }
  #block1-showcase .showcase-slide-img {
    object-fit: contain !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }
}

/* --- HÌNH 4: HẢI TRÌNH ĐẤU TRÍ --- */
@media (max-width: 700px) {
  #block2-gameplay {
    padding-top: 40px !important;
    padding-bottom: 52px !important;
    background: radial-gradient(circle at 50% 30%, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%) !important;
    position: relative !important;
  }
  #block2-gameplay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(2, 132, 199, 0.1) 1.5px, transparent 1.5px) !important;
    background-size: 20px 20px !important;
    pointer-events: none !important;
  }
  .mx-gameplay-bullets {
    margin-top: 24px !important;
    gap: 12px !important;
  }
}

/* --- HÌNH 5: QUY MÔ CHIẾN TRƯỜNG --- */
@media (max-width: 700px) {
  #block3-scale {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
    background: radial-gradient(circle at 50% 30%, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%) !important;
    position: relative !important;
  }
  #block3-scale::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(2, 132, 199, 0.1) 1.5px, transparent 1.5px) !important;
    background-size: 20px 20px !important;
    pointer-events: none !important;
  }
  #block3-scale .photo-card-wrapper,
  .photo-card-wrapper {
    border-radius: 24px !important;
    border: 4px solid #38BDF8 !important;
    outline: 2px solid #FFFFFF !important;
    box-shadow: 0 8px 0 #0284C7, 0 16px 36px rgba(2, 44, 92, 0.22) !important;
    background: #F0F9FF !important;
  }
  #block3-scale .mx-scale-summary {
    border: 2px solid #38BDF8 !important;
    box-shadow: 0 4px 0 #0284C7, 0 10px 22px rgba(2, 44, 92, 0.12) !important;
    background: #FFFFFF !important;
  }
}

/* --- HÌNH 6: 4 TRỤ CỘT CHIẾN THUẬT --- */
@media (max-width: 700px) {
  #block4-pillars .home-pillars-container > .text-center::before {
    display: none !important;
    content: none !important;
  }
  .pillar-fandeck-card {
    border-radius: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 12px 28px rgba(2, 44, 92, 0.18), 0 0 16px rgba(56, 189, 248, 0.3) !important;
    background: #FFFFFF !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .pillar-fandeck-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0, 0, 0, 0.04) 10px, rgba(0, 0, 0, 0.04) 12px) !important;
    pointer-events: none !important;
    border-radius: 20px !important;
  }
}

/* --- HÌNH 7: TRẢI NGHIỆM VUỐT THẺ TOÀN MÀN HÌNH (CARD SLIDER / MODAL) --- */
@media (max-width: 700px) {
  #cardModal.modal-overlay {
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #cardModal .modal-content,
  #cardModal .modal-3d-card-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #F8FAFC !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #cardModal #modalClose {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top, 16px)) !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid #BAE6FD !important;
    color: #0F172A !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
  }
  #cardModal .modal-body,
  #cardModal .modal-3d-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100vw !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
  }
  #cardModal .modal-card-view,
  #cardModal .modal-stage-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #cardModal .modal-stage-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #cardModal .modal-card-view {
    flex: 0 0 52vh !important;
    height: 52vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 16px 8px !important;
    position: relative !important;
  }
  #cardModal .modal-flip-container {
    height: 38vh !important;
    max-height: 320px !important;
    aspect-ratio: auto !important;
    perspective: 1200px !important;
  }
  #cardModal .modal-flip-inner {
    transform-style: preserve-3d !important;
  }
  #cardModal .modal-flip-face,
  #cardModal .modal-flip-back,
  #cardModal .modal-flip-front {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
    border-radius: 14px !important;
    overflow: visible !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  #cardModal .modal-card-img {
    height: 100% !important;
    width: auto !important;
    max-width: 82vw !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    image-rendering: -webkit-optimize-contrast !important;
    filter: drop-shadow(0 10px 24px rgba(2, 44, 92, 0.2)) !important;
  }
  #cardModal .modal-card-details {
    flex: 1 1 48vh !important;
    height: 48vh !important;
    background: #FFFFFF !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -10px 36px rgba(2, 44, 92, 0.12) !important;
    border-top: 1.5px solid #E2E8F0 !important;
    padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 16px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #cardModal .modal-card-title {
    color: #0F172A !important;
  }
  #cardModal .modal-box-header,
  #cardModal .modal-box-subtitle {
    color: #0369A1 !important;
  }
  #cardModal .modal-card-desc-box {
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
  }
}

/* --- HÌNH 8: HƯỚNG DẪN THỰC CHIẾN (WAYPOINTS ROADMAP) --- */
@media (max-width: 700px) {
  #block5-guide {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
    background: radial-gradient(circle at 50% 25%, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%) !important;
    position: relative !important;
  }
  #block5-guide::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(2, 132, 199, 0.1) 1.5px, transparent 1.5px) !important;
    background-size: 20px 20px !important;
    pointer-events: none !important;
  }
  #block5-guide .headline-part-top {
    font-size: clamp(23px, 6.6vw, 27px) !important;
    line-height: 1.15 !important;
  }
  #block5-guide .headline-part-bottom {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* --- HÌNH 9: KHU VỰC SẢN PHẨM & TÁI THIẾT KẾ HUY HIỆU --- */
@media (max-width: 700px) {
  #buy {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  #buy::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 15%, rgba(56, 189, 248, 0.35) 0%, transparent 65%),
                radial-gradient(rgba(2, 132, 199, 0.14) 1.5px, transparent 1.5px) !important;
    background-size: 100% 100%, 20px 20px !important;
    pointer-events: none !important;
  }
  #buy .home-cta-features-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 14px 10px 6px !important;
    border-top: 1.5px dashed #BAE6FD !important;
    background: transparent !important;
  }
  #buy .cta-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 6px 10px !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #BAE6FD !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08) !important;
    text-align: center !important;
  }
  #buy .cta-feature-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #F0F9FF !important;
    border: 1px solid #BAE6FD !important;
    color: #0284C7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #buy .cta-feature-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  #buy .cta-feature-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  #buy .cta-feature-title,
  #buy .cta-feature-title[data-mobile-short] {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }
  #buy .cta-feature-title[data-mobile-short]::after,
  #buy .cta-feature-sub {
    display: none !important;
    content: none !important;
  }
}

/* --- HÌNH 10: FOOTER TOÀN CẢNH TRÀN VIỀN --- */
@media (max-width: 700px) {
  #bgFooter {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 0 max(16px, env(safe-area-inset-bottom, 16px)) !important;
    border: none !important;
    background: #F0F9FF !important;
  }
  #bgFooter .bg-footer-main-container {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    max-width: 100% !important;
    gap: 12px 14px !important;
    padding: 12px 16px 8px !important;
  }
  #bgFooter .bg-footer-col:nth-child(4) > .bg-col-header,
  #bgFooter .bg-footer-col:nth-child(4) > .bg-title-underline,
  #bgFooter .bg-footer-col:nth-child(4) > .bg-col-desc,
  #bgFooter .bg-footer-col:nth-child(4) > .bg-newsletter-form {
    display: none !important;
  }
  #bgFooter .bg-footer-col:nth-child(4) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  #bgFooter .bg-social-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #bgFooter .bg-social-title {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    text-align: center;
  }
  #bgFooter .social-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
  }
  #bgFooter .social-link {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border: 2px solid #FFFFFF !important;
    transition: transform 0.2s ease !important;
  }
  #bgFooter .social-link--twitter,
  #bgFooter .social-link--github {
    display: none !important;
  }
  #bgFooter .social-link svg {
    width: 22px !important;
    height: 22px !important;
    fill: #FFFFFF !important;
  }
  #bgFooter .social-link--facebook {
    background: #1877F2 !important;
  }
  #bgFooter .social-link--instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  }
  #bgFooter .social-link--tiktok {
    background: #000000 !important;
    display: inline-flex !important;
  }
  #bgFooter .social-link--youtube {
    background: #FF0000 !important;
    display: inline-flex !important;
  }
  #bgFooter .bg-footer-col:nth-child(1) {
    margin-top: 6px !important;
    padding-top: 10px !important;
  }
  #bgFooter .bg-footer-copyright {
    margin: 8px auto 0 !important;
    padding: 8px 12px 0 !important;
    border-top: 1px solid rgba(2, 132, 199, 0.15) !important;
  }
}