.content-rating {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 4px;
    justify-content: center;
text-align: center;
}
.container {
    ul li {
    line-height: 2;
    }
   p {
    text-align: justify;
    }
}
.portfolio-detail {
    padding-top: 50px;
}
.content-rating__label { font-weight: bolder; color: var(--secondary-color, #222); }
.content-rating__body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.content-rating__stars { display: inline-flex; gap: 2px; }
.content-rating__star {
    padding: 0;
    border: 0;
    background: transparent;
    color: #d6d6d6;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.content-rating__star.is-active,
.content-rating.is-hovering .content-rating__star.is-hovered { color: var(--primary-color, #fcb800); }
.content-rating__star:focus-visible { outline: 2px solid var(--primary-color, #fcb800); outline-offset: 3px; }
.content-rating__summary { color: #666; font-size: 14px; }
.content-rating__reset { border: 0; background: transparent; color: #666; font-size: 13px; text-decoration: underline; }
.content-rating.is-loading { opacity: .6; pointer-events: none; }

.qr-shortcode {
    display: inline-grid;
    gap: 12px;
    max-width: 100%;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    text-align: center;
}
.qr-shortcode .title { margin: 0; color: var(--secondary-color, #222); font-weight:bolder; }
.qr-shortcode .codeqr { display: grid; justify-items: center; gap: 10px; }
.qr-shortcode img { width: min(200px, 100%); height: auto; }
.qr-shortcode input { width: min(320px, 100%); min-height: 38px; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px; }