/**
 * Hai section giới thiệu dưới hero trang chủ — trang trọng, học thuật.
 */

.home-intro-sec {
  --hi-accent: #7a3d3d;
  --hi-accent-soft: #9a5a52;
  --hi-ink: #2a2622;
  --hi-muted: #4a4540;
  /* Giới thiệu — nền giấy hơi đậm */
  --hi-paper: #f3efe8;
  --hi-paper-2: #ebe4db;
  --hi-radius: 14px;
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  overflow: hidden;
  background: var(--hi-paper);
}

.home-intro-sec__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 80% 10%, rgba(122, 61, 61, 0.04), transparent 55%),
    radial-gradient(ellipse 90% 60% at 10% 90%, rgba(74, 52, 44, 0.05), transparent 50%),
    linear-gradient(180deg, var(--hi-paper) 0%, var(--hi-paper-2) 100%);
  opacity: 1;
}

.home-intro-sec__wash--alt {
  background:
    radial-gradient(ellipse 100% 70% at 20% 15%, rgba(122, 61, 61, 0.035), transparent 55%),
    radial-gradient(ellipse 80% 50% at 90% 85%, rgba(74, 52, 44, 0.04), transparent 48%),
    linear-gradient(180deg, #f5f0e8 0%, var(--hi-paper) 100%);
}

.home-intro-sec__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.home-intro-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.home-intro-col {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .home-intro-row {
    align-items: stretch;
  }

  .home-intro-col--figure,
  .home-intro-col--text {
    display: flex;
    flex-direction: column;
  }
}

/* Ảnh lớn dọc */
.home-intro-figure {
  margin: 0;
  height: 100%;
}

.home-intro-figure__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 720px);
  object-fit: cover;
  border-radius: var(--hi-radius);
  box-shadow: 0 8px 32px rgba(42, 38, 34, 0.1);
}

.home-intro-caption {
  margin: 1rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 3px solid rgba(122, 61, 61, 0.35);
  font-size: 1.2rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--hi-muted);
}

/* Ảnh nhỏ ngang */
.home-intro-thumb {
  margin: 0 0 1.25rem;
}

.home-intro-thumb__img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--hi-radius);
  box-shadow: 0 4px 20px rgba(42, 38, 34, 0.08);
}

.home-intro-title {
  position: relative;
  font-family: "Crimson Pro", "Noto Serif", Georgia, serif;
  font-size: clamp(1.35rem, 2.8vw, 1.65rem);
  font-weight: 700;
  color: var(--hi-accent);
  margin: 0 0 1.25rem;
  padding: 0 0 0 1rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.home-intro-title__bar {
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hi-accent-soft), var(--hi-accent));
}

.home-intro-subtitle {
  font-family: "Crimson Pro", "Noto Serif", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hi-ink);
  margin: 1.75rem 0 0.65rem;
}

.home-intro-body {
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.8rem;
  line-height: 1.78;
  color: var(--hi-muted);
}

.home-intro-body p {
  margin: 0 0 1rem;
}

.home-intro-body strong {
  color: var(--hi-ink);
  font-weight: 600;
}

.home-intro-list {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}

.home-intro-list li {
  margin-bottom: 0.45em;
}

.home-intro-list li::marker {
  color: var(--hi-accent-soft);
}

.home-intro-cta-wrap {
  margin: 1.75rem 0 0;
}

