/* ============================================================
   HƯỜNG ĐÔNG · KIRIGAMI SUB-PAGES V3 · LOCAL REVIEW

   V3 thay toàn bộ tranh sơn mài của Hero bằng cảnh Kirigami 3D tạo riêng cho
   từng route. Nội dung trở thành một cuốn sách cắt lớp: sân khấu giấy, mục lục,
   folio lệch nhịp, khung hiện vật và bề mặt đọc cùng bảng màu với trang chủ.
   ============================================================ */

:root {
  --hd3-paper: #fffbeb;
  --hd3-paper-deep: #f4ead1;
  --hd3-paper-shadow: #e6d5b6;
  --hd3-ink: #3d2b1a;
  --hd3-ink-soft: #6f5a43;
  --hd3-jade: #173f37;
  --hd3-jade-dark: #102f2a;
  --hd3-red: #c92332;
  --hd3-red-dark: #9f1d28;
  --hd3-gold: #d6ad49;
  --hd3-gold-soft: #ecd58d;
  --hd3-line: rgb(85 58 31 / 20%);
  --hd3-shadow-low: 0 14px 32px rgb(61 43 26 / 10%);
  --hd3-shadow-high: 0 28px 64px rgb(36 20 10 / 18%);
  --hd3-ease: cubic-bezier(.16, 1, .3, 1);
}

body:has(main[data-page-art]) {
  color: var(--hd3-ink);
  background: var(--hd3-paper-deep);
}

html:has(main[data-page-art]) {
  overflow-x: clip;
}

body:has(main[data-page-art]) .site-header {
  border-bottom-color: rgb(85 58 31 / 13%);
  background: rgb(255 251 235 / 96%);
  box-shadow: 0 8px 28px rgb(61 43 26 / 8%);
}

body:has(main[data-page-art]) .brand {
  border-color: rgb(156 109 46 / 22%);
  background: var(--hd3-paper);
  box-shadow: 0 6px 18px rgb(61 43 26 / 10%);
}

/* --- Sân khấu mở đầu ------------------------------------------------ */

[data-page-art] .page-hero.lacquer-hero {
  min-height: clamp(610px, 46vw, 760px);
  padding-block: clamp(92px, 8vw, 132px) clamp(132px, 11vw, 178px);
  border-bottom: 1px solid rgb(214 173 73 / 45%);
  background: var(--hd3-jade-dark);
}

/* Hook lacquer-hero được giữ để animation cũ không gãy, nhưng hai lớp wash
   sơn mài bị tắt hoàn toàn. Hero chỉ hiển thị cảnh giấy cắt 3D mới. */
[data-page-art] .page-hero.kirigami-hero::before,
[data-page-art] .page-hero.kirigami-hero::after {
  display: none;
}

[data-page-art] .page-hero .kirigami-3d-artwork {
  z-index: 1;
  opacity: 1;
  mix-blend-mode: normal;
  transform-origin: 72% 58%;
}

[data-page-art] .page-hero .kirigami-3d-artwork img {
  object-position: center;
  animation: hd3-scene-breathe 14s ease-in-out 1.2s infinite alternate;
}

[data-page-art] .page-hero.lacquer-hero > :is(.eyebrow, h1, p, nav) {
  width: min(610px, 39%);
  max-width: min(610px, 39%);
}

[data-page-art] .page-hero.lacquer-hero > .eyebrow {
  margin-bottom: 26px;
  padding: 10px 32px 10px 20px;
  border: 1px solid rgb(214 173 73 / 52%);
  background: var(--hd3-paper-deep);
  color: #895f28;
  box-shadow: 8px 10px 0 rgb(81 43 20 / 32%);
}

[data-page-art] .page-hero.lacquer-hero > h1 {
  margin-bottom: 24px;
  font-size: clamp(72px, 6.8vw, 108px);
  line-height: .86;
}

[data-page-art] .page-hero.lacquer-hero > p:not(.eyebrow) {
  max-width: 34ch;
  color: #f4dfb5;
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 500;
  line-height: 1.7;
}

@media (min-width: 761px) {
  [data-page-art="la-bai"] .page-hero.lacquer-hero {
    min-height: 680px;
    padding-block: 78px 108px;
  }

  [data-page-art="la-bai"] .page-hero.lacquer-hero > h1 {
    font-size: clamp(64px, 5.4vw, 78px);
  }

  [data-page-art="la-bai"] .page-hero.lacquer-hero > p:not(.eyebrow) {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.58;
  }
}

