:root {
  --bg: #F5E6C8;        /* Giấy điệp (kem ngà vỏ sò) */
  --bg-fiber: #E8D5B0;  /* Xơ giấy điệp */
  --paper-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 0.9 0 0 0  0 0 0.7 0 0  0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)'/%3E%3C/svg%3E");
  --ink-black: #1A1A1A; /* Mực tàu */
  --panel: #fffefb;
  --ink: #1f2d3d;
  --muted: #5d6a77;
  --primary: #0f766e;
  --primary-2: #115e59;
  --accent: #f59e0b;
  --ring: rgba(15, 118, 110, 0.25);
  --shadow: 0 18px 35px rgba(18, 28, 38, 0.12);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ink);
  /* Vân xơ giấy điệp (cùng lớp nhiễu với Immersion Town) trên nền kem ngà */
  background-color: var(--bg);
  background-image:
    var(--paper-grain),
    radial-gradient(ellipse at 50% 35%, transparent 45%, var(--bg-fiber) 100%);
  background-size: 180px 180px, 100% 100%;
  background-blend-mode: multiply, normal;
  min-height: 100vh;
  line-height: 1.6;
}

.container {
  width: min(1280px, 94vw);
  margin: 0 auto;
  padding: 24px 0 44px;
  box-sizing: border-box;
}

/* --- TRANG TRỌNG: BỨC HỌA DÂN GIAN ĐÔNG HỒ BANNER --- */
.folk-banner,
.pixel-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 1.05;
  background-color: #FAF1DB;
  background-image:
    radial-gradient(ellipse at 78% 50%, rgba(200, 50, 40, 0.12) 0%, rgba(230, 180, 34, 0.18) 45%, transparent 70%),
    linear-gradient(135deg, rgba(255, 246, 227, 0.95) 0%, rgba(245, 230, 200, 0.85) 100%),
    var(--paper-grain);
  background-size: 100% 100%, 100% 100%, 180px 180px;
  background-blend-mode: normal, normal, multiply;
  border: 3px solid var(--ink-black);
  outline: 2px dashed rgba(180, 45, 37, 0.35);
  outline-offset: -7px;
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(96, 65, 18, 0.18), 0 5px 0 var(--ink-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.folk-banner:hover,
.pixel-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(96, 65, 18, 0.24), 0 6px 0 var(--ink-black);
}

/* Nền tranh dân gian: vầng nhật nguyệt và mây Đông Hồ */
.banner-dongho-bg,
.banner-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Vầng thái dương đỏ son / vàng hoè ấm áp */
.folk-sun-halo {
  position: absolute;
  top: -20%;
  right: 6%;
  width: clamp(260px, 32vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 50, 40, 0.22) 0%, rgba(230, 180, 34, 0.16) 48%, transparent 72%);
  border: 1.5px dashed rgba(200, 50, 40, 0.25);
  animation: pulseSun 8s ease-in-out infinite alternate;
}

@keyframes pulseSun {
  0% { transform: scale(0.97) rotate(0deg); opacity: 0.85; }
  100% { transform: scale(1.04) rotate(6deg); opacity: 1; }
}

/* Mây cuộn Đông Hồ */
.folk-cloud-svg {
  position: absolute;
  filter: drop-shadow(0 3px 5px rgba(26, 26, 26, 0.08));
  opacity: 0.85;
}
.left-cloud {
  top: 10px;
  left: 42%;
  width: 120px;
  animation: floatCloudLeft 6s ease-in-out infinite alternate;
}
.right-cloud {
  bottom: 12px;
  left: 36%;
  width: 100px;
  transform: scaleX(-1);
  animation: floatCloudRight 7s ease-in-out infinite alternate;
}

@keyframes floatCloudLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(8px); }
}
@keyframes floatCloudRight {
  0% { transform: scaleX(-1) translateX(0); }
  100% { transform: scaleX(-1) translateX(-8px); }
}

.banner-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
}

/* Left Typography */
.banner-left {
  flex: 1.25;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Thẻ triện son Đông Hồ */
.folk-stamp-tag,
.banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #B42D25;
  color: #FFF6E3;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 2px solid var(--ink-black);
  width: fit-content;
  box-shadow: 0 3px 0 var(--ink-black);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.folk-stamp-tag:hover {
  background: #C83228;
  transform: translateY(-1px);
}

.folk-icon {
  font-size: 0.95rem;
}

.banner-logo-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 873 / 317;
  overflow: hidden;
  display: block;
}

