/* The landing page uses the published self-check content and the shared v2 chrome. */
#noi-dung:has(.self-check-page) { background: #f5f7fa; }
.self-check-page { --sc-navy: #123b63; --sc-blue: #0b6bcb; --sc-ink: #0e1e30; --sc-muted: #4a5a6e; color: var(--sc-ink); display: grid; gap: 32px; padding-block: 20px 48px; }
.self-check-page p { margin: 0; }
.self-check-crumbs ol { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0 8px; color: var(--sc-muted); font-size: .9375rem; }
.self-check-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.self-check-crumbs li + li::before { content: '›'; margin-right: 8px; color: #8c9bad; }
.self-check-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-blue); text-underline-offset: 3px; }
.self-check-crumbs [aria-current] { font-weight: 600; }
.self-check-heading { display: grid; gap: 14px; }
.self-check-heading__title { display: flex; align-items: center; gap: 14px; }
.self-check-heading h1 { margin: 0; font-size: 1.75rem; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; color: var(--sc-navy); }
.self-check-heading p { max-width: none; color: var(--sc-muted); font-size: 1.0625rem; line-height: 1.65; }
.self-check-heading .self-check-updated { font-size: .875rem; }
.self-check-spot { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #e2eefb; color: var(--sc-blue); }
.self-check-spot .site-icon { width: 25px; height: 25px; }
.self-check-section { display: grid; gap: 14px; min-width: 0; }
.self-check-section h2 { margin: 0; font-size: 1.375rem; line-height: 1.4; font-weight: 800; letter-spacing: -.015em; color: var(--sc-navy); }
.self-check-section__lead { max-width: 90ch; font-size: .96875rem; line-height: 1.65; color: var(--sc-muted); }
.self-check-tools, .self-check-lists, .self-check-knowledge { display: grid; gap: 12px; }
.self-check-card { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border: 1px solid #d6dee8; border-radius: 16px; color: var(--sc-ink); background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.self-check-card:hover { color: var(--sc-ink); border-color: var(--sc-blue); box-shadow: 0 5px 18px #123b6312; transform: translateY(-2px); text-decoration: none; }
.self-check-card:focus-visible, .self-check-crumbs a:focus-visible { outline: 3px solid #0b6bcb; outline-offset: 4px; }
.self-check-card__body { min-width: 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
.self-check-card__body b { font-size: 1.0625rem; font-weight: 800; line-height: 1.4; }
.self-check-card__body > span { color: var(--sc-muted); font-size: .9375rem; line-height: 1.55; }
.self-check-card__action { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--sc-blue); font-weight: 700; font-size: .9375rem; }
.self-check-card__action .site-icon { width: 18px; height: 18px; }
.self-check-card__status { grid-column: 2; justify-self: start; padding: 3px 9px; color: #526172; background: #edf1f5; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.self-check-tools .self-check-card { border-top: 4px solid var(--sc-blue); }
.self-check-tools .self-check-card--urgent { --sc-blue: #b8431a; border-top-color: #d9531e; }
.self-check-tools .self-check-card--urgent:focus-visible { outline-color: #b8431a; }
.self-check-tools .self-check-card__action .site-icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.self-check-tools a.self-check-card:focus-visible .self-check-spot .site-icon { animation: self-check-tool-icon-shake .55s ease-in-out 1 both; transform-box: fill-box; transform-origin: center; }
.self-check-tools a.self-check-card:focus-visible .self-check-card__action .site-icon { transform: translateX(6px); }
@media (hover: hover) {
  .self-check-tools a.self-check-card:hover .self-check-spot .site-icon { animation: self-check-tool-icon-shake .55s ease-in-out 1 both; transform-box: fill-box; transform-origin: center; }
  .self-check-tools a.self-check-card:hover .self-check-card__action .site-icon { transform: translateX(6px); }
}
@keyframes self-check-tool-icon-shake {
  0%, 100% { transform: none; }
  18% { transform: rotate(-14deg); }
  36% { transform: rotate(11deg); }
  54% { transform: rotate(-7deg); }
  72% { transform: rotate(4deg); }
  88% { transform: rotate(-2deg); }
}
.self-check-card--urgent .self-check-spot { color: #b8431a; background: #fcebe3; }
.self-check-lists .self-check-card { align-items: center; border-radius: 14px; }
.self-check-lists .self-check-card__body b { font-size: 1.03125rem; }
.self-check-card--compact { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.self-check-card--compact .self-check-card__action { grid-column: 3; grid-row: 1; align-self: center; }
.self-check-lists .self-check-card__body > span { font-size: .875rem; }
.self-check-empty { padding: 20px; border: 1px dashed #b6c5d6; border-radius: 14px; color: var(--sc-muted); background: #fff; line-height: 1.7; }
.self-check-illustration { margin: 0; max-width: 800px; justify-self: center; width: 100%; }
.self-check-illustration img { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 16px; }
[data-self-check-landing].self-check-page { gap: 26px; padding-block: 16px 32px; }
[data-self-check-landing] .self-check-heading { gap: 8px; }
[data-self-check-landing] .self-check-heading p { max-width: none; }
[data-self-check-landing] .self-check-tools .self-check-card { border-top: 1px solid #d6dee8; }
[data-self-check-landing] .self-check-tools a.self-check-card:hover { border-top-color: var(--sc-blue); }
[data-self-check-landing] .self-check-card__cover { display: none; }
.self-check-spot--urgent { color: #b8431a; background: #fcebe3; }
@media (min-width: 768px) {
  [data-self-check-landing] .self-check-tools .self-check-card--cover { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; overflow: hidden; }
  [data-self-check-landing] .self-check-card--cover > .self-check-spot { display: none; }
  [data-self-check-landing] .self-check-card__cover { display: block; margin: -18px -18px 4px; }
  [data-self-check-landing] .self-check-card__cover img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
}
@media (min-width: 768px) {
  .self-check-page { gap: 36px; padding-block: 24px 56px; }
  .self-check-heading h1 { font-size: 2rem; }
  .self-check-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .self-check-tools .self-check-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .self-check-tools .self-check-card__action, .self-check-tools .self-check-card__status { grid-column: 1; align-self: end; margin-top: 4px; }
  .self-check-lists, .self-check-knowledge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) { .self-check-heading h1 { font-size: 2.25rem; } .self-check-section h2 { font-size: 1.5625rem; } }
@media (prefers-reduced-motion: reduce) {
  .self-check-card { transition: none; }
  a.self-check-card:hover { transform: none; }
  .self-check-tools a.self-check-card:is(:hover, :focus-visible) .self-check-spot .site-icon { animation: none; }
  .self-check-tools .self-check-card__action .site-icon { transition: none; }
  .self-check-tools a.self-check-card:is(:hover, :focus-visible) .self-check-card__action .site-icon { transform: none; }
}