/* ===== Reset & cơ bản ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sh-font-sans);
  font-size: var(--sh-text-base);
  line-height: var(--sh-leading-normal);
  color: var(--sh-text);
  background: var(--sh-bg);
}
img { max-width: 100%; display: block; }
a { color: var(--sh-primary); text-decoration: none; }
a:hover { color: var(--sh-primary-hover); }
h1, h2, h3, h4 { font-family: var(--sh-font-serif); color: var(--sh-ink-700); line-height: var(--sh-leading-tight); margin: 0 0 var(--sh-space-3); }
h1 { font-size: var(--sh-text-4xl); font-weight: var(--sh-weight-semibold); }
h2 { font-size: var(--sh-text-3xl); font-weight: var(--sh-weight-semibold); }
h3 { font-size: var(--sh-text-xl); font-weight: var(--sh-weight-semibold); }
p { margin: 0 0 var(--sh-space-4); }
:focus-visible { outline: 3px solid var(--sh-ring); outline-offset: 2px; }

.sh-skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--sh-z-top);
  background: var(--sh-ink-700); color: #fff; padding: var(--sh-space-2) var(--sh-space-4); border-radius: 0 0 var(--sh-radius) 0;
}
.sh-skip-link:focus { left: 0; }

.sh-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--sh-space-5); }
.sh-main { min-height: 50vh; }

/* ===== Header ===== */
.sh-header {
  position: sticky; top: 0; z-index: var(--sh-z-header);
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-border);
}
.sh-header__inner { display: flex; align-items: center; gap: var(--sh-space-6); height: 72px; }
.sh-brand { display: flex; align-items: center; gap: var(--sh-space-2); font-family: var(--sh-font-serif); font-weight: var(--sh-weight-bold); font-size: var(--sh-text-xl); color: var(--sh-ink-700); flex-shrink: 0; }
.sh-brand__mark { color: var(--sh-primary); display: inline-flex; }
.sh-brand__mark .sh-icon { width: var(--sh-icon-lg); height: var(--sh-icon-lg); }

.sh-nav { display: flex; align-items: center; gap: var(--sh-space-2); flex: 1; }
.sh-nav__link, .sh-nav a.sh-nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--sh-space-2) var(--sh-space-3); border-radius: var(--sh-radius-sm);
  color: var(--sh-ink-700); font-weight: var(--sh-weight-medium); white-space: nowrap;
}
.sh-nav__link:hover, .sh-nav__link.is-active { color: var(--sh-primary); background: var(--sh-primary-soft); }
.sh-nav__caret { width: 14px; height: 14px; }

.sh-nav__item { position: relative; }
.sh-has-dropdown:hover .sh-dropdown,
.sh-has-dropdown:focus-within .sh-dropdown { display: block; }
.sh-dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--sh-radius-md);
  box-shadow: var(--sh-shadow); padding: var(--sh-space-2); margin-top: var(--sh-space-2);
}
.sh-dropdown__item { display: block; padding: var(--sh-space-2) var(--sh-space-3); border-radius: var(--sh-radius-sm); color: var(--sh-ink-700); }
.sh-dropdown__item:hover { background: var(--sh-bg-muted); color: var(--sh-primary); }

