/* ======================================================
   GT FOREX REVIEW SYSTEM – CLEAN FINAL CSS
====================================================== */

/* ---------- main box ---------- */

.gt-rating-box{
  display:flex;
  flex-wrap:wrap;
  background:#fff;
  padding:26px;
  border-radius:18px;
  margin-bottom:32px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}

.gt-left{
  flex:0 0 260px;
}

.gt-score{
  font-size:64px;
  font-weight:900;
  line-height:1;
}

.gt-label{
  font-size:18px;
  font-weight:800;
  margin-top:6px;
}

.gt-count{
  color:#777;
  margin-top:4px;
}

/* ---------- bars ---------- */

.gt-bars{
  flex:1;
}

.gt-row{
  display:flex;
  align-items:center;
  margin-bottom:16px;
}

.gt-row span{
  width:80px;
  font-size:14px;
}

.gt-bar{
  flex:1;
  height:12px;
  background:#eee;
  border-radius:20px;
  overflow:hidden;
}

.gt-bar span{
  display:block;
  height:100%;
}

/* ---------- vote row ---------- */

.gt-vote-wrap{
  width:100%;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid #eee;

  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.gt-vote-text{
  font-weight:700;
  margin-right:12px;
}

.gt-vote-stars{
  margin-right:12px;
}

.gt-vote-hint{
  font-size:13px;
  color:#666;
}

/* ---------- colors ---------- */

.gt-uy-tin .gt-label{
  color:#1fa463;
font-weight:bold;
}
.gt-uy-tin .gt-bar span{
  background:linear-gradient(90deg,#a5e7c2,#1fa463);
}

.gt-nghi-van .gt-label{
  color:#ff9800;
	font-weight:bold;
}
.gt-nghi-van .gt-bar span{
  background:linear-gradient(90deg,#ffd28a,#ff9800);
}

.gt-canh-bao .gt-label{
  color:#e53935;
	font-weight:bold;
}
.gt-canh-bao .gt-bar span{
  background:linear-gradient(90deg,#ffc4c4,#e53935);
}

/* ---------- mobile ---------- */

@media(max-width:768px){

  .gt-left{
    flex:1;
    margin-bottom:12px;
  }

  .gt-bars{
    margin-top:8px;
  }

  .gt-vote-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .gt-vote-hint{
    margin-top:6px;
  }
}

/* ======================================================
   TOAST (only visible when .show is added)
====================================================== */

body > .gt-toast{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2147483647 !important;

  background:#1fa463;
  color:#fff;

  padding:14px 20px;
  border-radius:12px;

  font-weight:700;
  font-size:14px;

  max-width:320px;
  width:auto;

  box-shadow:0 10px 30px rgba(0,0,0,.25);

  opacity:0;
  transform:translateY(20px);
  transition:opacity .25s ease, transform .25s ease;

  pointer-events:none;
}

body > .gt-toast.show{
  opacity:1;
  transform:translateY(0);
}

/* ---------- comment highlight ---------- */

.gt-comments-highlight{
  outline:3px solid #1fa463;
  border-radius:8px;
}
/* ---------- box heading ---------- */

.gt-box-title{
  width:100%;
  font-size:16px;
  border-left: 5px solid #12519b;
  margin-bottom:18px;
  letter-spacing:.3px;
}