.banner-logo-img {
  position: absolute;
  width: 117.3%;
  height: auto;
  left: -8.6%;
  top: -41.6%;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(30, 27, 75, 0.12));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.pixel-banner:hover .banner-logo-img {
  transform: scale(1.02);
  filter: drop-shadow(0 5px 12px rgba(30, 27, 75, 0.18));
}

/* Khẩu hiệu dân gian thanh lịch */
.folk-subtitle,
.banner-subtitle {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #5A4738;
  letter-spacing: 0.2px;
  line-height: 1.35;
  max-width: 480px;
}

/* Right Scene: 3 Cô Gái Đông Hồ */
.banner-right {
  flex: 0.95;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Character Trio */
.character-trio {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 100%;
  padding-bottom: 4px;
}

.char-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.char-wrap:hover {
  transform: translateY(-8px) scale(1.08);
}

.char-mascot img {
  height: clamp(100px, 14vw, 155px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
  animation: floatMascot 3.8s ease-in-out infinite;
}

.char-scholar img {
  height: clamp(110px, 15vw, 170px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
  animation: floatScholar 4.2s ease-in-out infinite 0.6s;
}

.char-panda img {
  height: clamp(105px, 14.5vw, 160px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
  animation: floatPanda 3.6s ease-in-out infinite 1.2s;
}

@keyframes floatMascot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes floatScholar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes floatPanda {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Dải lụa thư họa */
.folk-speech,
.floating-speech {
  position: absolute;
  top: 10px;
  right: 120px;
  background: #FFF9E6;
  border: 2px solid var(--ink-black);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-black);
  box-shadow: 2px 3px 0 var(--ink-black);
  white-space: nowrap;
  animation: bounceBadge 3s ease-in-out infinite;
  z-index: 5;
}

@keyframes bounceBadge {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}

/* Dải hoa văn đỡ chân 3 cô gái */
.folk-wave-base {
  position: absolute;
  bottom: 0;
  right: -10px;
  width: 440px;
  height: 24px;
  background: 
    radial-gradient(circle at 20px 24px, transparent 13px, #FAF1DB 13px, #FAF1DB 15px, transparent 15px),
    radial-gradient(circle at 60px 24px, transparent 13px, #FAF1DB 13px, #FAF1DB 15px, transparent 15px),
    linear-gradient(to top, rgba(230, 180, 34, 0.4) 0%, transparent 100%);
  background-size: 40px 24px, 40px 24px, 100% 100%;
  border-top: 2px dashed rgba(180, 45, 37, 0.35);
  border-radius: 999px 0 0 0;
  pointer-events: none;
  z-index: 2;
}

/* Cánh hoa rơi */
.folk-petal {
  position: absolute;
  pointer-events: none;
  font-size: 1.15rem;
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  animation: flutterPetal 5s ease-in-out infinite alternate;
}

.folk-petal.p1 { top: 14px; left: 47%; animation-delay: 0s; }
.folk-petal.p2 { bottom: 16px; left: 52%; font-size: 1rem; color: #E6B422; animation-delay: 1.5s; }
.folk-petal.p3 { top: 22px; right: 280px; font-size: 1.05rem; animation-delay: 2.8s; }

@keyframes flutterPetal {
  0% { transform: translateY(0) rotate(0deg) scale(0.9); }
  50% { transform: translateY(-8px) rotate(15deg) scale(1.1); }
  100% { transform: translateY(4px) rotate(-10deg) scale(1); }
}

/* Responsive adjustments */
@media (max-width: 860px) {
  .folk-banner,
  .pixel-banner {
    aspect-ratio: auto;
    min-height: 230px;
  }
  .banner-inner {
    padding: 14px 20px;
    gap: 14px;
  }
  .folk-speech,
  .floating-speech {
    right: 20px;
  }
}

@media (max-width: 680px) {
  .folk-banner,
  .pixel-banner {
    aspect-ratio: auto;
  }
  .banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px 16px 14px;
  }
  .banner-left {
    align-items: center;
    max-width: 100%;
  }
  .banner-logo-wrap {
    max-width: 290px;
    margin: 0 auto;
  }
  .banner-right {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    margin-top: 6px;
  }
  .folk-speech,
  .floating-speech {
    position: static;
    margin: 0 auto 12px;
    display: inline-flex;
    font-size: 0.8rem;
    padding: 4px 12px;
  }
  .folk-wave-base,
  .folk-cloud-svg,
  .folk-petal {
    display: none;
  }
  .character-trio {
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .char-mascot img, .char-scholar img, .char-panda img {
    height: 88px;
  }
  .folk-sun-halo {
    top: -5%;
    right: 50%;
    transform: translateX(50%);
    width: 240px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-title {
  margin: 32px 0 14px;
  font-size: 1.35rem;
}

.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* Bố cục trang chủ: panel Extra Materials bên trái, lộ trình chính bên phải */
.home-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  grid-template-areas: "side main";
  gap: 24px;
  align-items: stretch;
}

.main-col {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.side-col {
  grid-area: side;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.side-panel {
  background: rgba(255, 253, 245, 0.5);
  border: 1px solid #dcc79f;
  border-radius: calc(var(--radius) + 4px);
  padding: 16px;
  box-shadow: 0 10px 22px rgba(96, 65, 18, 0.08);
}

.home-layout .section-title {
  margin: 0 0 14px;
}

.side-panel .section-title {
  font-size: 1.15rem;
}

/* Panel "My Progress": gọn một dòng (cuốn sổ + thanh tiến độ chung), bấm để mở danh sách từng deck */
.progress-card {
  border-bottom: 2px dashed #E6B422;
  padding: 0 2px 10px;
}

.progress-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px;
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.progress-sum::-webkit-details-marker { display: none; }
.progress-sum:hover { background: rgba(255, 251, 240, 0.6); }
.progress-sum:focus-visible { outline: 2px solid var(--ink-black); outline-offset: 2px; }

.pp-book {
  position: relative;
  flex-shrink: 0;
  font-size: 1.9rem;
  line-height: 1;
}

.pp-book-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 20px;
  padding: 0 5px;
  border: 1.5px solid #FFF6E3;
  border-radius: 999px;
  background: #C83228;
  color: #fff;
  font-size: 0.68rem;
  line-height: 17px;
  text-align: center;
}

.pp-sum-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pp-sum-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1B4D3E;
}

.pp-sum-meta {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.2;
}

.pp-chevron {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.progress-card[open] .pp-chevron { transform: rotate(180deg); }

.progress-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.progress-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}

.progress-list a:hover { background: rgba(255, 251, 240, 0.7); }

.pp-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink-black);
  border-radius: 3px;
  background: var(--deck);
}

.pp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.pp-name {
  font-size: 0.86rem;
  font-weight: 700;
}

.pp-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.pp-bar {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(26, 26, 26, 0.1);
  overflow: hidden;
}

.pp-bar span {
  display: block;
  height: 100%;
  background: var(--deck);
}

/* Thanh tiến độ chung trên dòng tóm tắt: tỉ lệ đúng của mọi deck */
.pp-bar-total {
  height: 6px;
  margin-top: 0;
  border-radius: 3px;
}

.pp-bar-total span {
  width: 0;
  background: linear-gradient(90deg, #E6B422, #1B4D3E);
  transition: width 0.4s ease;
}

.pp-miss,
.pp-ok {
  flex-shrink: 0;
  min-width: 24px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.pp-miss {
  background: #C83228;
  color: #fff;
}

.pp-ok { color: #2f7d4a; }

.progress-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 6px;
  padding: 3px 12px;
  border: 1.5px solid var(--ink-black);
  border-radius: 999px;
  background: #FFF6E3;
  color: var(--ink-black);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--ink-black);
}

.progress-all b {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.14);
  text-align: center;
}

.progress-all.has-mistakes b {
  background: #C83228;
  color: #fff;
}

/* 2x2 grid of roadmap stamps stretching to fill available height */
.core-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  flex: 1;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.core-grid .card {
  height: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Extra Materials: stacked equal-sized cards inside the side panel */
.extra-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

/* Compact Đông Hồ cards in the side panel: sticker on the left, title / tags / button on the right */
.side-panel .card {
  --perf: 5px;
  height: 100%;
}

.side-panel .stamp-inner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-areas:
    "char title"
    "char tags"
    "char btn";
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  padding: 12px 14px 14px;
  height: 100%;
  box-sizing: border-box;
}

.side-panel .stamp-inner::before {
  display: none;
}

.side-panel .stamp-inner::after {
  opacity: 0.25;
}

.side-panel .card-top {
  display: contents;
}

.side-panel .card-character {
  grid-area: char;
  width: 58px;
  height: 68px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-panel .card-character img {
  width: auto;
  height: 100%;
  max-width: 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.25s ease;
}

.side-panel .card:hover .card-character {
  transform: none;
}

.side-panel .card:hover .card-character img {
  transform: scale(1.08) translateY(-2px);
}

.side-panel .card-tags {
  grid-area: tags;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.side-panel .tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.25px;
  padding: 3px 9px;
  white-space: nowrap;
  border-radius: 999px;
}

.stamp--yellow .tag {
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px solid #1A1A1A;
  color: #1A1A1A;
}

.stamp--pink .tag {
  background: rgba(0, 0, 0, 0.28);
  border: 1.5px solid rgba(255, 246, 227, 0.8);
  color: #FFF6E3;
}

.side-panel .card h3 {
  grid-area: title;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
}

.stamp--yellow.card h3 {
  color: #1A1A1A;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.stamp--pink.card h3 {
  color: #FFF6E3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.side-panel .btn {
  grid-area: btn;
  justify-self: start;
  margin-top: 3px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Narrower screens: panel moves below the roadmap and lays its cards out in a row */
@media (max-width: 1060px) {
  .home-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "side";
    gap: 28px;
  }
  .core-grid {
    grid-template-rows: auto;
    flex: none;
  }
  .core-grid .stamp-inner {
    aspect-ratio: 16 / 10;
    min-height: 260px;
  }
  .extra-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 768px) {
  .core-grid {
    grid-template-columns: 1fr;
  }
  .core-grid .stamp-inner {
    aspect-ratio: 16 / 10;
    min-height: 240px;
  }
}

/* ---------- Thẻ dạng tem thư: tranh Đông Hồ cách tân đương đại ----------
   Giấy tem có răng cưa (lỗ đục) bao quanh một ô tranh màu phẳng, viền mực tàu,
   vân giấy điệp và một vầng tròn lớn làm hoạ tiết. */
.card {
  --perf: 6px;                       /* bán kính lỗ răng cưa */
  --stamp-paper: #FFFBF0;
  --stamp-bg: #C83228;
  --stamp-ink: #FFF6E3;              /* màu chữ trên ô tranh */
  --stamp-motif: rgba(255, 246, 227, 0.13);
  display: flex;
  padding: calc(2 * var(--perf));
  background:
    radial-gradient(var(--perf), #0000 98%, var(--stamp-paper)) round
      calc(-1.5 * var(--perf)) calc(-1.5 * var(--perf)) / calc(3 * var(--perf)) calc(3 * var(--perf)),
    linear-gradient(var(--stamp-paper) 0 0) no-repeat
      50% / calc(100% - 3 * var(--perf)) calc(100% - 3 * var(--perf));
  filter: drop-shadow(0 6px 8px rgba(96, 65, 18, 0.2));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.card:hover {
  transform: translateY(-4px) rotate(-0.8deg);
  filter: drop-shadow(0 12px 14px rgba(96, 65, 18, 0.26));
}

.stamp-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  background: var(--stamp-bg);
  color: var(--stamp-ink);
  border: 2px solid var(--ink-black);
  border-radius: 3px;
}

/* Vầng tròn hoạ tiết (mặt trời / trăng trong tranh Đông Hồ) */
.stamp-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -22%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--stamp-motif);
}

/* Vân giấy điệp in chồng lên màu */
.stamp-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--paper-grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
}

/* Bảng màu tranh Đông Hồ: đỏ son, xanh chàm, xanh lam, đen than, vàng hoè, hồng sen, nâu đất */
.stamp--vermilion  { --stamp-bg: #C83228; }
.stamp--indigo     { --stamp-bg: #1B4D3E; }
.stamp--blue       { --stamp-bg: #2E4A7D; }
.stamp--ink        { --stamp-bg: #1F1D24; --stamp-ink: #F2D27C; }
.stamp--terracotta { --stamp-bg: #A84B26; }
.stamp--yellow     { --stamp-bg: #E6B422; --stamp-ink: #1A1A1A; --stamp-motif: rgba(255, 246, 227, 0.4); }
.stamp--pink       { --stamp-bg: #E79AA4; --stamp-ink: #1A1A1A; --stamp-motif: rgba(255, 246, 227, 0.4); }

.stamp .tag {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}

.stamp h3 {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: inherit;
}

.stamp .btn {
  background: #FFF6E3;
  color: var(--ink-black);
  border: 2px solid var(--ink-black);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink-black);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  font-weight: 800;
}

.stamp .btn:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--ink-black);
}

.stamp .btn:focus-visible {
  outline: 3px solid var(--stamp-ink);
  outline-offset: 3px;
}

.tag {
  align-self: flex-start;
  background: #e7f9f6;
  color: var(--primary-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.card h3 {
  margin: 14px 0 8px;
  font-size: 1.25rem;
}

/* ---------- 4 tem lộ trình chính: phiếu tem Đông Hồ lấp đầy bố cục ----------
   Tranh nền assets/stamps/core-*.svg (tự vẽ bằng SVG: nền màu Đông Hồ, hoa văn sóng
   nước / trống đồng, đôi chim hạc, phượng, chim Lạc hoặc cá chép, mây cuộn).
   Học sinh, nhãn, tên và nút nằm chồng lên trên; cỡ chữ theo bề rộng tem (cqw). */
.core-grid .stamp-inner {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  container-type: inline-size;
}

.core-grid .stamp-inner::before {
  display: none;
}

.core-grid .stamp-inner::after {
  opacity: 0.3;
}

.stamp-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.core-grid .card-top {
  display: contents;
}

/* Hai nhãn ở hai góc trên, tránh đầu nhân vật ở giữa */
.core-grid .card-tags {
  position: absolute;
  top: 5.5%;
  left: 3.5%;
  right: 3.5%;
  flex-direction: row;
  justify-content: space-between;
  gap: 2cqw;
}

.core-grid .tag {
  font-size: clamp(0.6rem, 2.4cqw, 0.86rem);
  padding: 0.5cqw 2cqw;
  background: rgba(0, 0, 0, 0.2);
}

/* Tem hẹp (điện thoại): nhãn dài xuống hai dòng để không che nhân vật ở giữa */
@container (max-width: 400px) {
  .core-grid .tag {
    max-width: 30cqw;
    border-radius: 10px;
    line-height: 1.25;
    text-align: center;
  }
}

/* Nhân vật bắt đầu ngay dưới hàng nhãn để không chạm nhãn */
.core-grid .card-character {
  position: absolute;
  left: 50%;
  top: 13%;
  width: auto;
  height: 48%;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  transform: translateX(-50%);
}

.core-grid .card:hover .card-character {
  transform: translateX(-50%) translateY(-4px) scale(1.04);
}

.core-grid .card-character img {
  width: auto;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.core-grid .card h3 {
  position: absolute;
  top: 64%;
  left: 4%;
  right: 4%;
  margin: 0;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 6cqw, 1.85rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 0 14px rgba(0, 0, 0, 0.55);
}

.core-grid .btn {
  position: absolute;
  left: 50%;
  bottom: 6.5%;
  margin: 0;
  padding: 1.1cqw 6cqw;
  font-size: clamp(0.72rem, 3cqw, 1rem);
  white-space: nowrap;
  transform: translateX(-50%);
}

.core-grid .btn:hover {
  transform: translateX(-50%) translateY(-1px);
}

/* Tem có hai nút (Cloze Text): hàng nút căn giữa ở đáy tem */
.core-grid .btn-row {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6.5%;
  display: flex;
  justify-content: center;
  gap: 3cqw;
}

.core-grid .btn-row .btn {
  position: static;
  padding: 1.1cqw 4.5cqw;
  transform: none;
}

.core-grid .btn-row .btn:hover {
  transform: translateY(-1px);
}

.card p {
  margin: 0 0 18px;
  color: var(--muted);
}

.btn {
  display: inline-block;
  margin-top: auto;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  padding: 11px 14px;
  border-radius: 11px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

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

.btn-primary:hover {
  background: var(--primary-2);
}

.btn-secondary {
  background: #fff4d6;
  color: #8a5100;
  border-color: #f4d28d;
}

.btn-secondary:hover {
  background: #ffeab8;
}

/* Card Character & Top Layout */
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.card-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.card-character {
  width: 64px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #FFF6E3;
  border: 2px solid var(--ink-black);
  border-radius: 2px;
  box-shadow: 3px 3px 0 var(--ink-black);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover .card-character {
  transform: scale(1.14) translateY(-3px);
}

.card-character img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}

footer {
  margin-top: 36px;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-disclaimer {
  font-size: 0.82rem;
  color: #78716c;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 640px) {
  .hero-banner-wrap {
    border-radius: var(--radius);
  }

  .stamp-inner {
    padding: 14px;
  }
}