.sh-header__actions { display: flex; align-items: center; gap: var(--sh-space-3); }
.sh-search { display: flex; align-items: center; background: var(--sh-bg-muted); border-radius: var(--sh-radius-pill); padding: 2px 4px 2px var(--sh-space-4); }
.sh-search input { border: 0; background: transparent; padding: var(--sh-space-2) 0; width: 180px; font-family: var(--sh-font-sans); color: var(--sh-text); }
.sh-search input:focus { outline: none; }
.sh-search button { border: 0; background: var(--sh-primary); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-search button .sh-icon { width: var(--sh-icon-sm); height: var(--sh-icon-sm); }

.sh-nav-toggle { display: none; border: 1px solid var(--sh-border); background: #fff; border-radius: var(--sh-radius-sm); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.sh-mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--sh-border); padding: var(--sh-space-3) var(--sh-space-5); }
.sh-mobile-nav.is-open { display: flex; }
.sh-mobile-nav__link, .sh-mobile-nav a { display: block; padding: var(--sh-space-2) 0; color: var(--sh-ink-700); font-weight: var(--sh-weight-medium); }
.sh-mobile-nav__sublink { display: block; padding: var(--sh-space-1) 0 var(--sh-space-1) var(--sh-space-4); color: var(--sh-muted); font-size: var(--sh-text-sm); }

@media (max-width: 900px) {
  .sh-nav, .sh-search { display: none; }
  .sh-nav-toggle { display: inline-flex; }
}

/* ===== Footer ===== */
.sh-footer { background: var(--sh-bg-deep); color: var(--sh-on-deep-muted); padding: var(--sh-space-16) 0 var(--sh-space-6); margin-top: var(--sh-space-20); }
.sh-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sh-space-10); padding-bottom: var(--sh-space-10); border-bottom: 1px solid color-mix(in srgb, #fff 15%, transparent); }
.sh-footer__about { display: flex; align-items: center; gap: var(--sh-space-2); font-family: var(--sh-font-serif); font-size: var(--sh-text-lg); font-weight: var(--sh-weight-semibold); color: #fff; margin-bottom: var(--sh-space-2); }
.sh-footer__about .sh-brand__mark { color: var(--sh-glow); }
.sh-footer__social { display: flex; gap: var(--sh-space-3); margin-top: var(--sh-space-3); }
.sh-footer__social a { color: var(--sh-on-deep-muted); }
.sh-footer__social a:hover { color: var(--sh-glow); }
.sh-footer__title { color: #fff; font-weight: var(--sh-weight-semibold); margin-bottom: var(--sh-space-3); }
.sh-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sh-space-2); }
.sh-footer__links a { color: var(--sh-on-deep-muted); }
.sh-footer__links a:hover { color: var(--sh-glow); }
.sh-footer__bottom { padding-top: var(--sh-space-6); text-align: center; font-size: var(--sh-text-sm); color: color-mix(in srgb, #fff 50%, transparent); }

@media (max-width: 760px) {
  .sh-footer__grid { grid-template-columns: 1fr; gap: var(--sh-space-6); }
}

/* ===== Nút & huy hiệu ===== */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sh-space-2);
  padding: var(--sh-space-3) var(--sh-space-5); border-radius: var(--sh-radius-pill);
  font-weight: var(--sh-weight-semibold); font-size: var(--sh-text-sm); border: 1px solid transparent; cursor: pointer;
  transition: background var(--sh-duration) var(--sh-ease), color var(--sh-duration) var(--sh-ease), border-color var(--sh-duration) var(--sh-ease);
}
.sh-btn--primary { background: var(--sh-primary); color: #fff; }
.sh-btn--primary:hover { background: var(--sh-primary-hover); color: #fff; }
.sh-btn--outline { background: transparent; border-color: var(--sh-border); color: var(--sh-ink-700); }
.sh-btn--outline:hover { border-color: var(--sh-primary); color: var(--sh-primary); }
.sh-btn--sm { padding: var(--sh-space-2) var(--sh-space-4); font-size: var(--sh-text-xs); }
.sh-btn--block { width: 100%; }
.sh-btn .sh-icon { width: var(--sh-icon-sm); height: var(--sh-icon-sm); }

.sh-pill { display: inline-flex; align-items: center; padding: var(--sh-space-1) var(--sh-space-3); border-radius: var(--sh-radius-pill); font-size: var(--sh-text-xs); font-weight: var(--sh-weight-medium); background: var(--sh-primary-soft); color: var(--sh-primary-hover); }

/* ===== Sao đánh giá ===== */
.sh-stars { display: inline-flex; gap: 2px; color: var(--sh-star); }
.sh-stars .sh-star { width: var(--sh-icon-sm); height: var(--sh-icon-sm); }
.sh-stars .sh-star--empty { color: var(--sh-star-empty); }
.sh-rating { display: inline-flex; align-items: center; gap: var(--sh-space-2); }
.sh-rating__value { font-weight: var(--sh-weight-semibold); color: var(--sh-ink-700); }

/* ===== Section heading dùng chung ===== */
.sh-section { padding: var(--sh-section-y) 0; }
.sh-section--tight { padding: var(--sh-section-y-tight) 0; }
.sh-section--muted { background: var(--sh-bg-muted); }
.sh-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sh-space-4); margin-bottom: var(--sh-space-8); }
.sh-section__eyebrow { display: inline-block; color: var(--sh-primary); font-weight: var(--sh-weight-semibold); font-size: var(--sh-text-sm); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sh-space-2); }
.sh-section__lead { color: var(--sh-muted); max-width: 640px; }

/* ===== Hero ===== */
.sh-hero { background: var(--sh-bg-deep); color: #fff; padding: var(--sh-space-20) 0; }
.sh-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sh-space-10); align-items: center; }
.sh-hero__eyebrow { color: var(--sh-glow); font-weight: var(--sh-weight-semibold); letter-spacing: .06em; text-transform: uppercase; font-size: var(--sh-text-sm); margin-bottom: var(--sh-space-3); display: block; }
.sh-hero h1 { color: #fff; font-size: var(--sh-text-5xl); }
.sh-hero p { color: var(--sh-on-deep-muted); font-size: var(--sh-text-lg); max-width: 560px; }
.sh-hero__actions { display: flex; gap: var(--sh-space-3); margin-top: var(--sh-space-6); flex-wrap: wrap; }
.sh-hero__art { display: flex; gap: var(--sh-space-4); justify-content: center; }
.sh-hero__art img { border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow-lg); }