.kirigami-page-label {
  position: absolute !important;
  z-index: 8 !important;
  right: clamp(24px, 4.6vw, 76px);
  bottom: clamp(24px, 3.8vw, 56px);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  padding: 13px 38px 13px 26px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 9px 50%);
  border: 1px solid rgb(214 173 73 / 65%);
  background: var(--hd3-paper-deep);
  color: #765126;
  box-shadow: 10px 13px 26px rgb(10 6 4 / 34%);
  font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
  text-transform: uppercase;
}

.kirigami-page-label span {
  color: #9d7538;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.kirigami-page-label strong {
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .07em;
}

/* --- Mục lục giấy ---------------------------------------------------- */

[data-page-art] .subpage-content-frame {
  padding: 1px 0 clamp(90px, 10vw, 150px);
  background-color: var(--hd3-paper-deep);
  background-image: url("/assets/img/subpage/kirigami-frame-v2.webp");
  background-repeat: no-repeat;
  background-position: center top -1px;
  background-size: 100% auto;
}

.kirigami-chapter-bar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 2fr);
  gap: 28px;
  width: min(1240px, calc(100% - 40px));
  margin: -54px auto 72px;
  padding: 18px 22px;
  border: 1px solid rgb(155 108 46 / 34%);
  background: rgb(255 251 235 / 97%);
  box-shadow: var(--hd3-shadow-high);
}

.kirigami-chapter-bar::before {
  content: "";
  position: absolute;
  inset: 8px -8px -8px 8px;
  z-index: -1;
  border: 1px solid rgb(155 108 46 / 22%);
  background: var(--hd3-paper-shadow);
}

.kirigami-chapter-bar > p {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0;
  padding: 10px 18px;
  border-right: 1px solid var(--hd3-line);
  color: var(--hd3-ink);
}

.kirigami-chapter-bar > p span {
  color: #9a6f33;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kirigami-chapter-bar > p strong {
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 400;
}

