/* ===== Base palette ===== */
:root{
  /* Tra cứu (xanh) */
  --ssm-accent:#22c55e;
  --ssm-accent-2:#16a34a;
  --ssm-wrap-bg:#eaf8ef;
  --ssm-card:#fff;
  --ssm-line:#e5e7eb;
  --ssm-text:#0f172a;
  --ssm-muted:#64748b;
  --ssm-border:rgba(34,197,94,.35);
  --ssm-radius:14px;
  --ssm-shadow:0 10px 28px rgba(0,0,0,.18);

  /* Đăng nhập (đỏ) */
  --ssm-red:#e11d48;
  --ssm-red-dark:#b91c1c;
  --ssm-red-bg:#fff5f5;
}

/* ===== Khối tra cứu sinh viên (xanh) ===== */
.ssm-lookup{display:flex;justify-content:flex-end;padding:8px;background:transparent}
.ssm-lookup-wrap{
  margin:16px 24px 16px auto;max-width:560px;width:100%;
  padding:18px;background:var(--ssm-wrap-bg);
  border-radius:var(--ssm-radius);border:1px solid var(--ssm-border);
  box-shadow:var(--ssm-shadow);
}
.ssm-header{display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ssm-title{
  width:100%;text-align:center;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:.3px;
  color:#065f46;text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.ssm-form{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin:12px 0 6px;padding:8px 12px;
  background:#fff;border:1px solid var(--ssm-border);border-radius:12px;
}
.ssm-input{
  flex:1 1 220px;min-width:220px;height:44px;
  padding:8px 12px;border:1px solid var(--ssm-line);border-radius:10px;
  background:#fff;color:var(--ssm-text);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.ssm-input:focus{border-color:var(--ssm-accent);box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.ssm-btn{
  height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;font-weight:700;color:#06120b;
  background:linear-gradient(135deg,var(--ssm-accent),var(--ssm-accent-2));
  transition:transform .12s, filter .18s;
}
.ssm-btn:hover{filter:brightness(1.05)} .ssm-btn:active{transform:translateY(1px)}
.ssm-hint{color:var(--ssm-muted);font-size:13px;margin-top:4px}
.ssm-results{margin-top:14px;display:grid;gap:12px}

.ssm-card{
  background:var(--ssm-card);color:var(--ssm-text);
  border:1px solid var(--ssm-line);border-radius:12px;padding:14px;
  transform-origin:top;animation:ssm-fade-in .35s ease both;
}
.ssm-card h3{
  margin:0 0 10px;text-align:center;font-weight:800;color:#065f46;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
.ssm-card h3::after{
  content:"";display:block;width:64px;height:3px;margin:8px auto 0;
  background:linear-gradient(90deg,var(--ssm-accent),var(--ssm-accent-2));
  border-radius:999px;opacity:.75;
}

/* Bảng dữ liệu */
.ssm-table{width:100%;border-collapse:collapse}
.ssm-table th,.ssm-table td{border:1px solid var(--ssm-line);padding:8px 10px;text-align:center;vertical-align:middle}
.ssm-table th{background:#f8fafc;color:#334155;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}

.ssm-empty{color:var(--ssm-muted);font-style:italic}

/* Nút loading nhỏ trong nút tìm */
.ssm-spinner{
  width:18px;height:18px;margin-left:8px;
  border:3px solid rgba(34,197,94,.35);border-top-color:var(--ssm-accent);
  border-radius:999px;animation:ssm-spin .8s linear infinite;display:none
}
.ssm-loading .ssm-spinner{display:inline-block}

@keyframes ssm-spin{to{transform:rotate(360deg)}}
@keyframes ssm-fade-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

@media (min-width:992px){
  .ssm-lookup-wrap{margin:16px 120px 16px auto !important}
}

/* ===== Form đăng nhập sinh viên (đỏ) =====
   Thêm class 'ssm-form-login' vào form ở shortcode login để áp giao diện này. */
.ssm-form-login{
  background:var(--ssm-red-bg);
  border:3px solid var(--ssm-red);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(185,28,28,.12);
}
.ssm-form-login .ssm-title{color:var(--ssm-red-dark)}
.ssm-form-login .ssm-input{
  border:2px solid var(--ssm-red);
}
.ssm-form-login .ssm-input:focus{
  border-color:var(--ssm-red);
  box-shadow:0 0 0 3px rgba(225,29,72,.16);
}
.ssm-form-login .ssm-btn{
  background:linear-gradient(135deg,var(--ssm-red),var(--ssm-red-dark));
  color:#fff;
}
.ssm-form-login .ssm-btn:hover{filter:brightness(1.03)}
/* ====== Login form — đỏ, cao hơn, tiêu đề nằm trong khung ====== */
.ssm-form-login{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  background:#fff6f7;                 /* nền hồng nhạt */
  border:3px solid #e11d48;           /* viền đỏ */
  border-radius:18px;
  padding:18px 16px;
  min-height:200px;                   /* khung cao hơn */
}

/* Tiêu đề trong khung */
.ssm-form-login .ssm-login-head{
  flex:1 1 100%;
  text-align:center;
  font-weight:800;
  font-size:35px;
  color:#b91c1c;
  margin:-2px 0 6px;                  /* sát viền trên một chút */
}

/* Hàng input */
.ssm-form-login .ssm-login-row{
  display:flex;
  gap:12px;
  flex:1 1 100%;
  flex-wrap:wrap;
}

.ssm-form-login .ssm-input{
  flex:1 1 240px;
  height:48px;
  border:2px solid #e11d48;           /* viền đỏ */
  border-radius:14px;                 /* bo góc input */
  padding:10px 12px;
  background:#fff;
  color:#111827;
}

.ssm-form-login .ssm-input:focus{
  border-color:#b91c1c;
  box-shadow:0 0 0 3px rgba(225,29,72,.18);
  outline:0;
}

/* Ghi nhớ + nút */
.ssm-form-login .ssm-remember{
  display:flex; align-items:center;
  gap:8px; margin:2px 0 0;
  color:#374151;
}

.ssm-form-login .ssm-btn{
  background:#e11d48;                 /* nút đỏ */
  color:#fff;
  border:0;
  border-radius:12px;
  height:44px;
  padding:0 22px;
  font-weight:800;
}
.ssm-form-login .ssm-btn:hover{filter:brightness(1.02)}
.ssm-form-login .ssm-btn:active{transform:translateY(1px)}
@font-face {
  font-family: 'UTM Centur';
  src: url('../fonts/UTMCentur.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


.ssm-title {
  font-family: 'UTM Centur', serif !important;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: bold;
  color: #b91c1c; /* giữ màu đỏ trang trọng */
  text-align: center;
}