@media (max-width: 900px) {
  .sh-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-hero__art { display: none; }
}

/* ===== Lưới sách & thẻ sách (book-card) ===== */
.sh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sh-space-6); }
@media (max-width: 1024px) { .sh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .sh-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sh-space-4); } }
@media (max-width: 480px) { .sh-grid { grid-template-columns: 1fr; } }

.sh-book-card { display: flex; flex-direction: column; background: var(--sh-surface); border-radius: var(--sh-radius-lg); overflow: hidden; border: 1px solid var(--sh-border); transition: transform var(--sh-duration) var(--sh-ease), box-shadow var(--sh-duration) var(--sh-ease); }
.sh-book-card:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow); }
.sh-book-card__cover { aspect-ratio: 3/4; background: var(--sh-bg-muted); overflow: hidden; }
.sh-book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.sh-book-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--sh-bg-muted); color: var(--sh-ink-300); }
.sh-book-card__placeholder .sh-icon { width: 48px; height: 48px; }
.sh-book-card__body { padding: var(--sh-space-4); display: flex; flex-direction: column; gap: var(--sh-space-2); flex: 1; }
.sh-book-card__cats { display: flex; gap: var(--sh-space-1); flex-wrap: wrap; }
.sh-book-card__title { font-family: var(--sh-font-serif); font-size: var(--sh-text-lg); font-weight: var(--sh-weight-semibold); margin: 0; }
.sh-book-card__title a { color: var(--sh-ink-700); }
.sh-book-card__title a:hover { color: var(--sh-primary); }
.sh-book-card__author { color: var(--sh-muted); font-size: var(--sh-text-sm); margin: 0; }
.sh-book-card__desc { color: var(--sh-muted); font-size: var(--sh-text-sm); flex: 1; }
.sh-book-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* ===== Nút mua theo từng sàn ===== */
.sh-buy-links { display: flex; flex-direction: column; gap: var(--sh-space-3); }
.sh-buy-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sh-space-3); padding: var(--sh-space-3) var(--sh-space-4); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); background: #fff; }
.sh-buy-link__info { display: flex; flex-direction: column; }
.sh-buy-link__platform { font-weight: var(--sh-weight-semibold); color: var(--sh-ink-700); }
.sh-buy-link__price { color: var(--sh-primary); font-weight: var(--sh-weight-semibold); }

