/* =========================================================
   MATRIX HANZI - CONSOLIDATED STYLESHEET
   ========================================================= */

:root {
  color-scheme: light;
  font-family: Arial, "Segoe UI", Tahoma, "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  margin: 0; 
  background: #f6f3ea; 
  color: #202722; 
  line-height: 1.75; 
  font-family: Arial, "Segoe UI", Tahoma, "Noto Sans", sans-serif;
}

img { 
  display: block; 
  max-width: 100%; 
}

a { 
  color: inherit; 
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* Hanzi Font Fallbacks */
[lang="zh-Hans"],
[lang="zh-Hant"],
.brand__mark,
.material-context__marker {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif !important;
}

/* --- ACCESSIBILITY SKIP LINK --- */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 20px;
  background: #277964;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  z-index: 1000;
}

.skip-link:focus {
  top: 16px;
}

/* --- THEME & LAYOUT --- */
.learning-page {
  --theme-primary: #277964;
  --theme-primary-dark: #185445;
  --theme-primary-soft: #e4f1ec;
  --theme-accent: #c28735;
  --theme-accent-soft: #f5ead5;
  --ink: #202722;
  --ink-soft: #5f6a63;
  --window-bar-bg: #222926;
  --window-bar-text: #d2dcd7;

  min-height: 100vh;
  overflow-x: hidden;
  background: radial-gradient(circle at 8% 4%, rgba(194, 135, 53, 0.08), transparent 28rem), #f7f4eb;
}

.page-width { 
  width: min(1180px, calc(100% - 64px)); 
  margin-inline: auto; 
}

.reading-content {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
}

/* --- HEADER --- */
.site-header { 
  position: sticky; 
  top: 0; 
  z-index: 100; 
  border-bottom: 1px solid rgba(39, 121, 100, 0.14); 
  background: rgba(247, 244, 235, 0.95); 
  backdrop-filter: blur(12px); 
}

.site-header__inner { 
  min-height: 68px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 20px; 
}

.brand { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  text-decoration: none; 
  font-weight: 800; 
}

.brand__mark { 
  width: 36px; 
  height: 36px; 
  display: grid; 
  place-items: center; 
  border-radius: 10px; 
  background: var(--theme-primary); 
  color: #fff; 
  font-size: 19px; 
}

.site-nav { 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  font-weight: 600; 
  font-size: 0.92rem; 
}

.site-nav a { 
  text-decoration: none; 
}

.header-cta { 
  padding: 7px 16px; 
  border: 1.5px solid var(--theme-primary); 
  border-radius: 999px; 
  color: var(--theme-primary-dark); 
}

/* --- TYPOGRAPHY & BUTTONS --- */
h1, h2, h3, .brand, .button, .section-label {
  font-family: Arial, "Segoe UI", Tahoma, "Noto Sans", sans-serif;
}

h1, h2 { 
  font-weight: 700; 
  letter-spacing: -0.03em; 
  margin: 0; 
}

h1 { 
  font-size: clamp(2.3rem, 4.5vw, 3.8rem); 
  line-height: 1.12; 
}

h2 { 
  font-size: clamp(1.8rem, 3vw, 2.4rem); 
  line-height: 1.25; 
  margin-bottom: 16px; 
}

.eyebrow, 
.section-label { 
  color: var(--theme-primary-dark); 
  font-size: 0.8rem; 
  font-weight: 800; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  margin: 0 0 12px; 
}

.button { 
  min-height: 46px; 
  padding: 10px 22px; 
  display: inline-flex; 
  align-items: center; 
  border-radius: 10px; 
  font-weight: 700; 
  text-decoration: none; 
  transition: transform 0.15s, background-color 0.15s; 
}

.button:hover { 
  transform: translateY(-2px); 
}

.button--primary { 
  background: var(--theme-primary); 
  color: #fff; 
}

.button--secondary { 
  border: 1.5px solid rgba(39, 121, 100, 0.4); 
  color: var(--theme-primary-dark); 
}

.button--light { 
  background: #fff; 
  color: var(--theme-primary-dark); 
}

.button--outline-light { 
  border: 1.5px solid rgba(255, 255, 255, 0.6); 
  color: #fff; 
}

/* --- SECTIONS --- */
.breadcrumb { 
  padding-top: 28px; 
  display: flex; 
  gap: 8px; 
  color: var(--ink-soft); 
  font-size: 0.88rem; 
}

.breadcrumb a { 
  text-decoration: none; 
}

.hero { 
  padding-block: 40px 64px; 
  display: grid; 
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); 
  align-items: center; 
  gap: clamp(32px, 5vw, 64px); 
}

