*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(135deg,#f2f7ff,#f9fbff);
  color:#1f2937;
}

.survey-container{
  max-width:720px;
  margin:24px auto;
  padding:16px;
}

.survey-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:24px;
}

.survey-title{
  font-size:22px;
  font-weight:700;
  margin-bottom:6px;
}
.survey-desc{
  font-size:14px;
  color:#6b7280;
  margin-bottom:20px;
}

label{
  font-weight:600;
  font-size:14px;
  display:block;
  margin-bottom:6px;
}

input[type=text],textarea,select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  font-size:15px;
  outline:none;
}
input:focus,textarea:focus,select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.student-box{
  background:#f8fafc;
  border:1px dashed #c7d2fe;
  padding:14px;
  border-radius:12px;
  margin-bottom:20px;
}

.question{
  padding:18px 0;
  border-bottom:1px solid #e5e7eb;
}
.required{color:#dc2626}

/* Rating */
.rating-stars{
  display:flex;
  gap:10px;
  margin:10px 0 6px;
  flex-direction:row;        /* ✅ trái -> phải */
  justify-content:flex-start;
}
.rating-stars-ltr .star{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.rating-stars-ltr .star input{display:none}
.rating-stars-ltr .star span{
  font-size:30px;
  color:#d1d5db;
  transition:.15s;
}
.rating-stars-ltr .star:hover span{transform:scale(1.08)}

/* tô sao theo data-selected bằng JS (ổn định mọi browser) */
.rating-stars-ltr[data-selected="1"] .star:nth-child(-n+1) span,
.rating-stars-ltr[data-selected="2"] .star:nth-child(-n+2) span,
.rating-stars-ltr[data-selected="3"] .star:nth-child(-n+3) span,
.rating-stars-ltr[data-selected="4"] .star:nth-child(-n+4) span,
.rating-stars-ltr[data-selected="5"] .star:nth-child(-n+5) span{
  color:#f59e0b;
}

.rating-stars input{display:none}
.rating-stars label{
  font-size:26px;
  cursor:pointer;
  color:#d1d5db;
}
.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label{
  color:#f59e0b;
}

.reason-box{display:none;margin-top:10px}

.submit-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  margin-top:20px;
}

.msg{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  display:block;     /* ✅ đổi từ none -> block */
}
.msg.hidden{display:none;}   /* ✅ thêm class ẩn */
.msg.success{background:#ecfdf5;color:#065f46}
.msg.error{background:#fef2f2;color:#991b1b}