Main features​

Five-star rating system​

• Members can rate each topic from 1 to 5 stars.
• Each user can only rate each topic once (ratings can be edited/deleted).
• It automatically calculates and displays the average score , total number of scores , and total score.

Review system​

• Allows users to write reviews and give star ratings.
• when providing a rating feature . You can choose to require users to write reviews
• for comments Set the minimum length
• Supports pagination of the comment list.

3 types of rating icons​

type	icon	tone
Stars	fa-star	Amber color (#f59e0b)
Heart	fa-heart	Red (#ef4444)
thumbs up	fa-thumbs-up	Blue (#3b82f6)

Flexible display position​

• Top of topic: Displays a rating block above the article list.
• Bottom of the first article: Displayed directly below the content of the first article.

SEO Optimization - Google Rich Media Summary​

{
  "@context": [COLOR=rgb(170, 17, 17)]"https://schema.org"[/COLOR],
  "@type": [COLOR=rgb(170, 17, 17)]"DiscussionForumPosting"[/COLOR],
  "headline": [COLOR=rgb(170, 17, 17)]"Tiêu đề chủ đề"[/COLOR],
  "aggregateRating": {
    "@type": [COLOR=rgb(170, 17, 17)]"AggregateRating"[/COLOR],
    "ratingValue": [COLOR=rgb(170, 17, 17)]"4.5"[/COLOR],
    "bestRating": [COLOR=rgb(170, 17, 17)]"5"[/COLOR],
    "ratingCount": [COLOR=rgb(170, 17, 17)]"12"[/COLOR]
  },
  "review": {
    "@type": [COLOR=rgb(170, 17, 17)]"Review"[/COLOR],
    "author": { "@type": [COLOR=rgb(170, 17, 17)]"Person"[/COLOR], "name": [COLOR=rgb(170, 17, 17)]"Username"[/COLOR] },
    "reviewBody": [COLOR=rgb(170, 17, 17)]"Nội dung nhận xét mới nhất..."[/COLOR],
    "reviewRating": {
      "@type": [COLOR=rgb(170, 17, 17)]"Rating"[/COLOR],
      "ratingValue": [COLOR=rgb(170, 17, 17)]"5"[/COLOR],
      "bestRating": [COLOR=rgb(170, 17, 17)]"5"[/COLOR]
    }
  }
}

Detailed access control system​

Advanced Interface​

• Glass-shaped design , gradient background and blurred background
• Smooth hovering effect : Y-axis translation, shadow transition
• The scoring box features a striking gradient and text shadow design.
• The rounded, pill-shaped CTA button features gradient and shadow animation effects.
• using Flexbox and Gap Implement responsive layouts
• with cubic Bézier curve transition and scaling effect Star-shaped animation

Administrator Control Panel Configuration​