.hero__subtitle { 
  margin: 18px 0 0; 
  color: var(--theme-primary); 
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); 
  font-weight: 600; 
}

.hero__lead { 
  max-width: 680px; 
  margin: 20px 0 0; 
  color: #48544d; 
  font-size: 1.05rem; 
}

.hero__actions { 
  margin-top: 28px; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 14px; 
}

.hero__visual { 
  margin: 0; 
}

.hero-image-slot { 
  aspect-ratio: 6 / 5; 
  padding: 16px; 
  border: 1px solid rgba(39, 121, 100, 0.18); 
  border-radius: 36px 36px 18px 18px; 
  background: #fff; 
  overflow: hidden; 
}

.hero-image-slot img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}

.hero__visual figcaption { 
  margin-top: 10px; 
  font-size: 0.85rem; 
  color: var(--ink-soft); 
}

.story, .bridge, .closing { 
  padding-block: 56px; 
}

.story p, .bridge p, .closing p { 
  color: #48534c; 
  font-size: 1.05rem; 
  margin: 0 0 18px; 
}

.story__opening { 
  font-size: 1.28rem !important; 
  color: var(--ink) !important; 
  font-weight: 500; 
}

.closing-line { 
  margin-top: 26px !important; 
  color: var(--theme-primary-dark) !important; 
  font-size: 1.18rem !important; 
  font-weight: 700; 
}

/* Material Context */
.material-context {
  padding-block: 72px 82px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(240px, .55fr);
  align-items: start;
  gap: clamp(28px, 5vw, 68px);
  border-top: 1px solid rgba(39, 121, 100, .14);
  border-bottom: 1px solid rgba(39, 121, 100, .14);
}

.material-context__marker {
  min-height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-primary-soft);
  color: var(--theme-primary);
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 700;
  letter-spacing: -.08em;
}

.material-context__content p {
  margin: 0 0 18px;
  color: #48534c;
  font-size: 1.04rem;
  line-height: 1.78;
}

.material-context__content p:last-child { 
  margin-bottom: 0; 
}

.material-context__outcome {
  padding: 25px 0 8px;
  border-top: 2px solid var(--theme-accent);
}

.material-context__outcome span {
  display: block;
  margin-bottom: 10px;
  color: var(--theme-primary-dark);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.material-context__outcome strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Dataset Overview */
.dataset-overview { 
  padding-block: 60px 76px; 
  display: grid; 
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); 
  align-items: start; 
  gap: clamp(40px, 7vw, 90px); 
  border-top: 1px solid rgba(39, 121, 100, .14); 
}

.dataset-overview__intro p:last-child { 
  margin-bottom: 0; 
  color: #48534c; 
}

.dataset-facts { 
  display: grid; 
  border-top: 1px solid rgba(39, 121, 100, .2); 
}

.dataset-facts article { 
  padding: 20px 2px; 
  display: grid; 
  grid-template-columns: minmax(140px, .55fr) minmax(0, 1fr); 
  gap: 24px; 
  border-bottom: 1px solid rgba(39, 121, 100, .16); 
}

.dataset-facts strong { 
  color: var(--theme-primary-dark); 
}

.dataset-facts span { 
  color: var(--ink-soft); 
}

/* Journey Section */
.journey { 
  padding-block: 64px; 
  border-top: 1px solid rgba(39, 121, 100, 0.14); 
}

.journey-steps { 
  margin: 36px 0 0; 
  padding: 0; 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 28px; 
  list-style: none; 
}

.journey-steps li { 
  padding-top: 18px; 
  border-top: 2px solid var(--theme-primary); 
  display: grid; 
  gap: 6px; 
}

.journey-steps span { 
  color: var(--theme-accent); 
  font-family: Georgia, serif; 
  font-size: 1.3rem; 
  font-weight: 700; 
}

.journey-steps strong { 
  font-size: 1.05rem; 
}

.journey-steps small { 
  color: var(--ink-soft); 
  font-size: 0.9rem; 
}

/* ========================================================================
   KHUNG NHÚNG CỬA SỔ
   ======================================================================== */
.mode-section { 
  padding-block: 60px; 
  scroll-margin-top: 40px; 
}

.mode-intro { 
  margin-bottom: 24px; 
  display: grid; 
  grid-template-columns: auto minmax(0, 1fr) auto; 
  align-items: flex-end; 
  gap: 24px; 
}