.kirigami-chapter-bar > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.kirigami-chapter-bar a {
  display: grid;
  align-content: center;
  min-height: 58px;
  padding: 8px 16px;
  border-left: 1px solid var(--hd3-line);
  color: var(--hd3-ink-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, transform 260ms var(--hd3-ease);
}

.kirigami-chapter-bar a:first-child { border-left: 0; }
.kirigami-chapter-bar a span {
  color: #ad7c32;
  font-size: 10px;
  letter-spacing: .15em;
}

.kirigami-chapter-bar a:focus-visible {
  background: var(--hd3-paper-deep);
  color: var(--hd3-red-dark);
  transform: translateY(-2px);
}

@media (hover: hover) {
  .kirigami-chapter-bar a:hover {
    background: var(--hd3-paper-deep);
    color: var(--hd3-red-dark);
    transform: translateY(-2px);
  }
}

/* --- Các folio nội dung --------------------------------------------- */

[data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section) {
  position: relative;
  width: min(1240px, calc(100% - 40px));
  max-width: 1240px;
  margin: 0 auto clamp(54px, 7vw, 92px);
  padding: clamp(42px, 5vw, 72px);
  overflow: visible;
  border: 1px solid rgb(155 108 46 / 29%);
  background: rgb(255 251 235 / 97%);
  box-shadow: var(--hd3-shadow-low);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

[data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section):nth-of-type(even) {
  width: min(1190px, calc(100% - 52px));
  background: rgb(247 238 217 / 98%);
  transform: translateX(clamp(0px, 1.4vw, 20px));
}

[data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section):nth-of-type(odd) {
  transform: translateX(clamp(-20px, -1.4vw, 0px));
}

[data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section)::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -9px;
  left: 20px;
  z-index: -1;
  height: 18px;
  border: 1px solid rgb(155 108 46 / 20%);
  background: var(--hd3-paper-shadow);
  box-shadow: 0 10px 22px rgb(61 43 26 / 8%);
}

[data-page-art] .v2-prose {
  border-bottom-color: transparent;
}

[data-page-art] .v2-prose > :is(p, ul, ol, table):not(.v2-wide),
[data-page-art] .v2-prose > :is(h2, h3, .eyebrow, .v2-note, .v2-warn) {
  max-width: 860px;
}

[data-page-art] .v2-prose h2,
[data-page-art] .museum-foreword h2,
[data-page-art] .museum-gallery-heading h2,
[data-page-art] .museum-history-header h2,
[data-page-art] .news-section h2 {
  color: var(--hd3-ink);
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  line-height: .96;
}

[data-page-art] .v2-prose .eyebrow,
[data-page-art] :is(.museum-foreword, .museum-gallery-heading, .museum-history-header) .eyebrow {
  color: #9c6d2e;
  letter-spacing: .18em;
}

[data-page-art] .v2-prose p,
[data-page-art] .v2-prose li,
[data-page-art] :is(.museum-foreword, .museum-gallery-heading, .museum-history-header) p {
  color: var(--hd3-ink-soft);
  line-height: 1.78;
}

[data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit) {
  border-color: rgb(155 108 46 / 30%);
  background: var(--hd3-paper);
  box-shadow: 8px 9px 0 var(--hd3-paper-shadow), 0 17px 38px rgb(61 43 26 / 8%);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

[data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit):focus-within {
  border-color: rgb(201 35 50 / 38%);
  box-shadow: 11px 12px 0 var(--hd3-paper-shadow), var(--hd3-shadow-high);
  transform: translateY(-7px) rotateX(.8deg);
}

@media (hover: hover) {
  [data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit):hover {
    border-color: rgb(201 35 50 / 38%);
    box-shadow: 11px 12px 0 var(--hd3-paper-shadow), var(--hd3-shadow-high);
    transform: translateY(-7px) rotateX(.8deg);
  }
}

[data-page-art] :is(.v2-note, .v2-warn) {
  padding: 18px 22px;
  border-left: 3px solid var(--hd3-gold);
  background: var(--hd3-paper-deep);
}

[data-page-art] .v2-table {
  border-color: var(--hd3-line);
  background: var(--hd3-paper);
  box-shadow: 9px 10px 0 var(--hd3-paper-shadow);
}

[data-page-art] .v2-table th {
  background: var(--hd3-jade);
  color: var(--hd3-paper);
}

[data-page-art] :is(.section-visual, .section-card-fan) {
  padding: 14px;
  border: 1px solid rgb(214 173 73 / 52%);
  background: var(--hd3-paper-deep);
  box-shadow: 12px 14px 0 var(--hd3-paper-shadow), var(--hd3-shadow-high);
  clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 19px 100%, 0 calc(100% - 19px));
}

[data-page-art] :is(.section-visual, .section-card-fan)::before { display: none; }

[data-page-art] .portrait-card { border-radius: 0; }

/* Bảo tàng: giữ tường 78 hiện vật rộng, nhưng cho nó nằm trong một đại folio. */
[data-page-art="la-bai"] .museum-gallery-section {
  width: min(1420px, calc(100% - 32px));
  max-width: 1420px;
}

[data-page-art="la-bai"] .museum-filters {
  border: 1px solid var(--hd3-line);
  background: var(--hd3-paper-deep);
  box-shadow: 8px 9px 0 var(--hd3-paper-shadow);
}

/* Chuyện Hường Đông: bài viết trở thành các tờ hồ sơ trưng bày. */
[data-page-art="chuyen-huong-dong"] .news-grid article {
  overflow: hidden;
}

[data-page-art="chuyen-huong-dong"] .news-grid article img {
  border-bottom: 1px solid rgb(214 173 73 / 45%);
}

/* Cửa hàng: ba gói đứng như bục giấy, Premium giữ vị trí chủ đạo. */
[data-page-art="cua-hang"] .pricing-grid {
  align-items: stretch;
  gap: clamp(20px, 2.6vw, 34px);
}

[data-page-art="cua-hang"] .price-tier[data-tier="premium"] {
  border-color: rgb(201 35 50 / 52%);
  transform: translateY(-14px);
}

[data-page-art="cua-hang"] .price-tier[data-tier="premium"]:focus-within {
  transform: translateY(-21px) rotateX(.8deg);
}

@media (hover: hover) {
  [data-page-art="cua-hang"] .price-tier[data-tier="premium"]:hover {
    transform: translateY(-21px) rotateX(.8deg);
  }
}

/* --- Motion: entrance và chuyển động nhỏ ---------------------------- */

:is(html.hd-first-load, html.is-changing.is-rendering) .kirigami-page-label {
  animation: hd3-label-enter 900ms var(--hd3-ease) 520ms both;
}

:is(html.hd-first-load, html.is-changing.is-rendering) .kirigami-chapter-bar {
  animation: hd3-index-enter 940ms var(--hd3-ease) 640ms both;
}

@keyframes hd3-label-enter {
  from { opacity: 0; transform: translate3d(24px, 12px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hd3-index-enter {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hd3-scene-breathe {
  from { transform: scale(1.012) translate3d(0, 0, 0); }
  to { transform: scale(1.032) translate3d(-.45%, -.35%, 0); }
}

@media (max-width: 1100px) {
  [data-page-art] .page-hero.lacquer-hero > :is(.eyebrow, h1, p, nav) {
    width: min(560px, 46%);
    max-width: min(560px, 46%);
  }

  .kirigami-chapter-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kirigami-chapter-bar > p {
    border-right: 0;
    border-bottom: 1px solid var(--hd3-line);
  }
}

/* --- Học viện: nội dung cũ được biên tập lại thành giáo trình ------------- */

[data-page-art="khoa-hoc"] .course-principles,
[data-page-art="khoa-hoc"] .course-source-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

[data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers) article {
  position: relative;
  min-height: 190px;
  padding: 28px 24px 24px;
  border: 1px solid rgb(155 108 46 / 28%);
  background: linear-gradient(148deg, rgb(255 251 235 / 96%), rgb(244 234 209 / 92%));
  box-shadow: 7px 9px 0 rgb(129 85 38 / 11%);
  transition: transform 260ms var(--hd3-ease), box-shadow 260ms var(--hd3-ease);
}

[data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers) article::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, transparent 49%, var(--hd3-red) 50%);
  opacity: .82;
}

@media (hover: hover) {
  [data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers) article:hover {
    transform: translateY(-5px) rotateX(2deg);
    box-shadow: 10px 16px 24px rgb(61 43 26 / 15%);
  }
}

[data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers) article > span,
[data-page-art="khoa-hoc"] .course-module-card > span {
  display: block;
  margin-bottom: 18px;
  color: #a5742f;
  font: 700 11px/1 "Be Vietnam Pro", Inter, sans-serif;
  letter-spacing: .18em;
}

[data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers) h3 {
  margin: 0 0 10px;
  color: var(--hd3-jade);
  font-size: clamp(25px, 2.3vw, 34px);
}

[data-page-art="khoa-hoc"] .course-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  perspective: 900px;
}

[data-page-art="khoa-hoc"] .course-module-card {
  display: grid;
  align-content: start;
  min-height: 180px;
  padding: 26px 22px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  border-top: 1px solid rgb(214 173 73 / 42%);
  background: var(--hd3-jade);
  color: var(--hd3-paper);
  box-shadow: inset 0 0 0 1px rgb(236 213 141 / 18%);
  text-decoration: none;
  transform-origin: center bottom;
  transition: transform 300ms var(--hd3-ease), background-color 180ms ease;
}

[data-page-art="khoa-hoc"] .course-module-card:focus-visible {
  background: var(--hd3-jade-dark);
  transform: translateY(-7px) rotateX(4deg);
}

@media (hover: hover) {
  [data-page-art="khoa-hoc"] .course-module-card:hover {
    background: var(--hd3-jade-dark);
    transform: translateY(-7px) rotateX(4deg);
  }
}

[data-page-art="khoa-hoc"] .course-module-card strong {
  margin-bottom: 14px;
  color: var(--hd3-gold-soft);
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
}

[data-page-art="khoa-hoc"] .course-module-card small {
  color: rgb(255 251 235 / 76%);
  font-size: 13px;
  line-height: 1.55;
}

[data-page-art="khoa-hoc"] .course-reading-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 34px 0;
  padding: 0;
  list-style: none;
}

[data-page-art="khoa-hoc"] .course-reading-steps li {
  position: relative;
  min-height: 180px;
  padding: 28px 20px;
  border: 1px solid var(--hd3-line);
  border-left: 0;
  background: rgb(255 251 235 / 70%);
}

[data-page-art="khoa-hoc"] .course-reading-steps li:first-child { border-left: 1px solid var(--hd3-line); }
[data-page-art="khoa-hoc"] .course-reading-steps span {
  color: var(--hd3-red-dark);
  font-family: "DFVN TAN Harmoni", "Tan Harmoni", Georgia, serif;
  font-size: 25px;
}

[data-page-art="khoa-hoc"] .course-reading-steps p {
  margin-top: 12px;
  font-size: 14px;
}

[data-page-art="khoa-hoc"] .course-enrolment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  border-color: rgb(214 173 73 / 52%);
  background: linear-gradient(135deg, rgb(23 63 55 / 98%), rgb(16 47 42 / 98%));
  color: var(--hd3-paper);
}

