:root {
  --notice-shadow: 0 10px 34px rgba(22, 53, 108, .075)
}

.notification-page {
  background: #fff
}

.notice-hero {
  padding: 24px 0 36px;
  background: linear-gradient(135deg, #f2f6ff, #fbfdff);
  border-bottom: 1px solid var(--line)
}

.notice-hero.compact {
  padding: 20px 0
}

.notice-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.notice-hero-row>div>span {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue2);
  letter-spacing: .1em;
  text-transform: uppercase
}

.notice-hero h1 {
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 800;
  color: var(--blue);
  margin: 8px 0
}

.notice-hero p {
  color: var(--muted);
  margin: 0
}

.notice-hero-icon {
  font-size: 88px;
  color: #d9e6fa;
  margin-right: 6%
}

.notice-search {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--notice-shadow);
  margin-bottom: 25px
}

.notice-search form {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 10px
}

.notice-search-input {
  height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px
}

.notice-search-input i {
  margin-left: 13px;
  color: #8994a8
}

.notice-search-input input {
  border: 0;
  outline: 0;
  min-width: 0;
  flex: 1;
  padding: 0 11px;
  font-size: 12px;
}

.notice-search select {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  color: #526078;
  font-size: 12px;
}

.notice-search button {
  height: 44px;
  border: 0;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  padding: 0 17px;
  font-size: 11px;
  font-weight: 650
}

.notice-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--blue)
}

.notice-list-head h2 {
  font-size: 20px;
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 4px
}

.notice-list-head span {
  font-size: 12px;
  color: #7d879b
}

.notice-view-switch {
  display: flex;
  gap: 6px
}

.notice-view-switch button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #69758a
}

.notice-view-switch button.active {
  background: var(--blue);
  color: #fff
}

.notification-card {
  display: grid;
  grid-template-columns: 62px 48px minmax(0, 1fr) 38px;
  gap: 15px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}

.notification-card.priority {
  background: linear-gradient(90deg, #fff8f8, transparent);
  padding-left: 12px;
  padding-right: 12px
}

.notice-date {
  width: 62px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff
}

.notice-date strong {
  font-size: 24px;
  color: var(--blue)
}

.notice-date span {
  font-size: 8px;
  color: #637087;
  text-transform: uppercase
}

.notice-date small {
  font-size: 8px;
  color: #9aa3b3
}

.notice-symbol {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px
}

.notice-symbol.red {
  background: #e33640
}

.notice-symbol.blue {
  background: #1769d4
}

.notice-symbol.cyan {
  background: #10a3c2
}

.notice-symbol.green {
  background: #15966b
}

.notice-symbol.purple {
  background: #7949cc
}

.notice-symbol.gray {
  background: #8b95a6
}

.notice-labels {
  display: flex;
  gap: 6px
}

.notice-labels span,
.detail-notice-labels span {
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase
}

.label-important {
  background: #ffe8e9;
  color: #d62631
}

.label-new {
  background: #e8f1ff;
  color: #1262cc
}

.label-active {
  background: #e6f7ef;
  color: #108558
}

.label-expired {
  background: #eff1f4;
  color: #7b8494
}

.notice-main h3 {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
  margin: 8px 0
}

.notice-main h3 a:hover {
  color: var(--blue2)
}

.notice-main p {
  font-size: 13px;
  color: #6d788e;
  line-height: 1.6;
  margin: 0 0 9px
}

.notice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #8a94a7
}

.notice-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f0f4fa;
  color: var(--blue)
}

.notice-arrow:hover {
  background: var(--blue);
  color: #fff
}

.notification-list.grid-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 18px
}

.grid-view .notification-card {
  grid-template-columns: 48px 1fr 34px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 9px
}

.grid-view .notice-date {
  display: none
}

.grid-view .notice-symbol {
  align-self: start
}

.grid-view .notice-main p {
  display: none
}

.grid-view .notice-meta span:nth-child(2) {
  display: none
}

.notice-empty {
  text-align: center;
  padding: 55px;
  color: #7d879a
}

.notice-empty i {
  font-size: 48px;
  color: #c4cede
}

.notice-empty h3 {
  font-size: 16px;
  color: #425069
}

.notice-sidebar {
  top: 20px;
  display: grid;
  gap: 18px
}

.notice-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.notice-stat>div {
  padding: 15px 5px;
  border-radius: 9px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #0a52c5, #063587)
}

.notice-stat i {
  font-size: 21px
}

.notice-stat span {
  display: grid;
  font-size: 8px;
  color: #dbe7fa;
  margin-top: 6px
}

.notice-stat b {
  font-size: 17px;
  color: #fff
}

.notice-side-card {
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(22, 53, 108, .05)
}

.notice-side-card>h2 {
  font-size: 15px;
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 15px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--line)
}

.notice-side-card ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.notice-side-card li+li {
  border-top: 1px dashed var(--line)
}

/* Cổng thật: khối lọc dùng <button> thay <a href="?..."> (bấm lọc không điều hướng trang) —
   :is(a,button) + reset border/background/width/font mặc định của trình duyệt cho <button>,
   giữ đúng nhìn mockup vốn chỉ định nghĩa cho <a>. */
