.srv-wrap {
    --srv-purple: #8b5cf6;
    --srv-purple-light: #ede9fe;
    --srv-pink: #ec4899;
    --srv-text: #1f2937;
    --srv-muted: #9ca3af;
    --srv-border: #f0e9fb;
    max-width: 780px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--srv-text);
}

/* .srv-wrap .uk-card {
    border: 1px solid var(--srv-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.06);
} */


/* ---------- Summary ---------- */

.srv-summary {
    margin-bottom: 20px;
    align-items: center;
    background-color: #F5EFFD;
    border:1px solid #EBEBEB;
    border-radius: 24px;
    padding:21px 25px;
}

.srv-summary-score {
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid #E4E4E4;
}
.srv-summary-score .srv-star
{
    height:28px;
    width:28px;
}
.srv-score-number {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.srv-score-max {
    font-size: 24px;
    font-weight: 700;
}
/* 
.srv-score-count {
    color: var(--srv-muted);
    font-size: 13px;
    margin-top: 4px;
} */

.srv-stars { display: inline-flex; gap: 2px; margin: 4px 0; }
.srv-stars svg 
{
    height:22px;
    width:22px;
}
.srv-star { width: 16px; height: 16px; }
.srv-star-mini 
{
    height:23px;
    width:23px;
}


.srv-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.srv-bar-label { flex-shrink: 0; display: flex; align-items: center; gap: 2px; 
font-weight: 700;
}

.srv-bar-track {
    min-width: 120px;
    flex: 1;
    height: 12px;
    border-radius: 500px;
    background: #A064E866;
    overflow: hidden;
}

.srv-bar-fill {
    display: block;
    height: 100%;
    border-radius: 500px;
    background:#A064E8;
}


.srv-btn-write {
    background: linear-gradient(90deg, #CE68B2 0%, #6EA3FA 100%);
    border-radius: 12px !important;
    padding: 0 20px;
    font-weight: 600;
    box-shadow: 0px 3px 0px 0px #948CDE4D;
}

.srv-btn-write:hover { opacity: 0.92; color: #fff; }



/* ---------- Write box ---------- */

.srv-write-box { margin-bottom: 20px; }

.srv-write-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap:16px;
}

.srv-write-title { font-weight: 700; }

.srv-cancel-write { color: var(--srv-muted); font-size: 13px; }

.srv-write-rating { margin-bottom: 10px; }

.srv-rate-star {
    width: 22px;
    height: 22px;
    color: #e5d9fb;
    fill: #e5d9fb;
    cursor: pointer;
    margin-right: 4px;
}

/* .srv-rate-star.srv-star-active { color: var(--srv-purple); fill: var(--srv-purple); }
 */
 .srv-rate-star.srv-star-active path 
 {
    fill:#A064E8 !important;
 }

/* ---------- Composer ---------- */

.srv-composer {
    border: 1px solid #CF66B0;
    background-color: #F5EFFD;
    border-radius: 12px;
    overflow: visible;
}

.srv-composer-input {
    min-height: 70px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
}
.srv-composer-input:focus-visible,
.srv-edit-area:focus-visible
{
    outline: none;
}

.srv-composer-input:empty:before {
    content: attr(data-placeholder);
    color: var(--srv-muted);
}

.srv-composer-footer {
    border-top: 1px solid var(--srv-border);
    padding: 8px 12px;
    gap: 8px;
}

.srv-composer-actions { gap: 8px; }

.srv-composer-actions .uk-button {
    border-radius: 999px;
    background-color:#6DA2F94D;
    border: none;
    font-size: 12px;
}
.srv-composer-actions .uk-icon 
{
    color:#CF66B0;
}
.srv-composer-submit { gap: 10px; }

.srv-btn-send.uk-button {
    border-radius: 999px;
    border: none;
    box-shadow: none;
    line-height: 34px;
    border-radius: 100px;
}


.srv-sticker-picker,
.srv-icon-picker {
    width: 350px !important;
    border-radius: 24px;
    padding: 8px !important;
    box-sizing: border-box;
}
.srv-icon-picker .uk-card 
{
    padding:0px;
}
.srv-menu-dropdown.uk-dropdown
{
    padding:8px;
    border-radius: 8px;
}
.srv-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.srv-picker-item { cursor: pointer; border-radius: 6px; }
.srv-picker-item:hover { background: var(--srv-purple-light); }
.srv-picker-empty,
.srv-picker-loading { font-size: 12px; color: var(--srv-muted); padding: 6px; }
.srv-inline-icon { vertical-align: -6px; }

/* ---------- List header ---------- */
.srv-sort-toggle.uk-button 
{
    line-height: 40px;
    padding:0px 16px;
    border:1px solid #E4E4E4;
    background-color: #F5EFFD;
    border-radius: 100px;
    font-weight: 400;
    font-size: 16px;
}
.srv-sort-dropdown.uk-dropdown 
{
    padding:12px;
    border-radius: 16px;
    min-width:166px;
    box-sizing: border-box;
}
.srv-sort-dropdown.uk-dropdown a 
{
    padding:8px 16px;
    border:1px solid #A064E8;
    border-radius: 100px;
    color:#121212;
}
.srv-sort-dropdown.uk-dropdown .uk-active a,
.srv-sort-dropdown.uk-dropdown a:hover
{
    background-color: #F5EFFD;
}
.srv-sort-dropdown ul > li:nth-child(n+2)
{
    margin-top:11px;
}
.srv-list-header { margin-bottom: 14px; }
.srv-list-title { font-size: 18px; font-weight: 600; }

.srv-sort-wrap { position: relative; }

.srv-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #F5EFFD;
    border: 1px solid var(--srv-border);
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1;
    color: var(--srv-text);
}

.srv-sort-toggle:hover { color: var(--srv-text); background: var(--srv-purple-light); }

.srv-sort-dropdown { min-width: 130px; padding: 6px 0; }

.srv-sort-nav a { font-size: 13px; }

.srv-empty, .srv-loading {
    text-align: center;
    color: var(--srv-muted);
    padding: 24px 0;
    font-size: 14px;
}

/* ---------- Review item ---------- */

.srv-review-item { margin-bottom: 20px; padding: 16px; 
border:1px solid #CF66B0;
border-radius: 12px;
}

.srv-review-main { display: flex; gap: 12px; }

.srv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.srv-avatar-small { width: 34px; height: 34px; }

.srv-review-body { flex: 1; min-width: 0; }

.srv-review-head, .srv-reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.srv-user-name { font-weight: 700; font-size: 14px; }

.srv-review-date, .srv-reply-date { font-size: 12px; color: var(--srv-muted); margin-left: auto; }

.srv-review-content, .srv-reply-content {
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0 8px;
    word-wrap: break-word;
}
.srv-action.srv-reply-trigger 
{
    color:#CF66B0;
}
.srv-review-list .uk-grid-divider.uk-grid-column-small>:not(.uk-first-column)::before, .srv-review-list .uk-grid-divider.uk-grid-small>:not(.uk-first-column)::before
{
    height:50%;
    margin:auto;
}
/* .srv-review-actions, .srv-reply-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--srv-muted);
} */

.srv-action { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
gap:12px; }
.srv-action:hover { color: var(--srv-purple); }
.srv-action [uk-icon] { width: 16px; height: 16px;
padding:10px;
border-radius: 100%;
background-color:#F5EFFD;
}

.srv-like-btn.srv-active { color: #ef4444; }
.srv-like-btn.srv-active [uk-icon] { color: #ef4444; fill: #ef4444; }
.srv-like-btn.srv-dislike.srv-active { color: #1f2937; }
.srv-like-btn.srv-dislike.srv-active [uk-icon] { color: #1f2937; fill: #1f2937; }

/* ---------- Menu 3 chấm (sửa / xóa) ---------- */

.srv-menu-inline { position: relative; margin-left: 4px; }

.srv-menu-toggle {
    cursor: pointer;
    color: var(--srv-muted);
    padding: 2px 4px;
    border-radius: 6px;
}

.srv-menu-toggle:hover { color: var(--srv-purple); background: var(--srv-purple-light); }
.srv-menu-toggle[uk-icon] { 
    padding:4px;
    border-radius: 4px;
    height:14px;
    width:14px;
 }

.srv-menu-dropdown { padding: 6px 0; min-width: 130px; }

.srv-menu-nav a { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.srv-menu-nav .uk-icon { width: 14px; height: 14px; }

/* ---------- Khung sửa bình luận ---------- */

.srv-edit-box { display: flex; flex-direction: column; gap: 8px; }
.srv-edit-buttons .uk-button 
{
    border-radius: 999px;
}
.srv-edit-area {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--srv-border);
    border-radius: 8px;
    background: #fff;
    outline: none;
    word-wrap: break-word;
    box-sizing: border-box;
}
.srv-summary .srv-stars
{
    margin-top:24px;
}
.srv-edit-area:focus { border-color: var(--srv-purple); }

.srv-edit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.srv-edit-pickers {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.srv-edit-pickers .uk-button {
    border-radius: 999px;
    background-color: #6DA2F94D;
    border: none;
    font-size: 12px;
}

.srv-edit-pickers .uk-icon { color: #CF66B0; }

.srv-edit-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; }

/* ---------- Replies (threaded) ---------- */

.srv-replies-wrap {
    margin-top: 12px;
  
    border-top: 1px solid var(--srv-border);
}
.srv-reply-composer-wrap
{
    padding:12px;
}

.srv-review-item .srv-replies-wrap { margin-left: 56px; }

.srv-replies-list { display: flex; flex-direction: column; gap: 12px; }

.srv-reply-item {
    display: flex;
    gap: 10px;
    /* background: #faf8ff; */
    border-radius: 10px;
    padding: 10px 12px;
}
.srv-replies-wrap {
    background-color: #F5F5F5;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, #CE68B2 0%, #6EA3FA 100%) 1;
}
.srv-reply-body { flex: 1; min-width: 0; }

.srv-reply-item .srv-replies-wrap { margin-left: 44px; margin-top: 10px; padding-top: 10px; }

/* .srv-reply-composer-wrap { 

padding:12px
} */
.srv-review-item > .srv-replies-wrap > .srv-reply-composer-wrap { display: flex; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .srv-summary-score { border-right: none; padding-right: 0; margin-bottom: 20px;
    padding-bottom: 20px;
border-bottom: 1px solid #E4E4E4;
}
    .srv-summary-bars { padding: 0; }
    .srv-review-item .srv-replies-wrap,
    .srv-reply-item .srv-replies-wrap { margin-left: 0px; }
    .srv-cta-note.uk-margin-medium,
    .srv-summary .srv-stars
    {
        margin-top:12px !important;
    }
    .srv-list-title
    {
        font-size: 15px;
    }
    .srv-stars.uk-margin-top
    {
        margin-top:0px !important;
    }
    .srv-action [uk-icon]
{
    padding:8px;
}
.srv-cta-note
{
    font-size: 13px;
}
.srv-review-content-body
{
    margin-left:-56px;
}
.srv-summary
{
    padding:17px;
}
.srv-reply-review-content-body
{
    margin-left:-44px;
    margin-top:16px;
}
.srv-reply-body .srv-replies-wrap
{
    margin-left:-44px;
}
.srv-composer-actions .uk-button,
.srv-btn-send.uk-button
{
    padding:0px 10px;
    line-height: 25px;
    font-weight: 400;
}
.srv-reply-item .srv-reply-composer-wrap
{
    padding:12px 0px;
}
.srv-action.srv-reply-trigger,
.srv-score-count
{
    font-size: 14px;
}
.srv-composer-actions .uk-icon,
.srv-action.srv-reply-trigger .uk-icon
{
    height:14px;
    width:14px;
}
.srv-sort-toggle.uk-button
{
    line-height: 31px;
    padding:0px 12px;
    font-size: 14px;
}
}