/* creative.moraq.io - Hub thong tin Bao mat */

body.mc-section-security {
  background: #f5f3ef;
}

body.mc-section-security .mc-page {
  background: #f5f3ef;
}

body.mc-section-security .mc-main {
  max-width: none;
  padding: calc(var(--mc-nav-height) + 28px) 0 0;
}

body.mc-section-security .mc-chrome {
  background: transparent;
  border-bottom: none;
}

.mc-sec {
  min-height: calc(100vh - 56px);
  background: #f5f3ef;
  color: #111827;
}

.mc-sec-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 56px);
}

.mc-sec-sidebar {
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  background: #faf8f5;
  padding: 20px 0 40px;
  position: sticky;
  top: calc(var(--mc-nav-height) + 28px);
  align-self: start;
  max-height: calc(100vh - var(--mc-nav-height) - 28px);
  overflow-y: auto;
}

.mc-sec-quicktools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 12px;
}

.mc-sec-quicktools__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
}

.mc-sec-quicktools__link:hover,
.mc-sec-quicktools__link.is-active {
  background: rgba(15, 23, 42, 0.05);
  color: #111827;
}

.mc-sec-nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b7280;
  cursor: pointer;
  text-align: left;
}

.mc-sec-nav__chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.mc-sec-nav__group.is-open .mc-sec-nav__chev {
  transform: rotate(-135deg) translateY(-2px);
}

.mc-sec-nav__group-body {
  display: none;
  padding-bottom: 8px;
}

.mc-sec-nav__group.is-open .mc-sec-nav__group-body {
  display: block;
}

.mc-sec-nav__link {
  display: block;
  padding: 8px 16px 8px 24px;
  font-size: 0.8125rem;
  color: #374151;
  text-decoration: none;
  border-left: 2px solid transparent;
}

.mc-sec-nav__link:hover {
  color: #111827;
  background: rgba(15, 23, 42, 0.03);
}

.mc-sec-nav__link.is-active {
  color: #111827;
  font-weight: 600;
  border-left-color: #0f766e;
  background: rgba(15, 118, 110, 0.06);
}

.mc-sec-main {
  padding: 32px 40px 80px;
  max-width: 920px;
}

.mc-sec-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 36%);
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}

.mc-sec-hero__kicker {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}

.mc-sec-hero__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mc-sec-hero__art img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-left: auto;
}

.mc-sec-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-sec-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.75rem;
}

.mc-sec-trust__label {
  font-weight: 600;
  color: #374151;
}

.mc-sec-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mc-sec-badge--aligned,
.mc-sec-badge--enforced,
.mc-sec-badge--active {
  background: #d1fae5;
  color: #065f46;
}

.mc-sec-badge--in_progress,
.mc-sec-badge--review {
  background: #fef3c7;
  color: #92400e;
}

.mc-sec-badge--roadmap {
  background: #e5e7eb;
  color: #374151;
}

.mc-sec-badge--low { background: #ecfdf5; color: #047857; }
.mc-sec-badge--medium { background: #fef9c3; color: #a16207; }
.mc-sec-badge--high { background: #ffedd5; color: #c2410c; }
.mc-sec-badge--critical { background: #fee2e2; color: #b91c1c; }

.mc-sec-spotlight__title,
.mc-sec-pillars__title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 500;
}

.mc-sec-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.mc-sec-spotlight__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mc-sec-spotlight__card:hover {
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.mc-sec-spotlight__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mc-sec-spotlight__label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.mc-sec-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.mc-sec-pillar {
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
}

.mc-sec-pillar:hover {
  border-color: rgba(15, 118, 110, 0.3);
}

.mc-sec-pillar__label {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.mc-sec-pillar__desc {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

.mc-sec-home__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5563;
}

.mc-sec-doc__title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
}

.mc-sec-doc__lead {
  margin: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #4b5563;
}

.mc-sec-section {
  margin-bottom: 28px;
}

.mc-sec-section__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
}

.mc-sec-section__body {
  margin: 0;
  line-height: 1.65;
  color: #374151;
}

.mc-sec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.875rem;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.mc-sec-table th,
.mc-sec-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.mc-sec-table th {
  background: #faf8f5;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.mc-sec-playbook {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.mc-sec-playbook__step {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.mc-sec-playbook__order {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
}

.mc-sec-playbook__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.mc-sec-playbook__text {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.mc-sec-compliance {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.mc-sec-compliance__card {
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.mc-sec-compliance__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mc-sec-compliance__name {
  margin: 0;
  font-size: 1.0625rem;
}

.mc-sec-compliance__note {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.mc-sec-faq__item {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 4px 0;
}

.mc-sec-faq__q {
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.mc-sec-faq__q::-webkit-details-marker {
  display: none;
}

.mc-sec-faq__a {
  margin: 0 0 16px;
  padding-left: 0;
  color: #4b5563;
  line-height: 1.6;
}

.mc-sec-report {
  max-width: 520px;
  margin-top: 24px;
}

.mc-sec-report__note {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 0.875rem;
  color: #9a3412;
}

.mc-sec-report__note p {
  margin: 0;
}

.mc-sec-report__field {
  display: block;
  margin-bottom: 16px;
}

.mc-sec-report__field span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mc-sec-report__field input,
.mc-sec-report__field select,
.mc-sec-report__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.mc-sec-btn {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.mc-sec-btn:hover {
  background: #0d9488;
}

.mc-sec-report__status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #d1fae5;
  color: #065f46;
  font-size: 0.875rem;
}

.mc-sec-links {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.mc-sec-links a {
  color: #0f766e;
  font-weight: 500;
}

.mc-sec-search__form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.mc-sec-search__input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.mc-sec-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-sec-search__item a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  text-decoration: none;
  color: inherit;
}

.mc-sec-search__title {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.mc-sec-search__summary {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
}

.mc-sec-foot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.mc-sec-foot__modified {
  margin: 0;
  font-size: 0.75rem;
  color: #9ca3af;
}

@media (max-width: 900px) {
  .mc-sec-layout {
    grid-template-columns: 1fr;
  }

  .mc-sec-sidebar {
    display: none;
  }

  .mc-sec-main {
    padding: 12px 16px 56px;
  }

  .mc-sec-hero {
    grid-template-columns: 1fr;
  }

  .mc-sec-hero__art img {
    margin: 0 auto;
  }

  .mc-sec-spotlight__grid,
  .mc-sec-pillars__grid {
    grid-template-columns: 1fr;
  }
}