.news-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.news-page .page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.news-page .app {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  flex: 1;
  flex-grow: 1;
  width: 100%;
  background-color: #ffffff;
}

.news-page .header {
  display: flex;
  flex-direction: column;
  height: 72px;
  align-items: flex-start;
  padding: 0px 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  margin: 0;
  background-color: #ffffff;
  box-shadow: 0px 1px 2px -1px #0000001a, 0px 1px 3px #0000001a;
}

.news-page .container {
  display: flex;
  height: 71.99px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 6.1e-05px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.news-page .link {
  display: flex;
  width: 212.41px;
  height: 39.99px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.news-page .icon {
  position: relative;
  width: 32px;
  height: 32px;
}

.news-page .vector {
  position: absolute;
  width: 83.34%;
  height: 58.33%;
  top: 16.67%;
  left: 4.16%;
}

.news-page .img {
  position: absolute;
  width: 25.00%;
  height: 25.00%;
  top: 33.33%;
  left: 33.33%;
}

.news-page .div {
  display: flex;
  flex-direction: column;
  height: 39.99px;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.news-page .div-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 24px;
}

.news-page .text-wrapper {
  position: absolute;
  top: -2px;
  left: 0;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #101727;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.news-page .container-2 {
  display: flex;
  height: 15.99px;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.news-page .p {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  margin-right: -4.59px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #495565;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.news-page .navigation {
  position: relative;
  width: 506px;
  height: 21px;
}

.news-page .link-2 {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 60px;
  height: 20px;
  display: flex;
}

.news-page .text-wrapper-2 {
  margin-top: -1.2px;
  width: 63px;
  height: 20px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #495565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.news-page .link-3 {
  position: absolute;
  top: 1px;
  left: 93px;
  width: 60px;
  height: 20px;
  display: flex;
}

.news-page .text-wrapper-3 {
  margin-top: -1.2px;
  width: 61px;
  height: 20px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #495565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.news-page .link-4 {
  position: absolute;
  top: 1px;
  left: 185px;
  width: 75px;
  height: 20px;
  display: flex;
}

.news-page .text-wrapper-4 {
  margin-top: -1.2px;
  width: 75px;
  height: 20px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #495565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.news-page .link-5 {
  position: absolute;
  top: 1px;
  left: 292px;
  width: 93px;
  height: 20px;
  display: flex;
}

.news-page .text-wrapper-5 {
  margin-top: -1.2px;
  width: 93px;
  height: 20px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #155cfb;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.news-page .link-6 {
  position: absolute;
  top: 1px;
  left: 416px;
  width: 87px;
  height: 20px;
  display: flex;
}

.news-page .text-wrapper-6 {
  margin-top: -1.2px;
  width: 90px;
  height: 20px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #495565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.news-page .news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 1;
  flex-grow: 1;
  background-color: #ffffff;
}

.news-page .news-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 39.6px 0px 39.6px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background: linear-gradient(117deg,
      rgba(239, 246, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%);
}

.news-page .news-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

.news-page .icon-2 {
  position: relative;
  width: 64px;
  height: 64px;
}

.news-page .vector-2 {
  position: absolute;
  width: 20.83%;
  height: 0;
  top: 70.83%;
  left: 37.50%;
}

.news-page .vector-3 {
  position: absolute;
  width: 33.33%;
  height: 0;
  top: 54.17%;
  left: 37.50%;
}

.news-page .vector-4 {
  position: absolute;
  width: 83.33%;
  height: 83.33%;
  top: 4.17%;
  left: 4.17%;
}

.news-page .vector-5 {
  position: absolute;
  width: 33.33%;
  height: 16.67%;
  top: 20.83%;
  left: 37.50%;
}

.news-page .text-row-center {
  justify-content: center;
  display: flex;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news-page .news-heading {
  position: relative;
  width: 400px;
  margin-top: -1.00px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #101727;
  font-size: 48px;
  text-align: center;
  letter-spacing: 0;
  line-height: 48px;
}

.news-page .text-wrapper-7 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #495565;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: 32.5px;
}

.news-page .news-list {
  width: 1080px;
  gap: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  min-height: 5219px;
  padding-bottom: 48px;
}

.news-page .news-card-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  height: 444px;
  padding: 1px;
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-media {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .iframe {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 441.99px;
  overflow: hidden;
}

.news-page .media-embed {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-page .news-card-body {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  width: 100%;
  height: 441.99px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.news-page .news-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news-page .news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news-page .icon-3 {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-page .icon-3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.news-page .vector-6 {
  position: absolute;
  width: 0;
  height: 16.67%;
  top: 4.17%;
  left: 29.17%;
}

.news-page .vector-7 {
  position: absolute;
  width: 0;
  height: 16.67%;
  top: 4.17%;
  left: 62.50%;
}

.news-page .vector-8 {
  position: absolute;
  width: 75.00%;
  height: 75.00%;
  top: 12.50%;
  left: 8.33%;
}

.news-page .vector-9 {
  position: absolute;
  width: 75.00%;
  height: 0;
  top: 37.50%;
  left: 8.33%;
}

.news-page .text {
  position: relative;
  width: 31.39px;
  height: 20px;
}

.news-page .text-wrapper-8 {
  position: absolute;
  top: -1px;
  left: 0;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #155dfc;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}


.news-page .text-row-left {
  display: flex;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news-page .text-wrapper-10 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #1c398e;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 30px;
}

.news-page .paragraph-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px 0px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 0px 10px 10px 0px;
  border-left-width: 4px;
  border-left-style: solid;
  border-color: #2b7fff;
  background: linear-gradient(90deg,
      rgba(239, 246, 255, 1) 0%,
      rgba(236, 254, 255, 1) 100%);
}

.news-page .paragraph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.news-page .hero-subtitle {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Arimo-BoldItalic", Helvetica;
  font-weight: 700;
  font-style: italic;
  color: #1447e6;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
}

.news-page .text-wrapper-11 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #364153;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.news-page .news-card-2 {
  height: 555px;
  top: 492px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-2-content {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.news-page .text-3 {
  position: relative;
  width: 52.42px;
  height: 20px;
}

.news-page .text-4 {
  position: relative;
  width: 74.1px;
  height: 23.99px;
  background-color: #dbeafe;
  border-radius: 26843500px;
}

.news-page .text-wrapper-12 {
  width: calc(100% - 18px);
  height: calc(100% - 8px);
  top: 3px;
  left: 12px;
  color: #1447e6;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  letter-spacing: 0;
}

.news-page .news-tagline {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-BoldItalic", Helvetica;
  font-weight: 700;
  font-style: italic;
  color: #1447e6;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
}

.news-page .card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  /* Desktop: tạo khoảng cách đồng đều giữa đường kẻ và nút "Xem chi tiết"
       để đồng bộ với các card khác */
  padding: 12px 32px 16px;
  border-top-width: 0.8px;
  border-top-style: solid;
  border-color: #e5e7eb;
}

.news-page .btn-detail-compact {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  padding: 10px 24px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
  box-shadow: 0px 2px 4px -2px #0000001a, 0px 4px 6px -1px #0000001a;
  background: linear-gradient(90deg,
      rgba(21, 93, 252, 1) 0%,
      rgba(0, 146, 184, 1) 100%);
}

.news-page .text-wrapper-14 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.news-page .vector-10 {
  position: absolute;
  width: 25.00%;
  height: 25.00%;
  top: 8.33%;
  left: 58.33%;
}

.news-page .vector-11 {
  position: absolute;
  width: 45.83%;
  height: 45.83%;
  top: 8.33%;
  left: 37.50%;
}

.news-page .vector-12 {
  position: absolute;
  width: 62.50%;
  height: 62.50%;
  top: 20.83%;
  left: 8.33%;
}

.news-page .news-card-2-media-wrapper {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .news-card-2-media {
  position: relative;
  width: 538.8px;
  height: 554.68px;
  aspect-ratio: 0.97;
  overflow: hidden;
}

.news-page .news-card-2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-page .news-card-3 {
  height: 746px;
  top: 1095px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-3-media-wrapper {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .news-card-3-media {
  position: relative;
  width: 539.2px;
  height: 746.39px;
  overflow: hidden;
}

.news-page .news-card-3-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-page .news-card-3-content {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.news-page .news-card-3-meta {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 23.99px;
}

.news-page .icon-4 {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-page .icon-4 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.news-page .text-5 {
  position: absolute;
  top: 2px;
  left: 28px;
  width: 31px;
  height: 20px;
  display: flex;
}

.news-page .text-wrapper-15 {
  margin-top: -1.2px;
  width: 32px;
  height: 20px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #155dfc;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.news-page .text-6 {
  position: absolute;
  top: 0;
  left: 67px;
  width: 74px;
  height: 24px;
  display: flex;
  background-color: #dbeafe;
  border-radius: 26843500px;
}

.news-page .text-wrapper-16 {
  margin-top: 3.2px;
  margin-left: 11.9px;
  margin-right: 0.2px;
  flex: 1;
  margin-bottom: 4.8px;
  width: 62px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #1447e6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
}

.news-page .text-block {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.news-page .tagline-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 16px 16px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 0px 10px 10px 0px;
  border-left-width: 4px;
  border-left-style: solid;
  border-color: #2b7fff;
  background: linear-gradient(90deg,
      rgba(239, 246, 255, 1) 0%,
      rgba(236, 254, 255, 1) 100%);
}

.news-page .news-quote-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #eff6ff;
  border-radius: 10px;
  border: 0.8px solid;
  border-color: #bddaff;
}

.news-page .text-wrapper-17 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-Italic", Helvetica;
  font-weight: 400;
  font-style: italic;
  color: #364153;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}

.news-page .news-card-cta-wrapper {
  display: flex;
  flex-direction: column;
  width: 459.2px;
  height: 64.8px;
  align-items: flex-start;
  padding: 16.8px 296.56px 0px 0px;
  position: relative;
  border-top-width: 0.8px;
  border-top-style: solid;
  border-color: #e5e7eb;
}

.news-page .btn-detail {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  box-shadow: 0px 2px 4px -2px #0000001a, 0px 4px 6px -1px #0000001a;
  background: linear-gradient(90deg,
      rgba(21, 93, 252, 1) 0%,
      rgba(0, 146, 184, 1) 100%);
}

.news-page .text-wrapper-18 {
  position: absolute;
  top: 10px;
  left: 24px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.news-page .icon-5 {
  position: absolute;
  top: 14px;
  left: 119px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-page .icon-5 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.news-page .news-card-4 {
  height: 627px;
  top: 1889px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-4-content {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  align-self: start;
  width: 100%;
  height: 627px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.news-page .news-card-4-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news-page .text-7 {
  position: relative;
  width: 74.36px;
  height: 23.99px;
  background-color: #dbeafe;
  border-radius: 26843500px;
}

.news-page .text-wrapper-19 {
  position: absolute;
  width: calc(100% - 19px);
  height: calc(100% - 8px);
  top: 3px;
  left: 12px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #1447e6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
}

.news-page .news-card-4-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px 12px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 0px 10px 10px 0px;
  border-left-width: 4px;
  border-left-style: solid;
  border-color: #2b7fff;
  background: linear-gradient(90deg,
      rgba(239, 246, 255, 1) 0%,
      rgba(236, 254, 255, 1) 100%);
}

.news-page .news-card-4-cta-wrapper {
  display: flex;
  flex-direction: column;
  width: 459.2px;
  height: 64.8px;
  align-items: flex-start;
  padding: 0px 296.56px 0px 0px;
  position: relative;
  margin-bottom: -7.79px;
  border-top-width: 0.8px;
  border-top-style: solid;
  border-color: #e5e7eb;
}

/* Tăng khoảng cách line với nút cho card 4 nhưng giữ kích thước nút giống các card khác */
.news-page .news-card-4-cta-wrapper .btn-detail {
  margin-top: 12px;
}

.news-page .news-card-4-media {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  background: linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .news-card-4-media-wrapper {
  position: relative;
  width: 539.2px;
  height: 626.79px;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%);
}

.news-page .news-card-4-media {
  width: 539px;
  height: 627px;
  overflow: hidden;
}

.news-page .news-card-4-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-page .news-card-5 {
  height: 685px;
  top: 2564px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-5-media {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .news-card-5-media-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 0.79;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  border-radius: 16px 0 0 16px;
}

.news-page .news-card-5-image {
  position: absolute;
  width: calc(100% + 4px);
  top: calc(50.00% - 342px);
  left: 0;
  height: 683px;
  aspect-ratio: 0.8;
  object-fit: cover;
  border-radius: 16px 0 0 16px;
}

.news-page .news-card-5-content {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  width: 100%;
  height: 683px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.news-page .emergency-note {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #364153;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}

.news-page .news-card-6 {
  height: 517px;
  top: 3297px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-6-content {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
}

.news-page .text-wrapper-20 {
  margin-top: 2.9px;
  margin-left: 11.8px;
  margin-right: 0.3px;
  flex: 1;
  margin-bottom: 5.1px;
  width: 62px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #1447e6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
}

.news-page .news-card-6-media {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  background: linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .img-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 524.79px;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%);
}

.news-page .news-card-6-image {
  position: absolute;
  width: 100%;
  top: calc(50.00% - 262px);
  left: 0;
  height: 517px;
  aspect-ratio: 0.69;
  object-fit: cover;
}

.news-page .news-card-7 {
  height: 540px;
  top: 3861px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .news-card-7-media-wrapper {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(117deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(206, 250, 254, 1) 100%);
}

.news-page .news-card-7-media {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 539.52px;
  overflow: hidden;
}

.news-page .news-card-7-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-page .text-8 {
  position: relative;
  width: 73.88px;
  height: 23.99px;
  background-color: #dbeafe;
  border-radius: 26843500px;
}

.news-page .news-card-8 {
  height: 770px;
  top: 4449px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  position: absolute;
  left: 0;
  width: 1080px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #dbeafe;
  box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
}

.news-page .text-9 {
  display: flex;
  width: 77px;
  align-items: center;
  justify-content: center;
  padding: 0px 12px;
  position: relative;
  background-color: #dbeafe;
  border-radius: 26843500px;
}

.news-page .text-wrapper-21 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  margin-left: -1.00px;
  margin-right: -1.00px;
  white-space: nowrap;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #1447e6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16px;
}

.news-page .news-card-8-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #eff6ff;
  border-radius: 10px;
  border: 0.8px solid;
  border-color: #bddaff;
}

.news-page .cis-program-note {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #4a5565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}

.news-page .news-card-8-cta-wrapper {
  display: flex;
  flex-direction: column;
  width: 459.2px;
  height: 64.8px;
  align-items: flex-start;
  padding: 10px 296.56px 0px 0px;
  position: relative;
  border-top-width: 0.8px;
  border-top-style: solid;
  border-color: #e5e7eb;
}

.news-page .news-card-8-media {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 770.39px;
}

.news-page .news-card-8-image {
  position: absolute;
  width: calc(100% + 46px);
  top: calc(50.00% - 385px);
  left: 0;
  height: 770px;
  aspect-ratio: 0.76;
  object-fit: cover;
}

.news-page .news-cta {
  gap: 24px;
  padding: 32px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  background-color: #eff6ff;
  border-radius: 16px;
  border: 0.8px solid;
  border-color: #bddaff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  margin-top: 32px;
  margin-bottom: 32px;
}

.news-page .cta-heading {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Arimo-Bold", Helvetica;
  font-weight: 700;
  color: #101727;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
  white-space: nowrap;
}

.news-page .news-cta-actions {
  display: flex;
  width: 1006.4px;
  height: 64px;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 0px 0.01px 0px 0px;
  position: relative;
}

.news-page .btn-call {
  position: relative;
  width: 172.75px;
  height: 64px;
  background-color: #155dfc;
  border-radius: 10px;
}

.news-page .vector-wrapper {
  position: absolute;
  top: 22px;
  left: 40px;
  width: 20px;
  height: 20px;
}

.news-page .vector-13 {
  position: absolute;
  width: 75.00%;
  height: 75.00%;
  top: 8.33%;
  left: 8.33%;
}

.news-page .text-wrapper-22 {
  position: absolute;
  top: 18px;
  left: 68px;
  font-family: "Arimo-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.news-page .btn-email {
  position: relative;
  width: 177.11px;
  height: 64px;
  background-color: #155dfc;
  border-radius: 10px;
}

.news-page .vector-14 {
  position: absolute;
  width: 75.00%;
  height: 58.33%;
  top: 16.67%;
  left: 8.33%;
}


/* ==================== TABLET RESPONSIVE (901px - 1279px) ==================== */
@media screen and (max-width: 1279px) and (min-width: 901px) {
  .news-page {
    min-width: 100%;
    width: 100%;
  }

  /* Adjust main container padding */
  .news-page .app {
    padding-top: 72px;
  }

  /* News Hero Section */
  .news-page .news-hero {
    padding: 0px 32px;
  }

  .news-page .news-hero-inner {
    padding: 32px 0;
  }

  .news-page .news-heading {
    font-size: 42px;
    line-height: 52px;
  }

  .news-page .text-wrapper-7 {
    font-size: 18px;
    line-height: 28px;
  }

  /* News List Container */
  .news-page .news-list {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: auto !important;
  }

  /* All News Cards - Maintain desktop 2-column grid layout */
  .news-page .news-card-featured,
  .news-page .news-card-2,
  .news-page .news-card-3,
  .news-page .news-card-4,
  .news-page .news-card-5,
  .news-page .news-card-6,
  .news-page .news-card-7,
  .news-page .news-card-8 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 450px !important;
    margin-bottom: 0;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
  }

  /* Image Containers - Fill grid column */
  .news-page .news-card-media,
  .news-page .news-card-2-media-wrapper,
  .news-page .news-card-3-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media,
  .news-page .news-card-6-media,
  .news-page .news-card-7-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
  }

  /* Image wrappers */
  .news-page .iframe,
  .news-page .news-card-2-media,
  .news-page .news-card-3-media,
  .news-page .news-card-4-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media-wrapper,
  .news-page .img-wrapper,
  .news-page .news-card-7-media,
  .news-page .news-card-8-media {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }

  /* Images - Cover fit */
  .news-page .media-embed,
  .news-page .news-card-2-media img,
  .news-page .news-card-3-media img,
  .news-page .news-card-4-media img,
  .news-page .news-card-5-image,
  .news-page .news-card-6-image,
  .news-page .news-card-7-media img,
  .news-page .news-card-8-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Fix absolute positioned images */
  .news-page .news-card-5-image,
  .news-page .news-card-6-image,
  .news-page .news-card-8-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  /* Content Columns */
  .news-page .news-card-body,
  .news-page .news-card-2-content,
  .news-page .news-card-3-content,
  .news-page .news-card-4-content,
  .news-page .news-card-5-content,
  .news-page .news-card-6-content {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100% !important;
    padding: 24px !important;
    gap: 16px;
  }

  /* Meta information */
  .news-page .news-card-meta,
  .news-page .news-card-3-meta,
  .news-page .news-card-4-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  /* Text sizing for tablet */
  .news-page .text-wrapper-10 {
    font-size: 20px !important;
    line-height: 28px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-page .text-wrapper-11 {
    font-size: 14px !important;
    line-height: 20px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Button containers */
  .news-page .card-footer,
  .news-page .news-card-cta-wrapper,
  .news-page .news-card-4-cta-wrapper,
  .news-page .news-card-8-cta-wrapper {
    margin-top: auto;
    padding-top: 16px;
    border-top: 0.8px solid #e5e7eb;
    width: 100% !important;
    height: auto !important;
  }

  /* CTA Section */
  .news-page .news-cta {
    width: calc(100% - 64px);
    max-width: 1080px;
    margin: 32px 32px;
    padding: 32px;
  }

  .news-page .cta-heading {
    font-size: 28px;
    line-height: 36px;
    white-space: normal;
  }

  .news-page .news-cta-actions {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .news-page .btn-call,
  .news-page .btn-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 160px;
    height: 56px;
    padding: 0 20px;
    position: relative;
  }

  .news-page .btn-call .vector-wrapper,
  .news-page .btn-email .vector-wrapper,
  .news-page .btn-call .text-wrapper-22,
  .news-page .btn-email .text-wrapper-22 {
    position: relative;
    top: auto;
    left: auto;
  }

  .news-page .btn-call .vector-wrapper,
  .news-page .btn-email .vector-wrapper {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  /* Footer - Use main.css styles but ensure proper spacing */
  .news-page .footer {
    width: 100% !important;
    padding: 50px 32px 20px !important;
  }

  .news-page .container-45 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    max-width: 1080px !important;
    margin: 0 auto 40px !important;
    padding: 0 !important;
  }

  .news-page .container-46,
  .news-page .container-48,
  .news-page .container-51 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .news-page .container-52 {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 30px 0 0 !important;
  }
}

/* ==================== TABLET RESPONSIVE (768px - 900px) ==================== */
/* Tablet Responsive Styles - Only for 768px-900px */
@media screen and (max-width: 900px) and (min-width: 768px) {
  .news-page {
    min-width: 100%;
    width: 100%;
  }

  .news-page .news-list {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 20px 48px;
    position: relative;
  }

  /* Card Structure - Keep 2 columns with 5fr/7fr ratio */
  .news-page .news-card-featured,
  .news-page .news-card-2,
  .news-page .news-card-3,
  .news-page .news-card-4,
  .news-page .news-card-5,
  .news-page .news-card-6,
  .news-page .news-card-7,
  .news-page .news-card-8 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 24px;
    display: grid !important;
    /* Match desktop: news-card-8-image takes exactly half card width */
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    /* Remove outer padding so the news-card-8-image truly occupies half the card edge-to-edge */
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  /* Image Column - Aspect Ratio Control */
  .news-page .news-card-media,
  .news-page .news-card-2-media-wrapper,
  .news-page .news-card-3-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media,
  .news-page .news-card-6-media,
  .news-page .news-card-7-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* Let the grid row height define the news-card-8-image height (avoid shrinking the news-card-8-image column) */
    aspect-ratio: auto;
    overflow: hidden;
    margin: 0 !important;
    border-radius: 0;
  }

  /* Ensure inner news-card-8-image frames fill the whole news-card-8-image column (override fixed px widths) */
  .news-page .news-card-2-media,
  .news-page .news-card-3-media,
  .news-page .news-card-4-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-7-media,
  .news-page .news-card-8-media {
    width: 100% !important;
    height: 100% !important;
    align-self: stretch;
  }

  .news-page .iframe,
  .news-page .news-card-2-media,
  .news-page .news-card-3-media,
  .news-page .news-card-4-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media-wrapper,
  .news-page .img-wrapper,
  .news-page .news-card-7-media,
  .news-page .news-card-8-media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 12px 0 0 12px;
  }

  /* Remove redundant top-left/bottom-left radius for cards where news-card-8-image is on the RIGHT side (tablet) */
  .news-page .news-card-2 .news-card-2-media,
  .news-page .news-card-4 .news-card-4-media-wrapper,
  .news-page .news-card-4 .news-card-4-media,
  .news-page .news-card-6 .img-wrapper,
  .news-page .news-card-8 .news-card-8-media {
    border-radius: 0 12px 12px 0 !important;
  }

  /* Keep the generic left-side rounding for images that are on the LEFT */
  .news-page .news-card-featured .iframe,
  .news-page .news-card-3 .news-card-3-media,
  .news-page .news-card-5 .news-card-5-media-wrapper,
  .news-page .news-card-7 .news-card-7-media {
    border-radius: 12px 0 0 12px !important;
  }

  /* Fix news-card-5-image positioning on tablet */
  .news-page .news-card-5-image {
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    height: 100%;
    border-radius: 12px 0 0 12px;
  }

  /* Ensure absolutely-positioned desktop images don't break tablet half-width layout */
  .news-page .news-card-6-image,
  .news-page .news-card-8-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  .news-page .img-wrapper,
  .news-page .news-card-8-media {
    position: relative;
    overflow: hidden;
  }

  .news-page .media-embed,
  .news-page .news-card-2-media img,
  .news-page .news-card-3-media img,
  .news-page .news-card-4-media img,
  .news-page .news-card-5-image,
  .news-page .news-card-6-image,
  .news-page .news-card-7-media img,
  .news-page .news-card-8-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Fix special cases that use calc(...) widths so they don't overflow on tablet */
  .news-page .news-card-8-image,
  .news-page .news-card-5-image,
  .news-page .news-card-6-image {
    max-width: 100%;
  }

  /* Content Column - Flex Column with Normalized Padding */
  .news-page .news-card-body,
  .news-page .news-card-2-content,
  .news-page .news-card-3-content,
  .news-page .news-card-4-content,
  .news-page .news-card-5-content,
  .news-page .news-card-6-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px !important;
    gap: 12px;
  }

  /* Text Clamping */
  .news-page .text-wrapper-10 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .news-page .text-wrapper-11 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* Meta Info Row - Allow Wrapping */
  .news-page .news-card-meta,
  .news-page .news-card-3-meta,
  .news-page .news-card-4-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .news-page .icon-3,
  .news-page .icon-4 {
    flex-shrink: 0;
  }

  /* Push Button to Bottom */
  .news-page .card-footer,
  .news-page .news-card-cta-wrapper,
  .news-page .news-card-4-cta-wrapper,
  .news-page .news-card-8-cta-wrapper {
    margin-top: auto;
    padding-top: 16px;
    border-top: 0.8px solid #e5e7eb;
  }

  .news-page .news-hero {
    padding: 0px 20px;
  }

  .news-page .news-hero-inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .news-page .news-cta {
    max-width: calc(100% - 40px);
    margin: 32px 20px;
    padding: 24px;
  }

  .news-page .news-cta-actions {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .news-page .btn-call,
  .news-page .btn-email {
    width: auto;
    min-width: 150px;
  }

  /* CTA section fixes (tablet): prevent wrapping overflow and make both buttons identical */
  .news-page .cta-heading {
    white-space: normal;
  }

  .news-page .news-cta-actions {
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    gap: 12px;
  }

  .news-page .btn-call,
  .news-page .btn-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 18px;
    border-radius: 12px;
  }

  .news-page .btn-call .vector-wrapper,
  .news-page .btn-email .vector-wrapper,
  .news-page .btn-call .text-wrapper-22,
  .news-page .btn-email .text-wrapper-22 {
    position: relative;
    top: auto;
    left: auto;
  }

  .news-page .btn-call .vector-wrapper,
  .news-page .btn-email .vector-wrapper {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  /* Header Adjustments */
  .news-page .header {
    padding: 0px 24px;
    height: auto;
    min-height: 72px;
  }

  .news-page .container {
    flex-wrap: nowrap;
    gap: 0;
    padding: 16px 0;
    justify-content: space-between;
  }

  .news-page .link {
    width: auto;
    min-width: auto;
    flex-shrink: 0;
  }

  .news-page .navigation {
    position: relative;
    width: auto;
    max-width: none;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
  }

  .news-page .link-2,
  .news-page .link-3,
  .news-page .link-4,
  .news-page .link-5,
  .news-page .link-6 {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
  }

  .news-page .text-wrapper-2,
  .news-page .text-wrapper-3,
  .news-page .text-wrapper-4,
  .news-page .text-wrapper-5,
  .news-page .text-wrapper-6 {
    font-size: 14px;
    white-space: nowrap;
  }

  .news-page .news {
    width: 100%;
  }

  /* Footer Adjustments for 768-900px tablet */
  .news-page .footer {
    width: 100% !important;
    padding: 50px 24px 20px !important;
  }

  .news-page .container-45 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    max-width: 100% !important;
    margin: 0 auto 40px !important;
    padding: 0 !important;
  }

  .news-page .container-46,
  .news-page .container-48,
  .news-page .container-51 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .news-page .container-52 {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 30px 0 0 !important;
  }

  /* Footer Adjustments - 2 Column Grid Layout - Commented out, using main.css styles
  .news-page .footer {
    padding: 48px 24px 0px;
    height: auto;
    min-height: auto;
  }

  .news-page .site-footer-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    height: auto;
    padding: 0;
    max-width: 100%;
    align-items: flex-start;
  }

  .news-page .site-footer-about,
  .news-page .site-footer-contact,
  .news-page .site-footer-mission {
    width: 100%;
    min-width: 100%;
    height: auto;
    position: relative;
    left: auto;
    top: auto;
  }

  .news-page .site-footer-mission {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .news-page .site-footer-about,
  .news-page .site-footer-contact {
    text-align: left;
  }

  .news-page .site-footer-bottom {
    grid-column: 1 / -1;
    padding: 32px 0 24px;
    height: auto;
    text-align: center;
  }
  End of footer responsive styles */

  /* Overall Layout Improvements */
  .news-page .news-hero {
    padding: 0px 24px;
  }

  .news-page .news-hero-inner {
    padding: 24px 0;
  }

  .news-page .news-heading {
    font-size: 40px;
    line-height: 48px;
  }

  .news-page .text-wrapper-7 {
    font-size: 18px;
    line-height: 28px;
  }

  .news-page .news-list {
    padding: 0 24px 48px;
  }

  .news-page .news-cta {
    max-width: calc(100% - 48px);
    margin: 32px 24px;
    padding: 32px;
  }
}

/* Additional breakpoint for 820px - Still within tablet range */
@media screen and (max-width: 820px) and (min-width: 768px) {

  .news-page .news-card-featured,
  .news-page .news-card-2,
  .news-page .news-card-3,
  .news-page .news-card-4,
  .news-page .news-card-5,
  .news-page .news-card-6,
  .news-page .news-card-7,
  .news-page .news-card-8 {
    /* Keep news-card-8-image at half width (same as desktop intent) */
    grid-template-columns: 1fr 1fr !important;
  }

  .news-page .text-wrapper-10 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .news-page .text-wrapper-11 {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  /* Ensure footer is properly styled in this range too */
  .news-page .footer {
    padding: 48px 24px 20px !important;
  }
}

/* Additional breakpoint for 800px-900px for better coverage */
@media screen and (max-width: 900px) and (min-width: 800px) {

  /* Ensure consistent behavior for this specific range */
  .news-page .footer {
    width: 100% !important;
    padding: 48px 24px 20px !important;
  }

  .news-page .container-45 {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Ensure proper spacing for all footer elements */
  .news-page .container-46,
  .news-page .container-48,
  .news-page .container-51 {
    width: 100% !important;
  }
}

/* ==================== MOBILE RESPONSIVE (< 768px) ==================== */
@media screen and (max-width: 767px) {
  .news-page {
    min-width: 100%;
    width: 100%;
  }

  /* Header Mobile */
  .news-page .header {
    padding: 0px 16px;
    height: auto;
    min-height: 64px;
  }

  .news-page .container {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    height: auto;
    justify-content: space-between;
  }

  .news-page .link {
    flex-shrink: 0;
  }

  .news-page .div .text-wrapper {
    font-size: 16px;
  }

  .news-page .container-2 .p {
    font-size: 12px;
  }

  /* Hide navigation on mobile - can be replaced with hamburger menu */
  .news-page .navigation {
    display: none;
  }

  /* Section Header */
  .news-page .news-hero {
    padding: 24px 16px;
  }

  .news-page .news-heading {
    font-size: 24px;
    line-height: 32px;
  }

  .news-page .text-wrapper-7 {
    font-size: 14px;
    line-height: 20px;
  }

  /* Section 2 - Articles Container */
  .news-page .news-list {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 16px 32px;
    position: relative;
  }

  /* Article Cards - Single Column Layout */
  .news-page .news-card-featured,
  .news-page .news-card-2,
  .news-page .news-card-3,
  .news-page .news-card-4,
  .news-page .news-card-5,
  .news-page .news-card-6,
  .news-page .news-card-7,
  .news-page .news-card-8 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 0;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
  }

  /* Force news-card-8-image-first ordering for all cards on mobile (fix: some cards had news-card-8-image below text) */
  .news-page .news-card-media,
  .news-page .news-card-2-media-wrapper,
  .news-page .news-card-3-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media,
  .news-page .news-card-6-media,
  .news-page .news-card-7-media-wrapper {
    order: 1;
  }

  .news-page .news-card-body,
  .news-page .news-card-2-content,
  .news-page .news-card-3-content,
  .news-page .news-card-4-content,
  .news-page .news-card-5-content,
  .news-page .news-card-6-content {
    order: 2;
  }

  /* Image Containers - Full Width on Mobile */
  .news-page .news-card-media,
  .news-page .news-card-2-media-wrapper,
  .news-page .news-card-3-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media,
  .news-page .news-card-6-media,
  .news-page .news-card-7-media-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 200px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
  }

  .news-page .iframe,
  .news-page .news-card-2-media,
  .news-page .news-card-3-media,
  .news-page .news-card-4-media-wrapper,
  .news-page .news-card-4-media,
  .news-page .news-card-5-media-wrapper,
  .news-page .img-wrapper,
  .news-page .news-card-7-media,
  .news-page .news-card-8-media {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
  }

  /* Fix news-card-5-image positioning on mobile */
  .news-page .news-card-5-image {
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    height: 100%;
    border-radius: 12px 12px 0 0;
  }

  .news-page .media-embed,
  .news-page .news-card-2-media img,
  .news-page .news-card-3-media img,
  .news-page .news-card-4-media img,
  .news-page .news-card-5-image,
  .news-page .news-card-6-image,
  .news-page .news-card-7-media img,
  .news-page .news-card-8-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Fix overflow/centering issues for images that are absolutely positioned on desktop */
  .news-page .news-card-6-image,
  .news-page .news-card-8-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure wrappers act as containing blocks for absolute imgs */
  .news-page .img-wrapper,
  .news-page .news-card-8-media {
    position: relative;
    overflow: hidden;
  }

  /* Content Column - Full Width Below Image */
  .news-page .news-card-body,
  .news-page .news-card-2-content,
  .news-page .news-card-3-content,
  .news-page .news-card-4-content,
  .news-page .news-card-5-content,
  .news-page .news-card-6-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto !important;
    padding: 16px !important;
    gap: 12px;
  }

  /* Meta Info Row */
  .news-page .news-card-meta,
  .news-page .news-card-3-meta,
  .news-page .news-card-4-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .news-page .icon-3,
  .news-page .icon-4 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .news-page .icon-3 img,
  .news-page .icon-4 img {
    width: 100%;
    height: 100%;
  }

  /* Text Clamping for Mobile */
  .news-page .text-wrapper-10 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .news-page .text-wrapper-11 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* "Xem chi tiết" Button */
  .news-page .card-footer,
  .news-page .news-card-cta-wrapper,
  .news-page .news-card-4-cta-wrapper,
  .news-page .news-card-8-cta-wrapper {
    /* keep the separator line, but add breathing room so it doesn't touch the button */
    margin-top: 12px;
    padding-top: 12px;
  }

  /* Fix: some card footers inherited desktop fixed width/height & huge right padding -> big empty bottom area on mobile */
  .news-page .card-footer,
  .news-page .news-card-cta-wrapper,
  .news-page .news-card-4-cta-wrapper,
  .news-page .news-card-8-cta-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0.8px solid #e5e7eb;
  }

  /* Ensure the button area has consistent inner padding (similar to the design screenshot) */
  .news-page .card-footer,
  .news-page .news-card-cta-wrapper,
  .news-page .news-card-4-cta-wrapper,
  .news-page .news-card-8-cta-wrapper {
    padding: 12px 16px 16px !important;
  }

  /* Some cards use different wrappers for highlighted content; keep their internal spacing unchanged */
  .news-page .news-card-4-tagline,
  .news-page .news-card-8-extra {
    margin-top: 0;
    padding-top: 16px;
  }

  /* Extra safety: ensure the button itself never sticks to the top separator */
  .news-page .btn-detail-compact,
  .news-page .btn-detail {
    margin-top: 4px;
  }

  /* Fix: "Xem chi tiết" from card #3+ (.btn-detail) was full-width/too long on mobile.
       Make it match card #2 style (.btn-detail-compact): compact, inline, sized by content. */
  .news-page .btn-detail {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: fit-content !important;
    height: auto !important;
    padding: 10px 24px !important;
    position: relative !important;
    min-width: 0 !important;
  }

  .news-page .btn-detail .text-wrapper-18,
  .news-page .btn-detail .icon-5 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Center the CTA button row inside each card footer on mobile */
  .news-page .card-footer,
  .news-page .news-card-cta-wrapper,
  .news-page .news-card-4-cta-wrapper,
  .news-page .news-card-8-cta-wrapper {
    align-items: flex-start;
  }

  /* Section 3 - Call to Action */
  .news-page .news-cta {
    width: calc(100% - 32px);
    max-width: none;
    margin: 24px 16px;
    padding: 24px 16px;
    border-radius: 12px;
  }

  .news-page .cta-heading {
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    white-space: normal;
  }

  .news-page .news-cta .text-wrapper-7 {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .news-page .news-cta-actions {
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    align-items: center;
  }

  .news-page .btn-call,
  .news-page .btn-email {
    width: min(320px, 100%);
    height: 56px;
  }

  /* Center CTA button content on mobile */
  .news-page .btn-call,
  .news-page .btn-email {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12px;
  }

  .news-page .btn-call .vector-wrapper,
  .news-page .btn-email .vector-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  .news-page .btn-call .text-wrapper-22,
  .news-page .btn-email .text-wrapper-22 {
    position: relative;
    top: auto;
    left: auto;
  }

  /* Footer Mobile - Commented out, using main.css styles
  .news-page .footer {
    padding: 32px 16px 0px;
    height: auto;
    min-height: auto;
  }

  .news-page .site-footer-main {
    flex-direction: column;
    gap: 24px;
    height: auto;
    padding: 0;
    max-width: 100%;
    align-items: flex-start;
  }

  .news-page .site-footer-about,
  .news-page .site-footer-contact,
  .news-page .site-footer-mission {
    width: 100%;
    min-width: auto;
    flex: none;
    max-width: 100%;
    height: auto;
    position: relative;
    left: auto;
    top: auto;
  }

  .news-page .site-footer-bottom {
    padding: 24px 0 16px;
    width: 100%;
  }

  .news-page .footer-copyright-text {
    text-align: center;
    font-size: 12px;
  }
  End of mobile footer styles */
}

/* ==================== INTERACTIONS (HOVER / ACTIVE) ==================== */
.news-page .btn-detail-compact,
.news-page .btn-detail,
.news-page .btn-call,
.news-page .btn-email {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  will-change: transform;
}

/* Hover only on devices that actually support hovering (avoid odd behavior on touch screens) */
@media (hover: hover) and (pointer: fine) {

  .news-page .btn-detail-compact:hover,
  .news-page .btn-detail:hover,
  .news-page .btn-call:hover,
  .news-page .btn-email:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0px 6px 12px -6px rgba(0, 0, 0, 0.25), 0px 12px 18px -10px rgba(0, 0, 0, 0.25);
  }
}

.news-page .btn-detail-compact:active,
.news-page .btn-detail:active,
.news-page .btn-call:active,
.news-page .btn-email:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.98);
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.18), 0px 4px 6px -2px rgba(0, 0, 0, 0.18);
}

/* Card hover */
.news-page .news-card-featured,
.news-page .news-card-2,
.news-page .news-card-3,
.news-page .news-card-4,
.news-page .news-card-5,
.news-page .news-card-6,
.news-page .news-card-7,
.news-page .news-card-8 {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {

  .news-page .news-card-featured:hover,
  .news-page .news-card-2:hover,
  .news-page .news-card-3:hover,
  .news-page .news-card-4:hover,
  .news-page .news-card-5:hover,
  .news-page .news-card-6:hover,
  .news-page .news-card-7:hover,
  .news-page .news-card-8:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0px 6px 12px -8px rgba(0, 0, 0, 0.22), 0px 18px 26px -16px rgba(0, 0, 0, 0.22);
  }
}

.news-page .news-card-featured:active,
.news-page .news-card-2:active,
.news-page .news-card-3:active,
.news-page .news-card-4:active,
.news-page .news-card-5:active,
.news-page .news-card-6:active,
.news-page .news-card-7:active,
.news-page .news-card-8:active {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {

  .news-page .btn-detail-compact,
  .news-page .btn-detail,
  .news-page .btn-call,
  .news-page .btn-email,
  .news-page .news-card-featured,
  .news-page .news-card-2,
  .news-page .news-card-3,
  .news-page .news-card-4,
  .news-page .news-card-5,
  .news-page .news-card-6,
  .news-page .news-card-7,
  .news-page .news-card-8 {
    transition: none !important;
  }
}

/* Footer overrides */
.news-page .footer * {
  position: relative !important;
}

.news-page .footer {
  width: 100% !important;
  background-color: #101828 !important;
  padding: 48px 32px 24px !important;
}

.news-page .footer .text-2 {
  background-color: transparent !important;
}

.news-page .footer .link-5,
.news-page .footer .link-6 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
}

.news-page .footer .link-5,
.news-page .footer .link-6,
.news-page .footer .text-wrapper-42 {
  color: #ffffff !important;
}

/* Allow text wrapping on smaller screens */
@media (min-width: 1024px) {
  .news-page .footer .text-wrapper-33 {
    white-space: nowrap !important;
  }
}

@media (max-width: 1023px) {
  .news-page .footer .text-wrapper-33 {
    white-space: normal !important;
  }
}