.home-intro-btn {
  display: inline-block;
  padding: 0.65rem 1.35rem;
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff !important;
  background: linear-gradient(180deg, var(--hi-accent-soft) 0%, var(--hi-accent) 100%);
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(122, 61, 61, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-intro-btn:hover,
.home-intro-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(122, 61, 61, 0.32);
  color: #fff !important;
}

/* Section 1: cột phải nội dung có khoảng đệm */
.home-intro-sec--phvn .home-intro-col--text {
  padding-top: 0;
}

@media (min-width: 992px) {
  .home-intro-sec--phvn .home-intro-col--text {
    padding-left: 0.5rem;
    padding-top: 0.25rem;
  }

  .home-intro-sec--phvn .home-intro-col--figure {
    padding-right: 1rem;
  }
}

/* Section 2: cột trái chữ */
@media (min-width: 992px) {
  .home-intro-sec--site .home-intro-col--text {
    padding-right: 1.25rem;
  }

  .home-intro-sec--site .home-intro-col--figure {
    padding-left: 0.5rem;
  }
}

@media (max-width: 991px) {
  .home-intro-figure__img {
    max-height: 420px;
  }

  .home-intro-col--figure {
    margin-bottom: 2rem;
  }

  .home-intro-sec--site .home-intro-col--figure {
    margin-bottom: 0;
    margin-top: 2rem;
  }
}

/* Căn giữa tiêu đề + khối chữ (hai section giới thiệu trang chủ) */
.home-intro-sec--text-center .home-intro-title {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.45rem;
  padding-left: 0;
}

.home-intro-sec--text-center .home-intro-title__bar {
  position: static;
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
  align-self: stretch;
  min-height: 1.15em;
  background: linear-gradient(180deg, var(--hi-accent-soft), var(--hi-accent));
}


.home-intro-sec--text-center .home-intro-body {
  max-width: 48em;
  margin-left: auto;
  margin-right: auto;
}

.home-intro-sec--text-center .home-intro-list-wrap {
  margin: 0 0 1.15rem;
  text-align: center;
}

.home-intro-sec--text-center .home-intro-list {
  display: inline-block;
  margin: 0;
  text-align: left;
  vertical-align: top;
  max-width: 42em;
}

.home-intro-sec--text-center .home-intro-thumb__img {
  margin-left: auto;
  margin-right: auto;
}

/* —— Section Câu hỏi (FAQ) dưới hero —— */
.home-faq {
  --faq-heading: #1e4555;
  --faq-caption-bar: #c75a38;
  /* Hiểu về Vibudra — nền sáng */
  --faq-paper: #fcfaf6;
  position: relative;
  padding: clamp(2.75rem, 5.5vw, 4.25rem) 0;
  overflow: hidden;
  background: var(--faq-paper);
}

.home-faq__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 15% 20%, rgba(30, 69, 85, 0.045), transparent 52%),
    radial-gradient(ellipse 90% 55% at 92% 80%, rgba(122, 61, 61, 0.04), transparent 48%),
    linear-gradient(180deg, #fdfcfa 0%, var(--faq-paper) 45%, #f8f5ef 100%);
}

.home-faq__inner {
  position: relative;
  z-index: 1;
}

.home-faq__row {
  align-items: flex-start;
}

.home-faq__aside {
  padding-right: clamp(0.5rem, 2vw, 1.5rem);
}

