html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}






.product-img-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-name {
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}
.product-name:hover {
    color: #dc3545;
}
.product-description {
    padding-left: 20px; /* cách trái cho bullet */
    margin: 0;
}
.product-description li::marker {
    font-weight: bold;   /* làm dấu chấm đậm */
    color: black;        /* màu dấu chấm */
}





.star {
    transition: color 0.2s;
}
.star.hover, .star.selected {
    color: #ffca08; /* vàng */
}
#starRatingContainer {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* canh giữa cả sao và nhãn */
}
#starRating {
    display: flex;
    gap: 60px; /* tăng khoảng cách giữa các sao */
    font-size: 2.2rem;
    color: gray;
    cursor: pointer;
    margin-bottom: 8px; /* khoảng cách giữa sao và nhãn */
}

#starLabels {
    display: flex;
    gap: 35px; /* khoảng cách giữa các nhãn */
    font-size: 0.9rem;
}

#starLabels span {
    min-width: 35px; /* đảm bảo chữ không sát nhau */
    text-align: center;
}



.review-stats {
    width: 100%;         /* Chiếm toàn bộ cột chứa nó */
    padding: 20px 0;
    margin: 0 auto;
}

.rating-breakdown .progress {
    width: 100%;         /* Chiếm hết chiều ngang cột */
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 6px;
}
.rating-breakdown .progress-bar {
    background-color: #ffca08; /* màu vàng */
    /* KHÔNG đặt width cố định px, width sẽ được set bằng % trong Razor */
}