@media (max-width: 768.98px) {
    #autos-nav {
        padding: 0 10px;
    }
    
}

@media (max-width: 768.98px) {
    .navbar-expand-md>.container, .navbar-expand-md>.container-fluid, .navbar-expand-md>.container-lg, .navbar-expand-md>.container-md, .navbar-expand-md>.container-sm, .navbar-expand-md>.container-xl {
        padding-right: 0;
        padding-left: 0;
    }
}



@media (max-width: 768.98px) {
    #root>.page {
        margin-top: 57px;
        min-height: calc(100vh - 57px);
    }
}

@media (max-width: 767px) {
  
  html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.page.home .pinned-heading+.row {
    padding-top: 37px;
}

.page.home .col.primary article {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    position: relative;
}
  .hero-scroller .main-pic img,
  .hero-scroller .images img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  .hero-scroller .main-pic {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .hero-scroller .images .ratio {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .hero-scroller .images img {
    object-fit: cover;
  }
}


/* === Fix Auction H1 visibility and dropdown toggle on mobile === */
@media (max-width: 767px) {
  .pinned-heading h1 {
    display: block !important;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .pinned-heading .dropdown-toggle {
    cursor: pointer;
    position: relative;
  }

  .pinned-heading .dropdown-menu {
    display: none;
    margin-top: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
  }

  .pinned-heading .dropdown.open .dropdown-menu {
    display: block;
  }
}


@media (max-width: 768.98px) {
    .page.home .col.primary {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767.98px) {
  /* .pinned-heading .heading {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .pinned-heading h1,
  .pinned-heading .dropdown > h1 {
    margin-left: 0 !important;
    padding-left: 0 !important;
  } */

  #autos-nav .navbar-brand {
     /* display: contents;
      padding: 0;
      margin: 8px 0 8px 2px;
      width: 138px;
      height: 24px; */
      height: 30px;
      background: transparent var(--header-mobile-logo) no-repeat 0 0 / 100%;
  }

}

.brand-name {
    font-size: 24px;
    color: var(--btn-primary-text-color);
    font-weight: 700;
}
@media (min-width: 768px) {
  .auction-item.mobile-only {
    display: none !important;
  }
  
}
.mobile-only {
    display: none;
}
.desktop-only {
    display: block;
}
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .about-section {
        background-image: none !important;
        background-color: transparent !important;
    }

    .about-section {
      background: #f2f2f2;
      background-size: cover;
      background-position: center;
      padding: 10px;
  }
  .about-container {
      max-width: 1200px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
  }
  .works-section {
      
      padding: 0;
  }
}

.btn-flag.flagged {
    color: red;
    font-weight: bold;
}

.dropdown-menu .dropdown-item.selected {
    font-weight: 600; /* làm chữ đậm hơn */
    background-color: #f2f2f2; /* nền sáng nhẹ nếu muốn */
    color: #000; /* đảm bảo chữ rõ */
}
.mobile-heading h6 {
    margin-left: 4px;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    color: var(--heading-color);
}
@media (max-width: 768.98px) {
    .notifications-toggle.open {
        margin-right: 6px;
    }
}
@media (max-width: 768.98px) {
    .notifications-toggle {
        order: 4;
    }
}
@media (max-width: 768.98px) {

  .page.home .pinned-heading {
      z-index: 1;
  }
}
@media (max-width: 768.98px) {
  .notifications-toggle.open .dropdown-menu {
        border-radius: 0
    }

   

    .notifications-toggle.open .dropdown-menu.show .mobile-heading {
        margin: 17px 10px 0
    }
}

@media (max-width: 768.98px) {
    .notifications-toggle.open .dropdown-menu {
        border-radius: 0
    }

    .notifications-toggle.open .dropdown-menu.show {
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: 1;
        width: 100vw;
        height: 100vh;
        border: 0;
        box-shadow: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    .notifications-toggle.open .dropdown-menu.show .mobile-heading {
        margin: 17px 10px 0
    }

    .container > .navbar-collapse, .container-fluid > .navbar-collapse {
      margin-right: 0;
      margin-left: 0;
    }
    .navbar-collapse {
      align-items: center;
      width: auto;
    }
    .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
        overflow-x: visible;
        border-top: 1px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        box-shadow: unset;
        -webkit-overflow-scrolling: touch;
    }
}

.notification-item .count {
  pointer-events: none;
}
@media (max-width: 768.98px) {
    /* #autos-nav .navbar-nav .nav-item {
        padding: 0 22px;
    } */
    .page.cb-leaderboard .pinned-heading h1 {
      margin-bottom: 16px;
      padding: 0 12px;
      font-size: 22px;
      font-weight: 700;
      line-height: 26px;
      color: var(--heading-color);
  }
  .navbar-nav {
      margin: 0;
  }
  .sub-share .btn-watch {
    width: 118px;
  }
  .sellcar-landing-reviews .cb-scroller-next, .sellcar-landing-reviews .cb-scroller-prev {
      height: 186px;
      display: none;
  }

}
.modal-dialog.centered-content .modal-header .btn-close {
    margin: 20px 4px 0 0;
    position: relative;
    z-index: 1;
}
.modal-dialog.bidder-modal .modal-header {
    min-height: 56px
}

@media (min-width: 769px) {
    ul.filter-sorts {
        margin: 0 10px;
        height: auto;
    }
    .sort-option .btn {
      font-weight: 300;
      font-size: 14px;
      color: #828282;
    }
    .sellcar-landing-reviews .cb-scroller-next, .sellcar-landing-reviews .cb-scroller-prev {
        height: 186px;
    }
    .subflow .form-block .form-group input[type=text].form-control {
        width: 100%;
    }
}

/* Màu icon mặc định khi chưa add */
.btn-watch.ws i.fa {
    color: #ccc; /* hoặc #fff nếu icon trắng */
}

/* Màu icon khi đã add watchlist */
.btn-watch.ws.active i.fa {
    color: gold; /* hoặc #ffc107 cho vàng nhẹ */
}
.notify-btn.active i {
    color: gold; /* hoặc #ffc107 nếu muốn vàng nhạt */
}
.video-card.top {
    z-index: 10 !important; /* Đảm bảo top video trên cùng */
}

.video-card.middle,
.video-card.bottom {
    z-index: 1 !important;
}

.cnb-video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    z-index: 20 !important; /* Video nằm trên preview */
}
.btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-grid .btn {
    min-width: 100px;
    text-align: center;
}
.btn-c_upvote {
    background-color: #f1f1f1; /* màu nền bình thường */
    color: #333;
    border: 1px solid #ccc;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-c_upvote.voted {
    background-color: #0d6efd; /* màu nền khi đã vote */
    color: #fff;
    border-color: #0d6efd;
}
.btn-c_flag {
    color: #6c757d; /* màu xám mặc định */
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.btn-c_flag.flagged {
    color: #dc3545;
    background-color: #fff; /* màu đỏ khi đã flag */
    border-color: #dc3545;
}
.btn-c_expand {
    display: none; /* mặc định ẩn nút Expand */
}
@media (min-width: 769px) {
    .community-composer.for-post .buttons {
        padding-top: 37px;
        padding-bottom: 37px;
    }
}
/* css move from header for login google */
.nav-item.dropdown:hover .dropdown-menu {display: block;margin-top: 0;}
        
/* Fix positioning for close button */
.modal-header {
    position: relative;
    padding: 0;
    border-bottom: none;
}

.modal-header .close {
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 0;
    margin: 0;
    z-index: 10;
}

.modal-title {
    width: 100%;
}