@import url("public.css");

.header-detail-blogs h1{
    font-size: 24px;
}

.header-detail-blogs .img-header img{
    border-radius: 20px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .4);
}

.related-blog .title{
    font-size: var(--font16);
    color: var(--color-5);
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.related-item{
    background-color: var(--color-2);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
  border-radius: 14px;
}

.related-blog .related-item img {
  border-radius: 14px;
}

.related-item .date{
    color: #888;
  font-size: 11px;
}

.date-header .text{
    color: var(--color-5);
    font-size: var(--font12);
}

.date-header .number-date{
        color: var(--color-4);
    font-size: var(--font12);
}

.header-detail-blogs .sidebar .position-sticky {
  top: 8rem !important;
}

.header-detail-blogs .description{
background-color: #d7d7d71c;
  border-radius: 17px;
}

.box-comment {
  background: #fff;
  border: 1px solid var(--color-1);
  border-radius: 20px;
}

.box-comment .box .form-label {
  font-size: var(--font14);
  color: var(--color-5);
  margin-bottom: 4px !important;
}

.box-comment .box .form-control {
  font-size: var(--font12);
  color: var(--color-6);
  border-radius: 12px;
  padding: 10px !important;
}

.btn-register-comment button {
  background-color: var(--color-4);
  color: #fff;
  border: 1px solid var(--color-4);
  border-radius: 12px;
  font-size: 14px;
  font-family: YekanBakhFaNum-Bold;
  transition: 0.5s;
  padding: 12px 50px;
}

.box-comment-text {
  background-color: #ffff;
  border: 1px solid var(--color-1);
  border-radius: 20px;
}

.box-comment-text .user .name-user {
  font-size: var(--font14);
  color: var(--color-6);
}

.box-comment-text .btn-reply .btn-primary {
  background-color: unset !important;
  color: var(--color-4) !important;
  border: unset !important;
  font-size: 24px !important;
}

.btn-reply .offcanvas-bottom {
  border-radius: 30px 30px 0 0;
}

.reply-user {
  background-color: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 12px;
}

.box-comment-text .user {
  border-bottom: 1px solid var(--color-2);
}

.reply-user .text-user-reply p {
  font-size: var(--font14);
  color: #868686;
}

.offcanvas-bottom {
  height: unset !important;
}