.notice-side-card li :is(a, button) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 0;
  border: 0;
  background: none;
  color: #4e5a70;
  font: inherit;
  text-align: left;
  cursor: pointer
}

.notice-side-card li span {
  display: flex;
  gap: 9px
}

.notice-side-card li b {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #edf3ff;
  color: var(--blue)
}

.deadline-item {
  display: grid;
  grid-template-columns: 43px 1fr;
  gap: 11px;
  padding: 11px 0
}

.deadline-item+.deadline-item {
  border-top: 1px dashed var(--line)
}

.deadline-item time {
  width: 43px;
  height: 49px;
  border-radius: 7px;
  background: #fff2e2;
  color: #d77a00;
  display: grid;
  place-items: center;
  align-content: center
}

.deadline-item time b {
  font-size: 17px
}

.deadline-item time span {
  font-size: 10px;
}

.deadline-item h3 {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 4px
}

.deadline-item small {
  font-size: 11px;
  color: #d87800
}

.notice-subscribe {
  padding: 21px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #0a4bb7, #073076)
}

.notice-subscribe>i {
  font-size: 31px
}

.notice-subscribe h2 {
  font-size: 16px;
  margin: 8px 0 3px
}

.notice-subscribe p {
  font-size: 11px;
  color: #dce8f9
}

.notice-subscribe form {
  height: 41px;
  display: flex;
  border-radius: 7px;
  overflow: hidden;
  background: #fff
}

.notice-subscribe input {
  border: 0;
  outline: 0;
  min-width: 0;
  flex: 1;
  padding: 0 11px;
  font-size: 12px;
}

.notice-subscribe button {
  width: 43px;
  border: 0;
  background: #ffad00;
  color: #fff
}

.notice-detail-card {
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--notice-shadow)
}

.detail-notice-labels {
  display: flex;
  gap: 7px
}

.notice-detail-card>h1 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.45;
  font-weight: 800;
  color: #182442;
  margin: 13px 0 18px
}

.notice-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: #7b8699
}

.notice-detail-meta button {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  padding: 6px 10px;
  font-size: 9px
}

.notice-summary {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  padding: 19px;
  margin: 24px 0;
  border-radius: 9px;
  background: #edf4ff
}

.notice-summary i {
  font-size: 29px;
  color: var(--blue)
}

.notice-summary p {
  font-size: 13px;
  line-height: 1.75;
  font-weight: 600;
  color: #34466a;
  margin: 0
}

.notice-body {
  font-size: 14px;
  line-height: 1.85;
  color: #344057
}

.notice-body h2 {
  font-size: 18px;
  color: var(--blue);
  font-weight: 750;
  margin: 27px 0 12px
}

.notice-body li {
  margin-bottom: 7px
}

.notice-contact-box {
  padding: 18px;
  border-radius: 9px;
  background: #fff8e9;
  border-left: 4px solid #eda00d;
  margin: 22px 0
}

.notice-contact-box h3 {
  font-size: 14px;
  color: #9b6500
}

.notice-contact-box p {
  font-size: 12px;
  margin: 0
}

.notice-signature {
  width: 270px;
  margin: 30px 3% 25px auto;
  text-align: center;
  display: grid;
  gap: 3px
}

.notice-signature span,
.notice-signature strong {
  font-size: 11px
}

.notice-signature em {
  font-size: 9px;
  color: #8993a6;
  margin: 20px 0
}

.notice-signature b {
  font-size: 13px
}

.notice-attachments {
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.attachment-head {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.attachment-head h2 {
  font-size: 16px;
  color: var(--blue)
}

.attachment-head span {
  font-size: 11px;
  color: #8993a6
}

.notice-attachments article {
  display: grid;
  grid-template-columns: 41px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px dashed var(--line)
}

.notice-attachments article>i {
  font-size: 33px
}

.notice-attachments .pdf {
  color: #db343d
}

.notice-attachments .word {
  color: #1769d4
}

.notice-attachments h3 {
  font-size: 13px;
  margin: 0 0 4px
}

.notice-attachments small {
  font-size: 11px;
  color: #8b95a7
}

/* Cổng thật: nút tải dùng <a href download> (link file thật) thay <button> giả lập của mockup —
   :is(a,button) + display/align/text-decoration reset để <a> hiện đúng như 1 nút bấm thật. */
.notice-attachments :is(a, button) {
  height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--blue);
  font-size: 11px;
  text-decoration: none;
}

.notice-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.notice-detail-footer>div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px
}

.notice-detail-footer a,
.notice-detail-footer button {
  border: 0;
  border-radius: 14px;
  padding: 6px 9px;
  background: #f0f4f9;
  color: #526078
}

.related-notices {
  margin-top: 30px
}

.related-notices>a {
  display: grid;
  grid-template-columns: 55px 1fr 20px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px
}

.related-notices time {
  color: var(--blue);
  font-weight: 750
}

.related-notices span {
  font-size: 13px;
}