[data-page-art="khoa-hoc"] .course-enrolment h2,
[data-page-art="khoa-hoc"] .course-enrolment .eyebrow { color: var(--hd3-gold-soft); }
[data-page-art="khoa-hoc"] .course-enrolment .email-form { margin: 0; }
[data-page-art="khoa-hoc"] .course-enrolment label { color: var(--hd3-paper); }

@media (max-width: 760px) {
  body:has(main[data-page-art]) .site-header {
    background: rgb(255 251 235 / 98%);
  }

  [data-page-art] .page-hero.lacquer-hero {
    min-height: 720px;
    padding: 78px 22px 224px;
  }

  [data-page-art] .page-hero.lacquer-hero > :is(.eyebrow, h1, p, nav) {
    width: 100%;
    max-width: 100%;
  }

  [data-page-art] .page-hero.lacquer-hero > h1 {
    max-width: 8ch;
    font-size: clamp(58px, 16vw, 78px);
  }

  [data-page-art] .page-hero.lacquer-hero > p:not(.eyebrow) {
    max-width: 31ch;
    font-size: 16px;
    line-height: 1.62;
  }

  [data-page-art] .page-hero .kirigami-3d-artwork img {
    object-position: 62% center;
  }

  .kirigami-page-label {
    right: 18px;
    bottom: 18px;
    min-width: 0;
    max-width: calc(100% - 36px);
    padding: 10px 28px 10px 20px;
  }

  .kirigami-chapter-bar {
    width: min(100% - 24px, 620px);
    margin-top: -28px;
    margin-bottom: 42px;
    padding: 14px;
  }

  .kirigami-chapter-bar > p {
    padding: 8px 10px 14px;
  }

  .kirigami-chapter-bar > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kirigami-chapter-bar a {
    min-height: 58px;
    border-top: 1px solid var(--hd3-line);
  }

  .kirigami-chapter-bar a:nth-child(odd) { border-left: 0; }

  [data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section),
  [data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section):nth-of-type(even) {
    width: calc(100% - 24px);
    margin-bottom: 36px;
    padding: 30px 22px 34px;
    transform: none;
  }

  [data-page-art] .v2-prose h2,
  [data-page-art] .museum-foreword h2,
  [data-page-art] .museum-gallery-heading h2,
  [data-page-art] .museum-history-header h2,
  [data-page-art] .news-section h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  [data-page-art] .v2-table {
    display: block;
    overflow-x: auto;
  }

  [data-page-art="cua-hang"] .price-tier[data-tier="premium"],
  [data-page-art="cua-hang"] .price-tier[data-tier="premium"]:focus-within {
    transform: none;
  }

  [data-page-art="cua-hang"] .price-panel {
    overflow: clip;
  }

  [data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers),
  [data-page-art="khoa-hoc"] .course-module-grid,
  [data-page-art="khoa-hoc"] .course-reading-steps,
  [data-page-art="khoa-hoc"] .course-enrolment {
    grid-template-columns: 1fr;
  }

  [data-page-art="khoa-hoc"] .course-reading-steps li,
  [data-page-art="khoa-hoc"] .course-reading-steps li:first-child {
    min-height: 0;
    border: 1px solid var(--hd3-line);
    border-top: 0;
  }

  [data-page-art="khoa-hoc"] .course-reading-steps li:first-child { border-top: 1px solid var(--hd3-line); }
}

@media (prefers-reduced-motion: reduce) {
  .kirigami-page-label,
  .kirigami-chapter-bar,
  .kirigami-chapter-bar a,
  [data-page-art] .page-hero .kirigami-3d-artwork img,
  [data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit, .course-module-card),
  [data-page-art="khoa-hoc"] :is(.course-principles, .course-source-layers) article {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  .kirigami-chapter-bar,
  .kirigami-page-label { display: none; }

  [data-page-art] .subpage-content-frame > :is(.v2-prose, .museum-foreword, .museum-gallery-section, .museum-history-wing, .news-section) {
    width: 100%;
    margin: 0;
    padding: 24px 0;
    clip-path: none;
    box-shadow: none;
    transform: none;
  }
}