/* ===== Chi tiết sách ===== */
.sh-book-detail { display: grid; grid-template-columns: 320px 1fr; gap: var(--sh-space-10); align-items: start; }
.sh-book-detail__cover img, .sh-book-detail__cover .sh-book-card__placeholder { border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow); aspect-ratio: 3/4; width: 100%; object-fit: cover; }
.sh-book-detail__meta { display: flex; flex-wrap: wrap; gap: var(--sh-space-4); color: var(--sh-muted); margin-bottom: var(--sh-space-4); }
.sh-book-detail__content { font-size: var(--sh-text-lg); line-height: 1.8; margin-top: var(--sh-space-8); }
.sh-book-detail__content img { border-radius: var(--sh-radius); }
.sh-book-detail__content h2, .sh-book-detail__content h3 { margin-top: var(--sh-space-8); }
.sh-sidebar-box { background: var(--sh-bg-muted); border-radius: var(--sh-radius-lg); padding: var(--sh-space-5); margin-top: var(--sh-space-6); }
.sh-sidebar-box__title { font-weight: var(--sh-weight-semibold); margin-bottom: var(--sh-space-3); display: block; }

@media (max-width: 760px) {
  .sh-book-detail { grid-template-columns: 1fr; }
  .sh-book-detail__cover { max-width: 240px; margin: 0 auto; }
}

/* ===== Breadcrumb ===== */
.sh-breadcrumb { display: flex; gap: var(--sh-space-2); flex-wrap: wrap; font-size: var(--sh-text-sm); color: var(--sh-muted); margin-bottom: var(--sh-space-6); }
.sh-breadcrumb a { color: var(--sh-muted); }
.sh-breadcrumb a:hover { color: var(--sh-primary); }

/* ===== Phân trang ===== */
.pagination { display: flex; gap: var(--sh-space-2); list-style: none; padding: 0; margin: var(--sh-space-8) 0 0; justify-content: center; }
.pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: var(--sh-radius-sm); border: 1px solid var(--sh-border); color: var(--sh-ink-700); }
.pagination .page-item.active .page-link { background: var(--sh-primary); border-color: var(--sh-primary); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--sh-ink-300); }

/* ===== Nút lên đầu trang ===== */
.sh-to-top {
  position: fixed; right: var(--sh-space-5); bottom: var(--sh-space-5); z-index: var(--sh-z-overlay);
  width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--sh-primary); color: #fff;
  display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-shadow);
}
.sh-to-top.is-visible { display: flex; }

/* ===== Bài viết (SEO teaser) ===== */
.sh-post-card { border-bottom: 1px solid var(--sh-border); padding: var(--sh-space-5) 0; }
.sh-post-card__title { font-family: var(--sh-font-serif); font-size: var(--sh-text-xl); margin: 0 0 var(--sh-space-2); }
.sh-post-card__title a { color: var(--sh-ink-700); }
.sh-post-card__desc { color: var(--sh-muted); }
.sh-related-books { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sh-space-4); margin: var(--sh-space-4) 0 var(--sh-space-8); }
@media (max-width: 600px) { .sh-related-books { grid-template-columns: 1fr; } }
.sh-related-book { display: flex; gap: var(--sh-space-3); align-items: center; background: var(--sh-bg-muted); border-radius: var(--sh-radius); padding: var(--sh-space-3); }
.sh-related-book img, .sh-related-book .sh-book-card__placeholder { width: 56px; height: 76px; object-fit: cover; border-radius: var(--sh-radius-sm); flex-shrink: 0; }
.sh-related-book__title { font-weight: var(--sh-weight-semibold); margin: 0; }
.sh-related-book__title a { color: var(--sh-ink-700); }