/* ĐÃ SỬA: Tăng độ tương phản cho số chỉ mục để không bị chìm/mờ trên nền kem */
.mode-intro__number { 
  color: rgba(39, 121, 100, 0.32); 
  font-family: Georgia, serif; 
  font-size: clamp(3.5rem, 6vw, 5.2rem); 
  line-height: 0.8; 
  font-weight: 700;
  user-select: none;
}

.mode-intro__copy { 
  max-width: 760px; 
}

.mode-intro__copy p:last-child { 
  margin: 0; 
  color: #48544d; 
}

.mode-link { 
  padding-bottom: 3px; 
  color: var(--theme-primary-dark); 
  font-weight: 700; 
  text-decoration: none; 
  border-bottom: 1.5px solid currentColor; 
  white-space: nowrap; 
}

.embed-shell {
  width: 100%;
  max-width: 1180px; 
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.embed-shell--focus {
  max-width: 960px;
}

.embed-toolbar {
  height: 40px; 
  padding: 0 16px; 
  display: flex; 
  align-items: center; 
  gap: 12px;
  background: var(--window-bar-bg); 
  color: var(--window-bar-text); 
  font-size: 0.78rem; 
  font-weight: 600;
}

.embed-toolbar__dot {
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
  background: #ff5f56;
  box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #27c93f; 
  margin-right: 32px; 
  flex-shrink: 0;
}

.embed-toolbar__mode { 
  margin-left: auto; 
  color: #92dfc9; 
  text-transform: uppercase; 
  font-size: 0.74rem; 
}

.mode-mount { 
  position: relative; 
  width: 100%; 
  background: #ffffff; 
}

.mode-mount--analysis { height: 580px; }
.mode-mount--flashcard { height: 680px; background: #f8f9fa; }
.mode-mount--review { height: 520px; }

.mode-iframe { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
  display: block; 
}

.embed-loading { 
  position: absolute; 
  inset: 0; 
  z-index: 2; 
  display: grid; 
  place-items: center; 
  background: #f1ede3; 
  color: var(--ink-soft); 
  font-weight: 500; 
}

.mode-mount[data-state="ready"] > .embed-loading { 
  display: none !important; 
}

/* All Modes Grid */
.all-modes { 
  padding-block: 100px 80px; 
  border-top: 1px solid rgba(39, 121, 100, .14); 
}

.all-modes__heading { 
  margin-bottom: 42px; 
}

.all-modes__heading p:last-child { 
  color: #48534c; 
}

.mode-grid { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 16px; 
}

.mode-card { 
  min-height: 230px; 
  padding: 25px; 
  display: flex; 
  flex-direction: column; 
  border: 1px solid rgba(39, 121, 100, .17); 
  border-radius: 14px; 
  background: rgba(255, 253, 248, .76); 
  color: var(--ink); 
  text-decoration: none; 
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; 
}

.mode-card:hover { 
  transform: translateY(-3px); 
  border-color: rgba(39, 121, 100, .42); 
  box-shadow: 0 16px 30px rgba(24, 65, 53, .08); 
}

.mode-card--featured { 
  background: var(--theme-primary-soft); 
}

.mode-card__index { 
  margin-bottom: 28px; 
  color: var(--theme-accent); 
  font-family: Georgia, serif; 
  font-size: 1.15rem; 
  font-weight: 700; 
}

.mode-card strong { 
  font-size: 1.05rem; 
}

.mode-card p { 
  margin: 9px 0 22px; 
  color: var(--ink-soft); 
  font-size: .93rem; 
  line-height: 1.65; 
}

.mode-card__link { 
  margin-top: auto; 
  color: var(--theme-primary-dark); 
  font-size: .86rem; 
  font-weight: 750; 
}

.all-modes__note { 
  margin: 18px 0 0; 
  color: var(--ink-soft); 
  font-size: .78rem; 
}

/* --- SUMMARY & FOOTER --- */
.summary { 
  margin-block: 60px 20px; 
  padding: clamp(36px, 4.5vw, 60px); 
  display: grid; 
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); 
  gap: clamp(32px, 5vw, 64px); 
  border-radius: 20px; 
  background: var(--theme-primary-dark); 
  color: #fff; 
}

.summary__copy > p:not(.section-label) { 
  max-width: 620px; 
  color: #d7e3de; 
  margin: 0 0 24px; 
}

.summary__actions { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px; 
}

.summary__paths { 
  padding-left: 28px; 
  display: grid; 
  align-content: center; 
  border-left: 1px solid rgba(255, 255, 255, 0.18); 
}

.summary__paths a { 
  padding: 12px 0; 
  display: flex; 
  gap: 10px; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); 
  text-decoration: none; 
  color: #eef5f2; 
  font-weight: 600; 
}

