body {
  background:linear-gradient(135deg, #35675a, #c5a6ff);
}

.container {
  max-width: 1400px;
  margin: auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


/* ======= button =======  */
.list-of-questions-group-aibe-xxi-set-d-button {
  margin: 20px 1%;
}

.list-of-questions-group-aibe-xxi-set-d-button a {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;

  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1e40af);

  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);

  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* hover effect */
.list-of-questions-group-aibe-xxi-set-d-button a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(37, 99, 235, 0.35);
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
}

/* click effect */
.list-of-questions-group-aibe-xxi-set-d-button a:active {
  transform: scale(0.98);
}

/* subtle shine animation */
.list-of-questions-group-aibe-xxi-set-d-button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  transform: skewX(-20deg);
  transition: 0.6s;
}

.list-of-questions-group-aibe-xxi-set-d-button a:hover::before {
  left: 130%;
}

/* ============ */


.header {
  background: linear-gradient(135deg, #0f172a, #1e40af);
  color: #fff;
  text-align: center;
  padding: 12px;
}

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

.header p {
  font-size: 12px;
  margin-top: 3px;
  color: #fbbf24;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
}

.column {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.column-title {
  background: #111827;
  color: #fff;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  font-weight: 700;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.item span {
  width: 18px;
  text-align: right;
  color: #334155;
}

.item b {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
}

/* Colors Every 5 Questions */

.group1 {
  background: #eff6ff;
}

.group1 b {
  background: #2563eb;
}

.group2 {
  background: #ecfdf5;
}

.group2 b {
  background: #16a34a;
}

.group3 {
  background: #fff7ed;
}

.group3 b {
  background: #ea580c;
}

.group4 {
  background: #faf5ff;
}

.group4 b {
  background: #9333ea;
}

.group5 {
  background: #fef2f2;
}

.group5 b {
  background: #dc2626;
}

/* ====== review notice ======= */
.review-notice{
    margin:15px;
    background:#ffffff;
    border:1px solid #dbeafe;
    border-radius:12px;
    overflow:hidden;
}

.review-title{
    background:linear-gradient(135deg,#1e3a8a,#0f172a);
    color:#fff;
    padding:12px 15px;
    font-size:15px;
    font-weight:700;
}

.review-body{
    padding:15px;
    font-size:13px;
    line-height:1.8;
    color:#334155;
}

.review-body p{
    margin-bottom:12px;
}

.review-body ul{
    margin:10px 0 15px 20px;
}

.review-body li{
    margin-bottom:6px;
}

.review-email{
    background:#eff6ff;
    border-left:4px solid #2563eb;
    padding:10px 12px;
    border-radius:6px;
    margin:12px 0;
}

.review-email a{
    color:#1d4ed8;
    text-decoration:none;
    font-weight:600;
}

.review-subject{
    background:#f8fafc;
    padding:10px 12px;
    border-radius:6px;
    margin-bottom:12px;
}

.review-footer-text{
    margin-bottom:0;
    font-weight:500;
}

@media(max-width:768px){

    .review-body{
        font-size:12px;
        line-height:1.7;
    }

}