.notice-action-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  box-shadow: var(--notice-shadow)
}

/* Cổng thật: "Tải thông báo" dùng <a href download> (link file thật) thay <button> giả lập của
   mockup — :is(a,button) + display/align/text-decoration reset để <a> hiện đúng như nút bấm thật,
   cùng lớp lỗi "chọn theo tag" đã lặp lại nhiều lần trong dự án (xem .notice-attachments). */
.notice-action-card :is(a, button) {
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--blue);
  font-size: 12px;
  text-decoration: none;
}

.notice-action-card .primary {
  grid-column: 1/-1;
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

.notice-action-card>div {
  grid-column: 1/-1;
  display: grid;
  text-align: center;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: #8993a6
}

.notice-action-card>div strong {
  font-size: 18px;
  color: #d87b00
}

.notice-extra {
  margin: 0
}

.notice-extra>div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}

.notice-extra dt {
  color: #8993a6;
  font-weight: 500
}

.notice-extra dd {
  margin: 0;
  font-weight: 650
}

.notice-extra dd.active {
  color: #138858
}

.mini-notice {
  display: grid;
  grid-template-columns: 33px 1fr;
  gap: 10px;
  padding: 11px 0
}

.mini-notice+.mini-notice {
  border-top: 1px dashed var(--line)
}

.mini-notice>i {
  font-size: 28px;
  color: var(--blue)
}

.mini-notice h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 4px
}

.mini-notice small {
  font-size: 12px;
  color: #8b95a7
}

.registration-modal {
  border: 0;
  border-radius: 12px
}

.registration-modal h2 {
  font-size: 17px;
  color: var(--blue);
  font-weight: 750
}

.registration-modal .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.registration-modal label {
  display: grid;
  gap: 6px;
  font-size: 10px;
  color: #5d687d;
  font-weight: 650
}

.registration-modal input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  font-size: 11px
}

.registration-modal .modal-footer button {
  height: 39px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #526078;
  font-size: 10px
}

.registration-modal .modal-footer .submit-registration {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

@media(max-width:1199px) {
  .notice-sidebar {
    position: static !important
  }
  .notice-search form {
    grid-template-columns: 1fr 1fr
  }
  .notice-search-input {
    grid-column: 1/-1
  }
  .notification-list.grid-view {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:767px) {
  .notice-hero {
    padding: 16px 0 25px
  }
  .notice-hero-icon {
    display: none
  }
  .notice-hero h1 {
    font-size: 24px
  }
  .notice-hero p {
    font-size: 11px
  }
  .notice-content.section,
  .notice-detail-page.section {
    padding-top: 20px
  }
  .notice-search {
    padding: 13px
  }
  .notice-search form {
    grid-template-columns: 1fr
  }
  .notice-search-input {
    grid-column: auto
  }
  .notice-search button span {
    display: inline
  }
  .notice-list-head h2 {
    font-size: 15px
  }
  .notification-card {
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    gap: 10px;
    padding: 16px 0
  }
  .notice-date {
    display: none
  }
  .notice-symbol {
    width: 42px;
    height: 42px;
    font-size: 17px;
    align-self: start
  }
  .notice-main h3 {
    font-size: 12px;
    margin: 7px 0
  }
  .notice-main p {
    display: none
  }
  .notice-meta span:nth-child(2) {
    display: none
  }
  .notice-arrow {
    width: 30px;
    height: 30px
  }
  .notification-list.grid-view {
    display: block;
    margin-top: 0
  }
  .grid-view .notification-card {
    display: grid;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 16px 0
  }
  .notice-stat>div {
    padding: 12px 3px
  }
  .notice-side-card {
    padding: 17px
  }
  .notice-detail-card {
    padding: 18px;
    border-radius: 10px
  }
  .notice-detail-card>h1 {
    font-size: 22px
  }
  .notice-detail-meta button {
    display: none
  }
  .notice-summary {
    grid-template-columns: 30px 1fr;
    padding: 15px
  }
  .notice-summary i {
    font-size: 23px
  }
  .notice-summary p {
    font-size: 12px
  }
  .notice-body {
    font-size: 13px
  }
  .notice-body h2 {
    font-size: 16px
  }
  .notice-signature {
    width: 220px
  }
  .notice-attachments article {
    grid-template-columns: 35px 1fr auto
  }
  .notice-attachments button span {
    display: none
  }
  .notice-detail-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px
  }
  .related-notices>a {
    grid-template-columns: 46px 1fr
  }
  .related-notices>a>i {
    display: none
  }
  .registration-modal .modal-body {
    grid-template-columns: 1fr
  }
}

@media print {
  header,
  .smart-search,
  .footer,
  .backtop,
  .video-modal,
  .notice-hero,
  .notice-sidebar,
  .notice-detail-footer,
  .related-notices,
  .notice-action-card,
  .print-notice {
    display: none !important
  }
  .notice-detail-page {
    padding: 0
  }
  .notice-detail-card {
    border: 0;
    box-shadow: none;
    padding: 0
  }
  .notice-attachments button {
    display: none
  }
}