.summary__paths span { 
  color: #a8c9bc; 
  font-size: 0.8rem; 
}

.site-footer { 
  border-top: 1px solid rgba(39, 121, 100, 0.16); 
  background: #ede9dd; 
  padding-block: 36px; 
  margin-top: 40px; 
}

.site-footer__inner { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.site-footer p { 
  margin: 5px 0 0; 
  color: var(--ink-soft); 
  font-size: 0.85rem; 
}

.site-footer nav { 
  display: flex; 
  gap: 20px; 
  font-size: 0.88rem; 
  color: var(--ink-soft); 
}

.site-footer nav a { 
  text-decoration: none; 
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 980px) {
  .hero, .summary, .dataset-overview { 
    grid-template-columns: 1fr; 
  }
  .hero__visual { 
    width: min(420px, 100%); 
    margin: 0; 
  }
  .material-context { 
    grid-template-columns: 110px minmax(0, 1fr); 
  }
  .material-context__marker { 
    min-height: 110px; 
  }
  .material-context__outcome { 
    grid-column: 2; 
  }
  .journey-steps { 
    grid-template-columns: 1fr; 
  }
  .mode-intro { 
    grid-template-columns: auto minmax(0, 1fr); 
  }
  .mode-link { 
    grid-column: 2; 
    justify-self: start; 
  }
  .mode-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
  .summary__paths { 
    padding: 24px 0 0; 
    border-left: 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.18); 
  }
}

@media (max-width: 768px) {
  .page-width { 
    width: calc(100% - 32px); 
  }
  .hero { 
    padding-block: 24px 44px; 
  }
  .hero h1 { 
    font-size: clamp(2rem, 8.5vw, 2.8rem); 
  }
  .hero__actions, 
  .summary__actions { 
    flex-direction: column; 
  }
  .mode-intro { 
    grid-template-columns: 1fr; 
    gap: 12px; 
  }
  .mode-link { 
    grid-column: 1; 
  }
  .site-footer__inner { 
    align-items: flex-start; 
    flex-direction: column; 
    gap: 16px; 
  }
}

@media (max-width: 640px) {
  .material-context { 
    grid-template-columns: 1fr; 
  }
  .material-context__marker { 
    width: 92px; 
    min-height: 92px; 
  }
  .material-context__outcome { 
    grid-column: 1; 
  }
  .dataset-facts article { 
    grid-template-columns: 1fr; 
    gap: 5px; 
  }
  .mode-grid { 
    grid-template-columns: 1fr; 
  }
  .mode-card { 
    min-height: 190px; 
  }
}

/* ========================================================================
   PREVIEW TĨNH — 5 MỤC ĐẦU TIÊN
   (block được build-embed.mjs inject trước </main>; raw-HTML cho SEO,
    cùng dữ liệu mà ba chế độ iframe nạp vào)
   Dùng 100% biến --theme-* để theo đúng theme của từng trang.
   ======================================================================== */
.preview-static {
  padding-block: 64px 40px;
  border-top: 1px solid rgba(39, 121, 100, 0.14);
}

.preview-static__head {
  max-width: 780px;
  margin-bottom: 34px;
}

.preview-static__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.pv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.pv-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(39, 121, 100, 0.17);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.76);
}

.pv-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pv-idx {
  flex-shrink: 0;
  color: var(--theme-accent);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.7;
}

.pv-word {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-zh {
  font-size: 2.05rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--theme-primary-dark);
  letter-spacing: 0.02em;
  word-break: break-word;
}

.pv-word--sentence .pv-zh {
  font-size: 1.45rem;
  line-height: 1.55;
  font-weight: 600;
}

.pv-pinyin {
  color: var(--ink-soft);
  font-size: 0.98rem;
  word-break: break-word;
}

.pv-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pv-meaning {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
}

.pv-sub {
  margin: 0;
  color: var(--theme-primary-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pv-note {
  margin: 0;
  color: #48534c;
  font-size: 0.93rem;
  line-height: 1.6;
}

.pv-equivalent {
  color: var(--ink);
  font-weight: 600;
}

.pv-pattern {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--theme-primary-soft);
  color: var(--theme-primary-dark);
  word-break: break-word;
}

.pv-example {
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(39, 121, 100, 0.25);
  color: #48534c;
  font-size: 0.95rem;
  line-height: 1.6;
}

.pv-example .pv-zh {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.pv-vi {
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .pv-grid {
    grid-template-columns: 1fr;
  }
  .pv-card {
    padding: 18px;
  }
}