/* ============================================================
   Notice pages redesign: notice.php, notice-academic.php,
   notice-exam.php, notice-activity.php.
   Scoped under .notice-revamp / .notice-revamp-banner so nothing
   here leaks onto other pages that share the same global classes.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.notice-revamp, .notice-revamp *{
  font-family:"Inter","Roboto",sans-serif;
}

/* ---------- Banner ---------- */
.notice-revamp-banner .banner-wrap{
  position:relative;
  background:linear-gradient(120deg, #4f46e5 0%, #6d5ef1 45%, #06b6d4 100%);
}
.notice-revamp-banner .banner-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(500px 260px at 100% 100%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.notice-revamp-banner .banner-wrap img{
  opacity:.18;
  mix-blend-mode:overlay;
}
.notice-revamp-banner .banner-info{
  position:relative;
  z-index:1;
  text-align:center;
}
.notice-revamp-banner .banner-info h1{
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  text-shadow:0 4px 18px rgba(0,0,0,.25);
}
.notice-revamp-banner .banner-info h1 span{ color:#fff !important; }
.notice-revamp-banner-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.4);
  color:#fff;
  font-size:1.6rem;
  margin-bottom:10px;
}

/* ============================================================
   notice.php - three colourful category cards, side by side
   ============================================================ */
.notice-revamp .card{
  border:none !important;
  border-radius:16px !important;
  box-shadow:0 10px 28px rgba(35,41,82,.09);
  overflow:hidden;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.notice-revamp .card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(35,41,82,.14);
}
.notice-revamp .card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:linear-gradient(90deg, #4f46e5, #6d5ef1);
}
.notice-revamp .card.cat-exam::before{ background:linear-gradient(90deg, #8b5cf6, #c084fc); }
.notice-revamp .card.cat-activity::before{ background:linear-gradient(90deg, #16a34a, #22c55e); }

.notice-revamp .card .card-body{ padding:20px 20px 16px !important; }

.notice-revamp .card blockquote{
  margin:0 0 10px;
  border:none !important;
}
.notice-revamp .card h4{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700 !important;
  font-size:1.15rem !important;
  color:#1e2233 !important;
  margin:0;
}
.notice-revamp .card h4 i,
.notice-revamp .card h4 .notice-cat-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#eef0ff;
  color:#4f46e5 !important;
  font-size:1.15rem;
  line-height:1;
  flex:none;
}
.notice-revamp .card.cat-exam h4 i,
.notice-revamp .card.cat-exam h4 .notice-cat-icon{ background:#f2edfe; color:#8b5cf6 !important; }
.notice-revamp .card.cat-activity h4 i,
.notice-revamp .card.cat-activity h4 .notice-cat-icon{ background:#e8f9ef; color:#16a34a !important; }

.notice-revamp .card hr.bdr{
  border:none !important;
  border-top:1px solid #eef0f5 !important;
  margin:8px 0 12px;
}

.notice-revamp .marque-content{
  height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  padding-right:6px;
}
.notice-revamp .marque-content::-webkit-scrollbar{ width:6px; }
.notice-revamp .marque-content::-webkit-scrollbar-track{ background:transparent; }
.notice-revamp .marque-content::-webkit-scrollbar-thumb{
  background:#dcdfec;
  border-radius:10px;
}
.notice-revamp .marque-content::-webkit-scrollbar-thumb:hover{ background:#c3c7dc; }
.notice-revamp .mr-move p{ margin:0 0 4px; }
.notice-revamp .mr-move p a.pad{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  font-size:.86rem;
  line-height:1.35;
  color:#333a4d !important;
  background:#fff;
  border:1px solid #eef0f5;
  border-left:3px solid #4f46e5;
  transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.notice-revamp .mr-move p a.pad::after{
  content:"\203A";
  font-size:1.1rem;
  line-height:1;
  color:#c3c7dc;
  margin-left:auto;
  flex:none;
}
.notice-revamp .mr-move p a.pad:hover{
  background:#f7f8fd;
  color:#4f46e5 !important;
  transform:translateX(2px);
  box-shadow:0 4px 14px rgba(35,41,82,.08);
}
.notice-revamp .mr-move p a.pad i{
  display:none;
}
.notice-revamp .card.cat-exam .mr-move p a.pad{ border-left-color:#8b5cf6; }
.notice-revamp .card.cat-exam .mr-move p a.pad:hover{ color:#8b5cf6 !important; }
.notice-revamp .card.cat-activity .mr-move p a.pad{ border-left-color:#16a34a; }
.notice-revamp .card.cat-activity .mr-move p a.pad:hover{ color:#16a34a !important; }

.btm-lw {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
}
.notice-revamp .btm-lw{
  margin:10px 0 0;
  padding-top:12px;
  border-top:1px solid #eef0f5;
}
.notice-revamp .btm-lw a{
  display:block !important;
  width:100%;
  text-align:center;
  white-space:nowrap;
  border:none !important;
  border-radius:30px !important;
  padding:7px 16px !important;
  font-weight:600;
  font-size:.85rem;
  background:#eef0ff;
  color:#4f46e5 !important;
  transition:background .15s ease, color .15s ease;
}
.notice-revamp .btm-lw a:hover{
  background:#4f46e5;
  color:#fff !important;
}
.notice-revamp .card.cat-exam .btm-lw a{ background:#f2edfe; color:#8b5cf6 !important; }
.notice-revamp .card.cat-exam .btm-lw a:hover{ background:#8b5cf6; color:#fff !important; }
.notice-revamp .card.cat-activity .btm-lw a{ background:#e8f9ef; color:#16a34a !important; }
.notice-revamp .card.cat-activity .btm-lw a:hover{ background:#16a34a; color:#fff !important; }

/* ============================================================
   notice-academic.php / notice-exam.php / notice-activity.php
   sidebar tab nav + full notice list
   default accent = indigo (academic); overridden per-page below
   ============================================================ */
.notice-revamp{
  --nz-accent:#4f46e5;
  --nz-accent-bg:#eef0ff;
  --nz-grad:linear-gradient(120deg, #4f46e5, #6d5ef1);
}
.notice-revamp.cat-exam{
  --nz-accent:#8b5cf6;
  --nz-accent-bg:#f2edfe;
  --nz-grad:linear-gradient(120deg, #8b5cf6, #c084fc);
}
.notice-revamp.cat-activity{
  --nz-accent:#16a34a;
  --nz-accent-bg:#e8f9ef;
  --nz-grad:linear-gradient(120deg, #16a34a, #22c55e);
}

.notice-revamp .resp-tabs-list.implinks{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item{
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1.5px solid #eef0f5;
  box-shadow:0 2px 8px rgba(35,41,82,.05);
  transition:border-color .15s ease, transform .15s ease;
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item a{
  display:block;
  padding:13px 18px !important;
  font-weight:600;
  font-size:.94rem;
  color:#333a4d !important;
  background:transparent !important;
  border:none !important;
  transition:background .15s ease, color .15s ease;
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item:hover{
  border-color:var(--nz-accent);
  transform:translateX(2px);
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item a:hover{
  background:var(--nz-accent-bg) !important;
  color:var(--nz-accent) !important;
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item.faq-active{
  background:var(--nz-grad);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(35,41,82,.2);
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item.faq-active a{
  color:#fff !important;
  background:transparent !important;
  border:none !important;
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item.faq-active a:hover{
  background:transparent !important;
  color:#fff !important;
}
.notice-revamp .resp-tabs-list.implinks li.resp-tab-item.faq-active:hover{
  transform:none;
}

.notice-revamp .notice-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(35,41,82,.08);
  padding:26px 20px 20px;
  position:relative;
  overflow:hidden;
}
.notice-revamp .notice-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:var(--nz-grad);
}
.notice-revamp .notes ol{
  list-style:none;
  padding:0;
  margin:0;
}
.notice-revamp .notes ol > li{
  border-bottom:none;
}
.notice-revamp .notes .notice{
  display:block;
  position:relative;
  overflow:hidden;
  padding:14px 18px 14px 24px;
  margin-bottom:12px;
  border-radius:12px;
  background:#fafbfd;
  border:1px solid #eef0f5;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.notice-revamp .notes .notice::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  width:4px;
  background:var(--nz-grad);
}
.notice-revamp .notes ol > li:last-child .notice{ margin-bottom:0; }
.notice-revamp .notes .notice:hover{
  background:var(--nz-accent-bg);
  border-color:var(--nz-accent-bg);
  box-shadow:0 6px 16px rgba(35,41,82,.08);
}
.notice-revamp .notes .notice p{
  display:inline-flex;
  align-items:center;
  margin:0 0 8px;
  font-size:.74rem;
  font-weight:600;
  color:var(--nz-accent) !important;
  background:#fff;
  padding:5px 12px;
  border-radius:20px;
  white-space:nowrap;
  border:1px solid var(--nz-accent-bg);
}
.notice-revamp .notes .notice p span{
  color:var(--nz-accent) !important;
  margin-left:4px;
  font-weight:700;
}
.notice-revamp .notes .notice a{
  display:block;
  font-size:.92rem;
  font-weight:500;
  line-height:1.5;
  color:#1e2233 !important;
}
.notice-revamp .notes .notice a + a{
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed #e6e8f0;
}
.notice-revamp .notes .notice a i{
  display:none;
}
.notice-revamp .notes .notice a:hover{
  color:var(--nz-accent) !important;
  text-decoration:underline;
}
.notice-revamp .notes .notice a.text-red{ color:#1e2233 !important; }

@media screen and (max-width: 767px){
  .notice-revamp .resp-tabs-list.implinks{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .notice-revamp .resp-tabs-list.implinks li.resp-tab-item{ flex:1 1 auto; }
  .notice-revamp .resp-tabs-list.implinks li.resp-tab-item a{ text-align:center; }
}