@media (min-width: 701px) {
  html:root {
    --c1: #063f7f;
    --c2: #ffbd1a;
    --loong-navy: #063f7f;
    --loong-navy-dark: #031f43;
    --loong-gold: #ffbd1a;
    --loong-gold-dark: #d99800;
  }

  .garment-header-inner {
    grid-template-columns: 286px minmax(0, 1fr) auto;
  }

  .garment-logo {
    width: 272px;
    height: 82px;
  }

  .garment-logo img {
    object-position: left center;
  }

  .garment-nav > a.current::after,
  .garment-nav > a:hover::after,
  .dropdown-trigger.current::after,
  .dropdown-trigger:hover::after {
    background: var(--loong-gold);
  }

  .garment-header.is-scrolled .garment-nav > a.current,
  .garment-header.is-scrolled .garment-nav > a:hover,
  .garment-header.is-scrolled .dropdown-trigger.current,
  .garment-header.is-scrolled .dropdown-trigger:hover {
    color: var(--loong-navy);
  }

  .price-list-header,
  .products-dropdown a:hover,
  .price-list-card:hover {
    border-color: var(--loong-gold);
  }

  html .dibu {
    background-image: linear-gradient(rgba(2, 14, 31, 0.42), rgba(2, 14, 31, 0.32)), url('../img/home-pc-2026/application-road.webp');
    background-position: center 54%;
    background-size: cover;
  }

  html .dibu::after {
    opacity: 0;
  }

  html .dibu .waves {
    opacity: 0.24;
  }

  html .dibu .footer-l .logo {
    width: 270px;
    height: 90px;
  }

  html .dibu .footer-r ul h3,
  html .dibu .share2 a:hover,
  html .dibu a:hover {
    color: var(--loong-gold);
  }

  html .dibu .share2 a {
    background: rgba(6, 63, 127, 0.7);
    border: 1px solid rgba(255, 189, 26, 0.32);
  }
}

@media (min-width: 701px) and (max-width: 1280px) {
  .garment-header-inner {
    grid-template-columns: 226px minmax(0, 1fr) auto;
  }

  .garment-logo {
    width: 220px;
    height: 68px;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .garment-header-inner {
    grid-template-columns: 180px minmax(0, 1fr) auto;
  }

  .garment-logo {
    width: 172px;
    height: 54px;
  }
}