.home-faq__title {
  font-family: "Crimson Pro", "Noto Serif", Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 2.65rem);
  font-weight: 700;
  color: var(--faq-heading);
  margin: 0 0 1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.home-faq__lead {
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.65rem;
  line-height: 1.65;
  color: var(--hi-muted, #4a4540);
  margin: 0 0 1.35rem;
  max-width: 32em;
}

.home-faq__btn {
  display: inline-block;
  padding: 0.55rem 1.15rem;
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hi-ink, #2a2622) !important;
  background: transparent;
  border: 1px solid rgba(42, 38, 34, 0.22);
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.home-faq__btn:hover,
.home-faq__btn:focus {
  border-color: rgba(30, 69, 85, 0.35);
  background: rgba(255, 255, 255, 0.45);
  color: var(--faq-heading) !important;
}

.home-faq__figure {
  margin: 2rem 0 0;
}

.home-faq__img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  object-fit: contain;
  border-radius: var(--hi-radius, 14px);
}

.home-faq__caption {
  margin: 1rem 0 0;
  padding: 0 0 0 0.85rem;
  border-left: 3px solid var(--faq-caption-bar);
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--hi-muted, #4a4540);
}

.home-faq__main {
  padding-top: 0.15rem;
  padding-left: clamp(0, 1.5vw, 0.75rem);
}

.home-faq__list {
  margin: 0;
}

.home-faq__qa {
  margin: 0 0 clamp(1.75rem, 3vw, 2.35rem);
}

.home-faq__qa:last-child {
  margin-bottom: 0;
}

.home-faq__q {
  font-family: "Crimson Pro", "Noto Serif", Georgia, serif;
  font-size: clamp(1.2rem, 2.1vw, 1.4rem);
  font-weight: 700;
  color: var(--faq-heading);
  margin: 0;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.home-faq__a {
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.65rem;
  line-height: 1.72;
  color: var(--hi-muted, #4a4540);
  margin: 0.5rem 0 0;
}

.home-faq__a a {
  color: var(--hi-accent, #7a3d3d);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-faq__a a:hover,
.home-faq__a a:focus {
  color: var(--hi-accent-soft, #9a5a52);
}

@media (max-width: 767px) {
  .home-faq__main {
    padding-left: 0;
    margin-top: 2.25rem;
  }

  .home-faq__img {
    max-width: 100%;
  }
}

/* --- Trang chủ: Bài viết Nghiên cứu — lưới 4×3, thẻ ngang (ảnh trái / nội dung phải) --- */
.home-pinned-nc {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

.home-pinned-nc--wide {
  width: 100%;
  max-width: none;
}

.home-pinned-nc__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(122, 61, 61, 0.06), transparent 55%),
    linear-gradient(180deg, var(--hi-paper-2, #f2ede6) 0%, var(--hi-paper, #f7f4ef) 100%);
}

.home-pinned-nc__wide-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(100%, 1680px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3.5vw, 3rem);
}

.home-pinned-nc__main-title {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.home-pinned-nc__grid--4x3 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

@media (max-width: 1399px) {
  .home-pinned-nc__grid--4x3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .home-pinned-nc__grid--4x3 {
    grid-template-columns: 1fr;
  }
}

.home-pinned-nc__cell {
  margin: 0;
  min-width: 0;
  display: flex;
}

.home-pinned-nc__card--horizontal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 140px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: var(--hi-radius, 12px);
  border: 1px solid rgba(42, 38, 34, 0.08);
  box-shadow: 0 2px 14px rgba(42, 38, 34, 0.06);
  text-decoration: none;
  color: var(--hi-ink, #2a2622);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-pinned-nc__card--horizontal:hover,
.home-pinned-nc__card--horizontal:focus {
  box-shadow: 0 8px 28px rgba(42, 38, 34, 0.1);
  border-color: rgba(122, 61, 61, 0.2);
}

.home-pinned-nc__card-media {
  position: relative;
  flex: 0 0 40%;
  max-width: 44%;
  min-height: 120px;
  background: var(--hi-paper-2, #ebe6df);
  overflow: hidden;
}

.home-pinned-nc__card-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
}

.home-pinned-nc__card-img--placeholder {
  display: block;
  min-height: 120px;
  background: linear-gradient(135deg, #e8e2da 0%, #d4cdc3 100%);
}

.home-pinned-nc__card-cat {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  max-width: calc(100% - 1rem);
  padding: 0.25rem 0.5rem;
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  background: var(--hi-accent, #7a3d3d);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.home-pinned-nc__card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 1rem;
  gap: 0.4rem;
}

.home-pinned-nc__card-title {
  font-family: "Crimson Pro", "Noto Serif", Georgia, serif;
  font-size: clamp(1.3rem, 1.35vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--hi-ink, #1a1816);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-pinned-nc__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #6f6a64;
}

.home-pinned-nc__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.home-pinned-nc__meta-item--author {
  font-weight: 600;
  color: #55514c;
}

.home-pinned-nc__meta-ic {
  font-size: 1.1rem;
  opacity: 0.75;
}

.home-pinned-nc__card-excerpt {
  margin: 0.15rem 0 0;
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--hi-muted, #5c5752);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 639px) {
  .home-pinned-nc__card--horizontal {
    flex-direction: column;
    min-height: 0;
  }

  .home-pinned-nc__card-media {
    flex: none;
    max-width: none;
    width: 100%;
    min-height: 160px;
    aspect-ratio: 16 / 9;
  }

  .home-pinned-nc__card-img,
  .home-pinned-nc__card-img--placeholder {
    min-height: 160px;
  }
}

.home-pinned-nc__empty {
  font-family: Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--hi-muted, #4a4540);
  margin: 0;
  padding: 0.5rem 0 0;
  max-width: 48rem;
}

/* -------------------------------------------------------------------------- */
/* Biên Khảo Kinh Văn — trang chủ (bản tối giản, nền sáng + watermark mờ) */
/* -------------------------------------------------------------------------- */

.home-bien-khao {
  /* Biên khảo Kinh văn — tông nâu đỏ trang trọng + nền kem */
  --bk-paper: #f7f2eb;
  --bk-paper-light: #fcf9f4;
  --bk-paper-deep: #ede4d8;
  --bk-title: #4a2c20;
  --bk-text: #5c4035;
  --bk-muted: #7d5e52;
  --bk-accent: #6b3d2e;
  --bk-line: rgba(107, 61, 46, 0.18);
  --bk-card-shadow: 0 6px 28px rgba(74, 44, 32, 0.08);
  position: relative;
  isolation: isolate;
  padding: clamp(4.25rem, 9vw, 6.75rem) 0;
  overflow: hidden;
  background: var(--bk-paper);
  box-shadow: 0 10px 30px rgba(74, 44, 32, 0.04);
}

.home-bien-khao__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--bk-paper-light), transparent 52%),
    radial-gradient(ellipse 100% 60% at 100% 45%, rgba(243, 239, 232, 0.75), transparent 55%),
    radial-gradient(ellipse 80% 50% at 0% 85%, rgba(252, 250, 246, 0.55), transparent 50%),
    linear-gradient(180deg, var(--bk-paper-light) 0%, var(--bk-paper) 42%, var(--bk-paper-deep) 100%);
}

/* Mảng núi / mây mờ phía dưới — giống tranh thủy mặc, opacity thấp */
.home-bien-khao__mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(55%, 420px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='xMidYMax meet'%3E%3Cpath fill='%23c4b8a8' fill-opacity='0.22' d='M0,280 L0,140 Q120,100 280,130 Q400,80 560,120 Q720,60 880,100 Q1040,70 1200,110 Q1320,90 1440,130 L1440,280 Z'/%3E%3Cpath fill='%23b8ab9a' fill-opacity='0.16' d='M0,280 L0,190 Q200,160 400,200 Q600,150 800,185 Q1000,160 1200,195 Q1320,175 1440,200 L1440,280 Z'/%3E%3Cpath fill='%23d4ccc0' fill-opacity='0.14' d='M0,280 L0,230 Q300,210 600,245 Q900,215 1200,250 L1440,235 L1440,280 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

.home-bien-khao__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.home-bien-khao__head {
  text-align: center;
  max-width: 108rem;
  margin: 0 auto;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.home-bien-khao__kicker {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bk-muted);
  margin: 0 0 0.65rem;
  font-weight: 600;
}

.home-bien-khao__title {
  font-family: "Cormorant Garamond", "Crimson Pro", "Noto Serif", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.65rem);
  font-weight: 700;
  color: var(--bk-title);
  margin: 0 0 1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home-bien-khao__lead {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: clamp(0.98rem, 1.65vw, 1.6rem);
  line-height: 1.75;
  color: var(--bk-text);
  margin: 0 auto;
  max-width: 38rem;
}

.home-bien-khao__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
  max-width: 52rem;
  margin: clamp(1.35rem, 2.8vw, 2rem) auto 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  line-height: 1.35;
}

.home-bien-khao__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.65rem 0.45rem;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(255, 252, 248, 0.95) 0%, rgba(245, 236, 226, 0.88) 100%);
  border: 1px solid var(--bk-line);
  box-shadow: 0 2px 12px rgba(74, 44, 32, 0.06);
}

.home-bien-khao__stat-label {
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bk-muted);
}

.home-bien-khao__stat-value {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bk-accent);
}

@media (max-width: 900px) {
  .home-bien-khao__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home-bien-khao__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-bien-khao__stat:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 16rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.home-bien-khao__shelf-wrap {
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* <ul> là lưới — mỗi <li> một ô; tránh <span> trong <a> bị CSS global ép thành hàng ngang */
.home-bien-khao__shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: start;
}

.home-bien-khao__shelf-item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

@media (max-width: 991px) {
  .home-bien-khao__shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .home-bien-khao__shelf {
    grid-template-columns: 1fr;
    max-width: min(26rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

section.home-bien-khao a.home-bien-khao__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-decoration: none !important;
  color: inherit;
  border-radius: 14px;
  transition: transform 0.28s ease;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  section.home-bien-khao a.home-bien-khao__card {
    transition: none;
  }
}

section.home-bien-khao a.home-bien-khao__card:hover,
section.home-bien-khao a.home-bien-khao__card:focus-visible {
  transform: translateY(-4px);
}

.home-bien-khao__cover {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bk-line);
  box-shadow: var(--bk-card-shadow);
  background: #fff;
  flex-shrink: 0;
}

.home-bien-khao__cover img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  display: block;
}

.home-bien-khao__card-title {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  padding: 0 0.2rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: clamp(0.88rem, 1.35vw, 1.28rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--bk-text);
  text-align: center;
  flex-shrink: 0;
}

.home-bien-khao__cta {
  text-align: center;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}

.home-bien-khao__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bk-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 61, 46, 0.35);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.home-bien-khao__cta-link:hover,
.home-bien-khao__cta-link:focus-visible {
  color: #5a2f24;
  border-bottom-color: rgba(90, 47, 36, 0.55);
}