/* ===== Page hero (phụ, cho trang con) ===== */
.sh-page-hero { background: var(--sh-bg-deep); color: #fff; padding: var(--sh-space-12) 0; }
.sh-page-hero--center { text-align: center; }
.sh-page-hero__title { color: #fff; margin-bottom: var(--sh-space-2); }
.sh-page-hero__lead { color: var(--sh-on-deep-muted); margin: 0; }
.sh-crumbs { list-style: none; display: flex; gap: var(--sh-space-2); padding: 0; margin: 0 0 var(--sh-space-4); font-size: var(--sh-text-sm); color: var(--sh-on-deep-muted); flex-wrap: wrap; justify-content: center; }
.sh-crumbs a { color: var(--sh-on-deep-muted); }
.sh-crumbs a:hover { color: var(--sh-glow); }
.sh-crumbs li + li::before { content: '/'; margin-right: var(--sh-space-2); opacity: .6; }
.sh-crumbs li { display: flex; gap: var(--sh-space-2); }

/* ===== Nội dung WYSIWYG ===== */
.sh-prose { max-width: 760px; margin: 0 auto; }
.sh-prose img { border-radius: var(--sh-radius); margin: var(--sh-space-4) 0; }
.sh-prose h2, .sh-prose h3 { margin-top: var(--sh-space-8); }
.sh-prose ul, .sh-prose ol { padding-left: var(--sh-space-6); }
.sh-prose blockquote { border-left: 3px solid var(--sh-primary); padding-left: var(--sh-space-4); color: var(--sh-muted); font-style: italic; margin: var(--sh-space-6) 0; }

/* ===== Form (liên hệ…) ===== */
.sh-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sh-space-4); }
@media (max-width: 600px) { .sh-form-row--2 { grid-template-columns: 1fr; } }
.sh-field { margin-bottom: var(--sh-space-4); }
.sh-label { display: block; font-weight: var(--sh-weight-medium); margin-bottom: var(--sh-space-2); }
.sh-input, .sh-textarea {
  width: 100%; padding: var(--sh-space-3) var(--sh-space-4); border: 1px solid var(--sh-border); border-radius: var(--sh-radius);
  font-family: var(--sh-font-sans); font-size: var(--sh-text-base); color: var(--sh-text); background: #fff;
}
.sh-input:focus, .sh-textarea:focus { outline: none; border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-ring); }
.sh-input.is-invalid, .sh-textarea.is-invalid { border-color: var(--sh-danger); }
.sh-error { display: block; color: var(--sh-danger); font-size: var(--sh-text-sm); margin-top: var(--sh-space-1); }

.sh-alert { padding: var(--sh-space-4); border-radius: var(--sh-radius); margin-bottom: var(--sh-space-6); }
.sh-alert--success { background: color-mix(in srgb, var(--sh-success) 12%, #fff); color: var(--sh-success); }
.sh-alert--danger { background: color-mix(in srgb, var(--sh-danger) 12%, #fff); color: var(--sh-danger); }
.sh-alert ul { margin: 0; padding-left: var(--sh-space-5); }

.sh-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sh-space-10); align-items: start; }
@media (max-width: 860px) { .sh-split { grid-template-columns: 1fr; } }

.sh-office-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sh-space-4); }
.sh-office-list li { display: flex; gap: var(--sh-space-3); align-items: flex-start; }
.sh-office-list .sh-icon { color: var(--sh-primary); flex-shrink: 0; margin-top: 2px; }

.sh-empty { text-align: center; padding: var(--sh-space-16) 0; color: var(--sh-muted); }
.sh-empty .sh-icon { width: 40px; height: 40px; margin-bottom: var(--sh-space-3); }

/* ===== Icon tile (vòng tròn/ô icon trang trí) ===== */
.sh-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--sh-radius-lg); background: var(--sh-primary-soft); color: var(--sh-primary); margin: 0 auto var(--sh-space-3); }
.sh-icon-tile .sh-icon { width: 26px; height: 26px; }