/* =========================================================================
   Di sản Lào Cai — reusable theme
   Giữ nhận diện màu hiện tại của disanvanhoa.laocai.gov.vn, làm lại
   cấu trúc HTML/bố cục/UX. Token-first: đổi biến ở :root là đổi cả theme.
   Port sang Blade/Django: bê nguyên file này, thay nội dung tĩnh bằng vòng
   lặp dữ liệu — class không phụ thuộc framework.
   ========================================================================= */

:root {
  /* Brand — đúng màu đang dùng trên production */
  --c-primary: #3498db;
  --c-primary-700: #2980b9;
  --c-primary-050: #eaf4fb;
  --c-ink: #1f2d3d;          /* họ #2c3e50 hiện tại, tối hơn 1 nấc cho contrast */
  --c-ink-soft: #55677a;
  --c-ink-faint: #8195a8;
  --c-bg: #f4f7fa;
  --c-surface: #ffffff;
  --c-line: #e2e9f0;
  --c-navy-900: #0f1e33;     /* footer / dải subheader hiện tại */
  --c-navy-800: #17293f;
  --c-on-navy: #d7e1ec;

  /* Hệ màu xếp hạng di tích — lấy nguyên từ categoryConfig của bản đồ hiện tại */
  --rank-special: #dc3545;
  --rank-national: #007bff;
  --rank-provincial: #28a745;
  --rank-district: #e0a800;  /* #ffc107 hạ 1 nấc để chữ trắng đọc được */

  /* Type */
  --font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-12: .75rem;  --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem;
  --fs-17: 1.0625rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem;
  --fs-hero: clamp(1.75rem, 4.5vw, 3rem);

  /* Layout */
  --container: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(15, 30, 51, .06), 0 8px 24px rgba(15, 30, 51, .07);
  --shadow-card-hover: 0 2px 4px rgba(15, 30, 51, .08), 0 16px 40px rgba(15, 30, 51, .13);
  --header-h: 68px;
}

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
ul.plain { list-style: none; margin: 0; padding: 0; }
/* hidden phải thắng mọi display của class (vd .toolbar{display:flex}) */
[hidden] { display: none !important; }
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-navy-900); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: 56px; }
.section--alt { background: var(--c-surface); }

/* Section header: bỏ kiểu mọi-thứ-căn-giữa, dùng eyebrow + tiêu đề trái */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head__eyebrow {
  display: block; font-size: var(--fs-12); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary-700);
  margin-bottom: 6px;
}
.section-head h2 { font-size: var(--fs-24); font-weight: 800; margin: 0; }
.section-head__more { font-weight: 600; font-size: var(--fs-14); white-space: nowrap; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--fs-14)/1 var(--font-sans);
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary-700); }
.btn--on-dark { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.btn--on-dark:hover { background: rgba(255,255,255,.24); color: #fff; }

/* ---- Rank system (signature) ------------------------------------------ */
/* Một hệ màu xếp hạng duy nhất, dùng cho badge, filter, chấm bản đồ.       */
.rank { --rank: var(--c-ink-soft); }
.rank--special    { --rank: var(--rank-special); }
.rank--national   { --rank: var(--rank-national); }
.rank--provincial { --rank: var(--rank-provincial); }
.rank--district   { --rank: var(--rank-district); }

.rank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--rank);
  padding: 4px 12px; border-radius: 999px;
}
.rank-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.85);
}

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(15,30,51,.08); }
.site-header__bar {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand__logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.brand__name { font-size: var(--fs-17); color: var(--c-primary-700); letter-spacing: .01em; white-space: nowrap; }
/* Dòng phụ đặt in hoa cỡ nhỏ, giãn chữ — vừa đúng một dòng dưới tên thương hiệu,
   không xuống dòng dù tên tỉnh dài. */
.brand__tag  {
  display: block; font-size: 10px; font-weight: 500; text-transform: uppercase;
  color: var(--c-ink-faint); letter-spacing: 1px; white-space: nowrap;
}

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  font-weight: 600; font-size: var(--fs-14); color: var(--c-ink);
  /* Nhãn menu không được xuống dòng — số mục lấy từ CSDL nên có thể nhiều hơn bản mẫu. */
  white-space: nowrap;
}
/* Màn hình hẹp hơn: thu gọn khoảng đệm thay vì để chữ tràn/xuống dòng.
   Số mục menu lấy từ CSDL nên có thể nhiều hơn bản mẫu — nới ngưỡng cho rộng. */
@media (max-width: 1440px) {
  .site-nav__link { padding: 9px 10px; }
  .site-nav__list { gap: 0; }
}
.site-nav__link:hover { background: var(--c-primary-050); color: var(--c-primary-700); text-decoration: none; }
.site-nav__link[aria-current="page"] { background: var(--c-primary); color: #fff; }
.site-nav__caret { font-size: 10px; transition: transform .15s; }
.has-submenu { position: relative; }
.has-submenu.is-open .site-nav__caret { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card-hover);
  padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; translate: 0 -4px;
  transition: opacity .15s, translate .15s, visibility .15s;
}
.has-submenu.is-open .submenu,
.has-submenu:focus-within .submenu { opacity: 1; visibility: visible; translate: 0 0; }

/* Mở bằng rê chuột trên máy tính. Trước đây menu chỉ mở khi bấm hoặc khi có tiêu
   điểm bàn phím, nên trên máy tính rê chuột vào "Các di tích" không thấy gì.
   Chỉ áp cho thiết bị có con trỏ thật: trên cảm ứng, :hover dính lại sau khi chạm
   khiến menu mở mãi không đóng. */
@media (hover: hover) and (pointer: fine) {
  .has-submenu:hover .submenu { opacity: 1; visibility: visible; translate: 0 0; }
  .has-submenu:hover .site-nav__caret { transform: rotate(180deg); }

  /* Menu con cách nút 8px; nếu để trống khoảng đó thì chuột đi xuống sẽ rời khỏi
     vùng hover và menu đóng ngay. Nối liền bằng một dải trong suốt. */
  .has-submenu .submenu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  }
}
.submenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 6px; color: var(--c-ink); font-size: var(--fs-14); font-weight: 500;
}
.submenu a:hover { background: var(--c-primary-050); color: var(--c-primary-700); text-decoration: none; }
.submenu .rank-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rank); flex: none; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch {
  font-weight: 700; font-size: var(--fs-13); color: var(--c-ink-soft);
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--c-line); background: none; cursor: pointer;
}
.lang-switch:hover { color: var(--c-primary-700); border-color: var(--c-primary); text-decoration: none; }
.search-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--c-line); background: var(--c-bg);
  color: var(--c-ink-soft); font: 500 var(--fs-13) var(--font-sans);
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.search-toggle:hover { border-color: var(--c-primary); color: var(--c-primary-700); }

/* Mobile drawer */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 8px; color: var(--c-ink);
  align-items: center; justify-content: center; font-size: 20px;
}
.nav-toggle:hover { background: var(--c-primary-050); }
/* Drawer nằm bên trong .site-header (sticky, z-index 100) nên bị giới hạn trong
   tầng xếp chồng của header: overlay phải thấp hơn 100, nếu không nó phủ lên
   chính drawer và mọi cú chạm vào menu đều rơi vào overlay. */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(15,30,51,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

@media (max-width: 640px) {
  .brand__name { white-space: nowrap; font-size: var(--fs-15); }
  .brand__tag { display: none; }
}
@media (max-width: 991px) {
  .site-nav {
    position: fixed; z-index: 120; top: 0; left: 0; bottom: 0;
    width: min(320px, 85vw); margin: 0;
    background: var(--c-surface); padding: 16px;
    translate: -100% 0; transition: translate .25s ease;
    overflow-y: auto;
  }
  .site-nav.is-open { translate: 0 0; box-shadow: 8px 0 32px rgba(15,30,51,.2); }
  .site-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .site-nav__link { width: 100%; justify-content: space-between; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); }
  .site-nav__link[aria-current="page"] { border-color: transparent; }
  .submenu { position: static; opacity: 1; visibility: hidden; translate: none; box-shadow: none; border: 0; padding: 0 0 0 14px; display: none; }
  .has-submenu.is-open .submenu { display: block; visibility: visible; }
  .nav-toggle { display: inline-flex; }
  .header-actions .search-toggle span { display: none; }
}
@media (min-width: 992px) {
  .site-nav__head { display: none; }
}
/* Một nút đóng duy nhất trong drawer (sửa lỗi 2 nút X chồng nhau hiện tại) */
.drawer-close {
  background: none; border: 1px solid var(--c-line); border-radius: 8px;
  width: 40px; height: 40px; cursor: pointer; color: var(--c-ink); font-size: 16px;
}
.drawer-close:hover { border-color: var(--rank-special); color: var(--rank-special); }

/* ---- Hero slider (scroll-snap, thay rev-slider) ------------------------ */
.hero { position: relative; background: var(--c-navy-900); }
.hero__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* width phải cố định 100% — nếu để auto, aspect-ratio + min-height sẽ
     suy ra width từ height và làm cả trang tràn ngang trên mobile */
  width: 100%; aspect-ratio: 21 / 9; max-height: 640px; min-height: 380px;
}
@media (max-width: 640px) {
  .hero__track { aspect-ratio: auto; height: 480px; }
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: chữ trên hero luôn đọc được — sửa lỗi contrast hiện tại */
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,30,51,0) 30%, rgba(15,30,51,.72) 100%);
}
.hero__caption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 0 48px;
}
.hero__caption .rank-badge { margin-bottom: 12px; }
.hero__title {
  font-size: var(--fs-hero); font-weight: 800; color: #fff; margin: 0 0 8px;
  text-shadow: 0 2px 12px rgba(15,30,51,.4); max-width: 18ch;
}
.hero__desc { color: rgba(255,255,255,.88); max-width: 52ch; margin-bottom: 20px; font-size: var(--fs-15); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__dots {
  position: absolute; z-index: 3; right: 24px; bottom: 24px;
  display: flex; gap: 8px;
}
.hero__dot {
  width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s, background .2s;
}
.hero__dot[aria-current="true"] { background: #fff; width: 26px; }

/* ---- Heritage cards ---------------------------------------------------- */
.card-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.heritage-card {
  position: relative; display: flex; flex-direction: column;
  height: 100%; /* mọi card trong một hàng grid cao bằng nhau; meta tự dính đáy */
  background: var(--c-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow .2s, translate .2s;
}
.heritage-card:hover { box-shadow: var(--shadow-card-hover); translate: 0 -4px; }
.heritage-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-primary-050); }
.heritage-card__media img { width: 100%; height: 100%; object-fit: cover; }
.heritage-card__media .rank-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.heritage-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; flex: 1; }
.heritage-card__title { font-size: var(--fs-17); font-weight: 700; margin: 0; }
/* Cả card là một link — vùng bấm lớn, không chip giả nút */
.heritage-card__title a { color: inherit; }
.heritage-card__title a::after { content: ""; position: absolute; inset: 0; }
.heritage-card__title a:hover { text-decoration: none; color: var(--c-primary-700); }
.heritage-card__place {
  display: flex; align-items: baseline; gap: 6px;
  color: var(--c-ink-soft); font-size: var(--fs-13); margin: 0;
}
.heritage-card__excerpt {
  color: var(--c-ink-soft); font-size: var(--fs-14); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Meta: một dòng chữ lặng, không phải dàn nút giả */
.heritage-card__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-line);
  display: flex; gap: 14px; flex-wrap: wrap;
  color: var(--c-ink-faint); font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}
.heritage-card__meta i { color: var(--c-primary); margin-right: 4px; }
/* Tiêu đề thẻ có lớp phủ ::after chiếm cả thẻ, nên liên kết tư liệu phải nổi lên
   trên thì mới bấm được. */
.heritage-card__meta a { position: relative; z-index: 1; color: var(--c-ink-faint); }
.heritage-card__meta a:hover { color: var(--c-primary-700); text-decoration: none; }

/* Panorama thumbnail: nền tự trôi ngang, mô phỏng ảnh 360° trên card.
   Tích hợp thật: thay bằng viewer PANOLENS/PSV lazy-load như hiện tại. */
/* Ảnh panorama là ảnh cầu trải phẳng (tỉ lệ 2:1): hai cực trên/dưới bị kéo giãn
   rất mạnh, chỉ dải quanh đường chân trời là nhìn tự nhiên. Vì vậy phóng to và
   cắt lấy dải giữa thay vì hiển thị nguyên ảnh như một tấm ảnh thường. */
.pano-thumb {
  position: absolute; inset: 0;
  background-size: auto 215%; background-position: 0 50%; background-repeat: repeat-x;
  animation: pano-drift 60s linear infinite;
}
.heritage-card:hover .pano-thumb { animation-play-state: paused; }
@keyframes pano-drift {
  from { background-position-x: 0; }
  to   { background-position-x: -1400px; }
}
@media (prefers-reduced-motion: reduce) {
  .pano-thumb { animation: none; }
}
.heritage-card__media .badge-360 { left: auto; right: 12px; }

/* Card nổi bật cho Di tích Quốc gia đặc biệt: chiếm cả hàng, layout ngang lớn */
.card-grid__featured { grid-column: 1 / -1; }
.heritage-card--featured { flex-direction: row; border: 2px solid var(--rank); }
.heritage-card--featured .heritage-card__media { flex: 1.25; aspect-ratio: auto; min-height: 340px; }
.heritage-card--featured .heritage-card__body { flex: 1; padding: 28px 30px; gap: 12px; justify-content: center; }
.heritage-card--featured .heritage-card__title { font-size: var(--fs-24); }
.heritage-card--featured .heritage-card__excerpt { -webkit-line-clamp: 4; font-size: var(--fs-15); }
.heritage-card--featured .heritage-card__media .rank-badge { font-size: var(--fs-13); padding: 6px 16px; }
@media (max-width: 767px) {
  .heritage-card--featured { flex-direction: column; }
  .heritage-card--featured .heritage-card__media { aspect-ratio: 16 / 10; min-height: 0; }
  .heritage-card--featured .heritage-card__body { padding: 18px; }
}

/* ---- News -------------------------------------------------------------- */
.news-card {
  position: relative; display: flex; flex-direction: column;
  height: 100%;
  background: var(--c-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow .2s, translate .2s;
}
.news-card:hover { box-shadow: var(--shadow-card-hover); translate: 0 -4px; }
.news-card__media { aspect-ratio: 16 / 9; background: var(--c-primary-050); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card__date { color: var(--c-ink-faint); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.news-card__title { font-size: var(--fs-15); font-weight: 700; margin: 0; }
.news-card__title a { color: inherit; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__title a:hover { text-decoration: none; color: var(--c-primary-700); }
.news-card__excerpt { color: var(--c-ink-soft); font-size: var(--fs-14); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card--featured { grid-row: span 2; }
.news-card--featured .news-card__media { aspect-ratio: 16 / 10; }
.news-card--featured .news-card__title { font-size: var(--fs-20); }

/* ---- Subheader (trang trong) ------------------------------------------- */
.subheader {
  background: linear-gradient(120deg, var(--c-navy-900), var(--c-navy-800));
  color: #fff; padding: 44px 0 36px;
}
.subheader h1 { font-size: var(--fs-32); font-weight: 800; color: #fff; margin: 0 0 8px; }
.subheader__lede { color: var(--c-on-navy); max-width: 60ch; margin: 0; }
.breadcrumb { margin-bottom: 14px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; font-size: var(--fs-13); }
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
/* Mặc định dùng trên nền sáng; các khối nền navy đảo màu ở dưới. */
.breadcrumb li + li::before { content: "/"; color: var(--c-ink-faint); margin-inline: 4px; }
.breadcrumb a { color: var(--c-ink-soft); }
.breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

.subheader .breadcrumb li + li::before,
.detail-hero__content .breadcrumb li + li::before { color: rgba(255,255,255,.4); }
.subheader .breadcrumb a,
.detail-hero__content .breadcrumb a { color: var(--c-on-navy); }
.subheader .breadcrumb [aria-current="page"],
.detail-hero__content .breadcrumb [aria-current="page"] { color: #fff; }

/* ---- Listing: filter + toolbar ----------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 28px;
}
.toolbar__search { position: relative; flex: 1 1 260px; }
.toolbar__search input {
  /* Safari tự vẽ thêm một kính lúp trong input[type=search] — tắt đi, giao diện
     đã có icon riêng rồi, không thì hiện hai cái. */
  appearance: none; -webkit-appearance: none;
  width: 100%; font: 500 var(--fs-14) var(--font-sans);
  padding: 11px 14px 11px 40px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink);
}
.toolbar__search input::-webkit-search-decoration,
.toolbar__search input::-webkit-search-results-button,
.toolbar__search input::-webkit-search-results-decoration { display: none; }
.toolbar__search input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); }
.toolbar__search i { position: absolute; left: 15px; top: 50%; translate: 0 -50%; color: var(--c-ink-faint); }
.toolbar__count { color: var(--c-ink-soft); font-size: var(--fs-13); white-space: nowrap; font-variant-numeric: tabular-nums; }

.rank-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-filter__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--fs-13) var(--font-sans); color: var(--c-ink-soft);
  background: var(--c-bg); border: 1px solid var(--c-line);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.rank-filter__btn .rank-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rank, var(--c-primary)); }
.rank-filter__btn:hover { border-color: var(--rank, var(--c-primary)); color: var(--c-ink); }
/* fallback --c-primary: nút "Tất cả" không thuộc scope .rank nào — thiếu fallback
   nó thành nền trong suốt + chữ trắng (tàng hình) */
.rank-filter__btn[aria-pressed="true"] { background: var(--rank, var(--c-primary)); border-color: var(--rank, var(--c-primary)); color: #fff; }
.rank-filter__btn[aria-pressed="true"] .rank-dot { background: #fff; }

/* ---- Pagination --------------------------------------------------------- */
.pagination { display: flex; justify-content: center; margin-top: 36px; }
.pagination ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.pagination a, .pagination [aria-current] , .pagination .disabled {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: 8px; border-radius: 10px;
  font: 600 var(--fs-14) var(--font-sans); color: var(--c-ink);
  border: 1px solid var(--c-line); background: var(--c-surface);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary-700); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pagination .disabled { color: var(--c-ink-faint); background: var(--c-bg); }

/* ---- Detail page -------------------------------------------------------- */
.detail-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--c-navy-900); }
.detail-hero__bg { position: absolute; inset: 0; }
.detail-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,30,51,.15) 20%, rgba(15,30,51,.8) 100%);
}
.detail-hero__content { position: relative; z-index: 2; padding: 120px 0 36px; width: 100%; }
.detail-hero__content .breadcrumb { margin-bottom: 18px; }
.detail-hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 800; max-width: 22ch; margin-bottom: 12px; }
.detail-hero__meta { display: flex; gap: 20px; flex-wrap: wrap; color: rgba(255,255,255,.85); font-size: var(--fs-14); }
.detail-hero__meta i { color: var(--c-primary); margin-right: 6px; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .detail-layout { grid-template-columns: 1fr; } }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-20); font-weight: 800; margin-top: 1.6em; }
.prose p { color: var(--c-ink-soft); }
.detail-section + .detail-section { margin-top: 44px; }
.detail-section > h2 {
  font-size: var(--fs-20); font-weight: 800;
  padding-left: 14px; border-left: 4px solid var(--rank, var(--c-primary));
  margin-bottom: 18px;
}

/* Gallery */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.media-grid button, .media-grid a {
  position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--c-primary-050);
  aspect-ratio: 4 / 3;
}
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: scale .25s; }
.media-grid button:hover img, .media-grid a:hover img { scale: 1.06; }
.media-grid figcaption, .media-grid .media-grid__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 12px 10px; color: #fff; font-size: var(--fs-13); font-weight: 600; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(15,30,51,.75));
}

/* Lightbox */
.lightbox { border: 0; border-radius: var(--radius); padding: 0; background: var(--c-navy-900); max-width: min(960px, 92vw); }
.lightbox::backdrop { background: rgba(15, 30, 51, .82); }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; color: var(--c-on-navy); font-size: var(--fs-13); }
.lightbox__close { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; width: 36px; height: 36px; cursor: pointer; }

/* Audio player (UI thuyết minh) */
.audio-player {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-card);
}
.audio-player__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.audio-player__cover { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.audio-player__title { font-weight: 700; font-size: var(--fs-15); margin: 0; }
.audio-player__sub { color: var(--c-ink-faint); font-size: var(--fs-13); margin: 0; }
.audio-player__seek { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.audio-player__seek input[type="range"] { flex: 1; accent-color: var(--c-primary); }
.audio-player__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 6px; }
.audio-player__btn {
  background: none; border: 0; cursor: pointer; color: var(--c-ink-soft);
  width: 42px; height: 42px; border-radius: 50%; font-size: 15px;
}
.audio-player__btn:hover { background: var(--c-primary-050); color: var(--c-primary-700); }
.audio-player__btn--play {
  width: 58px; height: 58px; background: var(--c-primary); color: #fff; font-size: 19px;
}
.audio-player__btn--play:hover { background: var(--c-primary-700); color: #fff; }
.audio-player__extra { display: flex; justify-content: space-between; align-items: center; color: var(--c-ink-soft); font-size: var(--fs-13); }
.audio-player__extra select { font: inherit; border: 1px solid var(--c-line); border-radius: 6px; padding: 4px 8px; background: var(--c-surface); color: inherit; }
/* Trang thuyết minh: thẻ phát nằm CỘT TRÁI hẹp, nội dung phụ đề chiếm cột phải
   rộng — giữ đúng cách bố trí của bản trước, chỉ khoác lại theo giao diện mới. */
.detail-layout--audio { grid-template-columns: 380px minmax(0, 1fr); }
@media (max-width: 991px) { .detail-layout--audio { grid-template-columns: 1fr; } }
@media (min-width: 992px) {
  .detail-layout--audio .audio-player { position: sticky; top: calc(var(--header-h) + 20px); }
}

.audio-player__vol { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--c-ink-faint); }
.audio-player__vol input[type="range"] { flex: 1; accent-color: var(--c-primary); }

/* Phụ đề có thể rất dài; cho cuộn trong khung để thẻ phát bên trái luôn trong tầm mắt. */
.audio-transcript { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.audio-transcript::-webkit-scrollbar { width: 10px; }
.audio-transcript::-webkit-scrollbar-track { background: var(--c-line); border-radius: 999px; }
.audio-transcript::-webkit-scrollbar-thumb { background: var(--c-primary); border-radius: 999px; }

.playlist li a { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist li button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
  text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.playlist li button:hover { color: var(--c-primary-700); }
.playlist { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.playlist li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-14); }
.playlist li[aria-current="true"] { color: var(--c-primary-700); font-weight: 600; }
.playlist .dur { margin-left: auto; color: var(--c-ink-faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }

/* Sidebar */
.side-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 20px; }
.side-card + .side-card { margin-top: 20px; }
.side-card h2 { font-size: var(--fs-15); font-weight: 800; margin-bottom: 14px; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.side-list a { display: flex; gap: 12px; align-items: flex-start; color: var(--c-ink); font-size: var(--fs-14); }
.side-list a:hover { color: var(--c-primary-700); text-decoration: none; }
.side-list img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.side-list time { display: block; color: var(--c-ink-faint); font-size: var(--fs-12); margin-top: 2px; }

/* ---- Library tabs -------------------------------------------------------- */
.tabs, .tabs__list {
  display: flex; gap: 8px; border-bottom: 2px solid var(--c-line);
  margin-bottom: 28px; padding: 0; list-style: none;
  /* Màn hẹp: cho trượt ngang thay vì để các tab chồng lên nhau */
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar, .tabs__list::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .tabs, .tabs__list { flex-wrap: wrap; overflow-x: visible; } }
.tabs__tab {
  flex: none; white-space: nowrap;
  border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-14) var(--font-sans); color: var(--c-ink-soft);
  padding: 12px 18px; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs__tab:hover { color: var(--c-primary-700); }
.tabs__tab[aria-selected="true"] { color: var(--c-primary-700); border-bottom-color: var(--c-primary); }
[role="tabpanel"][hidden] { display: none; }
.media-count { color: var(--c-ink-faint); font-weight: 500; font-size: var(--fs-12); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---- Map section --------------------------------------------------------- */
/* Bản đồ + panel thông tin: click marker -> panel hiện card di tích */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 20px; align-items: stretch; }
@media (max-width: 991px) { .map-layout { grid-template-columns: 1fr; } }

.map-panel {
  display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.map-panel__media { position: relative; aspect-ratio: 16 / 9; background: var(--c-primary-050); flex: none; }
.map-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.map-panel__media .rank-badge { position: absolute; top: 12px; left: 12px; }
.map-panel__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.map-panel__title { font-size: var(--fs-17); font-weight: 700; margin: 0; }
.map-panel__place { color: var(--c-ink-soft); font-size: var(--fs-13); margin: 0; }
.map-panel__place i { color: var(--c-primary); margin-right: 5px; }
.map-panel__desc {
  color: var(--c-ink-soft); font-size: var(--fs-14); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Liên kết media: đưa thẳng tới tour / album / video của thư viện */
.map-panel__media-links {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.map-panel__media-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-13) var(--font-sans); color: var(--c-ink-soft);
  background: var(--c-bg); border: 1px solid var(--c-line);
  padding: 7px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.map-panel__media-links a:hover { border-color: var(--c-primary); color: var(--c-primary-700); text-decoration: none; }
.map-panel__media-links i { color: var(--c-primary); }
.map-panel__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.map-panel__actions .btn { padding: 11px 18px; }

.leaflet-tooltip.site-tip { font: 600 12px var(--font-sans); color: var(--c-ink); }

.map-embed {
  height: 480px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-line);
  /* stacking context riêng: pane/control của Leaflet (z-index tới ~1000)
     không được đè lên sticky header khi cuộn */
  position: relative; z-index: 0;
  background: var(--c-primary-050);
}
.map-popup { font-family: var(--font-sans); }
.map-popup__rank { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--rank, var(--c-primary)); padding: 2px 9px; border-radius: 999px; margin-bottom: 6px; }
.map-popup__name { font-weight: 700; font-size: 14px; margin: 0 0 2px; color: var(--c-ink); }
.map-popup__place { color: var(--c-ink-faint); font-size: 12px; margin: 0 0 8px; }
.map-popup a { font-weight: 600; font-size: 13px; }

.map-placeholder {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--c-navy-800); min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-on-navy); text-align: center; padding: 32px;
}
.map-placeholder p { max-width: 44ch; margin: 0; }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: var(--fs-13); color: var(--c-ink-soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend .rank-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rank); }

/* ---- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 44px; }
.contact-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; }
.contact-card i { font-size: 20px; color: var(--c-primary); margin-bottom: 12px; display: inline-block; }
.contact-card h2 { font-size: var(--fs-15); font-weight: 800; margin-bottom: 6px; }
.contact-card p, .contact-card address { font-style: normal; color: var(--c-ink-soft); font-size: var(--fs-14); margin: 0; }
.contact-card a { font-weight: 600; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: var(--fs-13); }
.form-field .req { color: var(--rank-special); }
.form-field input, .form-field textarea, .form-field select {
  font: 500 var(--fs-14) var(--font-sans); color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050);
}
.form-field .field-error { color: var(--rank-special); font-size: var(--fs-13); }
.form-field.is-invalid input, .form-field.is-invalid textarea { border-color: var(--rank-special); }
.form-note { color: var(--c-ink-faint); font-size: var(--fs-13); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Footer (phẳng, bỏ hộp-trong-hộp) ------------------------------------ */
.site-footer { background: var(--c-navy-900); color: var(--c-on-navy); margin-top: 72px; }
.site-footer__grid {
  display: grid; gap: 40px; padding-block: 56px 40px;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
}
@media (max-width: 991px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h2 { color: #fff; font-size: var(--fs-14); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer p { font-size: var(--fs-14); color: var(--c-on-navy); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a { color: var(--c-on-navy); font-size: var(--fs-14); }
.site-footer ul a:hover { color: #fff; }
.site-footer address { font-style: normal; font-size: var(--fs-14); display: flex; flex-direction: column; gap: 10px; }
.site-footer address a { color: #fff; font-weight: 600; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; }
.footer-brand strong { color: #fff; display: block; }
.footer-brand span { font-size: var(--fs-12); color: var(--c-ink-faint); letter-spacing: .06em; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: var(--c-on-navy);
}
.footer-social a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input {
  flex: 1; min-width: 0; font: 500 var(--fs-14) var(--font-sans);
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 11px 16px;
}
.newsletter input::placeholder { color: rgba(255,255,255,.5); }
.newsletter button {
  flex: none; border: 0; background: var(--c-primary); color: #fff;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
.newsletter button:hover { background: var(--c-primary-700); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; font-size: var(--fs-13); color: var(--c-ink-faint);
}
.site-footer__bottom nav { display: flex; gap: 20px; }
.site-footer__bottom a { color: var(--c-on-navy); }

/* ---- Back to top ---------------------------------------------------------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-primary); color: #fff; font-size: 16px;
  box-shadow: var(--shadow-card-hover);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .2s, visibility .2s, translate .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { background: var(--c-primary-700); }

/* ---- Search results -------------------------------------------------------- */
mark { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 2px; }
.search-hero { max-width: 720px; }
.search-hero .toolbar__search input { background: var(--c-surface); }
.result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.result-card {
  position: relative; display: flex; gap: 18px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 16px; align-items: flex-start;
  transition: box-shadow .2s;
}
.result-card:hover { box-shadow: var(--shadow-card-hover); }
.result-card__thumb { width: 168px; aspect-ratio: 16/10; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--c-primary-050); }
.result-card__body { min-width: 0; }
.result-card__kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink-faint); margin-bottom: 4px;
}
.result-card__title { font-size: var(--fs-17); font-weight: 700; margin: 0 0 6px; }
.result-card__title a { color: inherit; }
.result-card__title a::after { content: ""; position: absolute; inset: 0; }
.result-card__title a:hover { color: var(--c-primary-700); text-decoration: none; }
.result-card__excerpt { color: var(--c-ink-soft); font-size: var(--fs-14); margin: 0; }
.result-card__meta { color: var(--c-ink-faint); font-size: var(--fs-13); margin: 8px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .result-card { flex-direction: column; }
  .result-card__thumb { width: 100%; }
}

/* ---- Badge 360° trên item media ------------------------------------------ */
.badge-360 {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 var(--fs-12) var(--font-sans); letter-spacing: .04em;
  color: #fff; background: rgba(15, 30, 51, .72);
  border: 1px solid rgba(255,255,255,.35);
  padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(3px);
  pointer-events: none;
}

/* ---- Album view ----------------------------------------------------------- */
.album-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.album-head__meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  color: var(--c-on-navy); font-size: var(--fs-14); font-variant-numeric: tabular-nums;
}
.album-head__meta i { color: var(--c-primary); margin-right: 6px; }
.album-filter { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Tour 360° dialog ------------------------------------------------------ */
.tour-dialog {
  border: 0; padding: 0; border-radius: var(--radius);
  background: var(--c-navy-900); color: #fff;
  width: min(1100px, 96vw); max-height: 92vh;
}
.tour-dialog::backdrop { background: rgba(10, 18, 30, .88); }
.tour-dialog__frame { display: flex; flex-direction: column; height: min(720px, 92vh); }
.tour-dialog__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; flex: none;
}
.tour-dialog__title { font-weight: 700; font-size: var(--fs-15); margin: 0; min-width: 0; }
.tour-dialog__scene-name { color: var(--c-on-navy); font-size: var(--fs-13); font-weight: 500; }
.tour-dialog__actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
.tour-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  min-width: 38px; height: 38px; padding-inline: 10px;
  font: 600 var(--fs-13) var(--font-sans); cursor: pointer;
}
.tour-btn:hover { background: rgba(255,255,255,.22); }
.tour-btn[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); }

/* ---- Trình xem album ---------------------------------------------------
   Một khung lớn giống trang video: chuyển ảnh bằng nút hai bên hoặc phím mũi
   tên, xem toàn màn hình vẫn chuyển được ảnh. Album panorama mount PANOLENS
   vào .album-viewer__pano. */
.album-viewer {
  background: var(--c-navy-900); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.album-viewer__stage {
  position: relative; aspect-ratio: 16/9; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.album-viewer__stage > img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.album-viewer__pano { position: absolute; inset: 0; }
.album-viewer__stage .badge-360 { position: absolute; top: 14px; left: 14px; }

/* Album ảnh 360: khung xem chiếm gần trọn màn hình.
   Khung 16/9 nằm lọt giữa trang dài khiến người xem thấy như đang nhìn qua khe hẹp,
   trong khi tour 3DVista chiếm trọn cửa sổ nên cảm giác đứng giữa cảnh thật.
   Trừ đi chiều cao header và chừa chỗ cho thanh chú thích bên dưới. */
.album-viewer[data-panorama="1"] .album-viewer__stage {
  aspect-ratio: auto;
  height: min(78vh, 860px);
  min-height: 340px;
}
@media (max-width: 700px) {
  .album-viewer[data-panorama="1"] .album-viewer__stage { height: min(62vh, 520px); }
}
.album-viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,30,51,.55); color: #fff; border: 1px solid rgba(255,255,255,.3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; z-index: 2;
}
.album-viewer__nav:hover { background: rgba(15,30,51,.85); }
.album-viewer__nav--prev { left: 14px; }
.album-viewer__nav--next { right: 14px; }
.album-viewer__bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: #fff;
}
.album-viewer__caption { font-size: var(--fs-14); min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-viewer__counter { font-size: var(--fs-13); color: var(--c-on-navy);
  font-variant-numeric: tabular-nums; flex: none; }
.album-viewer.is-fake-fullscreen {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 2147483000; border-radius: 0;
}
.album-viewer:fullscreen, .album-viewer.is-fake-fullscreen { justify-content: center; }
.album-viewer:fullscreen .album-viewer__stage,
.album-viewer.is-fake-fullscreen .album-viewer__stage { aspect-ratio: auto; flex: 1; }

/* Dải ảnh nhỏ. Album có thể tới hàng trăm ảnh, nên dải này cần cuộn ngang thoải
   mái, luôn cho biết đang ở ảnh thứ mấy, và không bao giờ đi vào ngõ cụt — hết
   ảnh cuối thì quay lại ảnh đầu. */
.album-rail { margin-top: 16px; }
.album-rail__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.album-rail__count {
  font: 600 var(--fs-14) var(--font-sans); color: var(--c-ink);
  font-variant-numeric: tabular-nums; flex: none;
}
.album-rail__count b { color: var(--c-primary); }
.album-rail__label {
  font-size: var(--fs-13); color: var(--c-muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-rail__nav { display: flex; gap: 6px; flex: none; }
.album-rail__nav button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.album-rail__nav button:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.album-thumbs {
  list-style: none; margin: 0; padding: 0 0 10px;
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  /* Thanh cuộn mặc định mảnh như sợi chỉ khi album có hàng trăm ảnh — kéo không
     trúng. Đặt hẳn chiều cao và bo tròn cho dễ nắm. */
  scrollbar-width: auto; scrollbar-color: var(--c-primary) var(--c-line);
}
.album-thumbs::-webkit-scrollbar { height: 10px; }
.album-thumbs::-webkit-scrollbar-track { background: var(--c-line); border-radius: 999px; }
.album-thumbs::-webkit-scrollbar-thumb {
  background: var(--c-primary); border-radius: 999px; min-width: 40px;
}
.album-thumbs li { flex: none; scroll-snap-align: start; }
.album-thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
  background: none; cursor: pointer; display: block; overflow: hidden; line-height: 0;
  transition: border-color .15s, opacity .15s;
}
.album-thumbs button:hover { opacity: .85; }
.album-thumbs img { width: 128px; height: 84px; object-fit: cover; display: block; }
.album-thumbs [aria-current="true"] { border-color: var(--c-primary); }

@media (max-width: 700px) {
  .album-thumbs img { width: 100px; height: 66px; }
  .album-rail__label { display: none; }
}

/* Tour thật là một gói HTML tải lên, hiển thị bằng iframe chiếm hết khung. */
.tour-dialog__stage { position: relative; flex: 1; min-height: 320px; background: #000; }
.tour-dialog__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* iPhone không có Fullscreen API cho phần tử — phủ toàn màn hình bằng CSS. */
.tour-dialog__frame.is-fake-fullscreen {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  z-index: 2147483000; background: var(--c-navy-900);
}

/* Stage: mockup mô phỏng xoay 360° bằng pan background — khi tích hợp thật,
   mount PANOLENS/Photo Sphere Viewer vào đúng phần tử .pano-stage này. */
.pano-stage {
  position: relative; flex: 1; min-height: 300px; overflow: hidden;
  background-size: auto 130%; background-position: 0% 55%; background-repeat: repeat-x;
  cursor: grab; touch-action: pan-y; user-select: none;
}
.pano-stage.is-dragging { cursor: grabbing; }
.pano-stage__hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--fs-13) var(--font-sans); color: #fff;
  background: rgba(15,30,51,.6); border: 1px solid rgba(255,255,255,.25);
  padding: 7px 14px; border-radius: 999px; pointer-events: none;
  backdrop-filter: blur(3px);
}
.pano-stage:active .pano-stage__hint, .pano-stage.is-dragging .pano-stage__hint { opacity: 0; }

.tour-dialog__scenes {
  display: flex; gap: 10px; padding: 12px 16px; flex: none;
  overflow-x: auto; scrollbar-width: thin;
}
.tour-scene {
  flex: none; width: 132px; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; padding: 0; background: none; cursor: pointer;
  font: 600 var(--fs-12) var(--font-sans); color: var(--c-on-navy); text-align: left;
}
.tour-scene img { width: 100%; height: 68px; object-fit: cover; display: block; }
.tour-scene span { display: block; padding: 5px 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-scene:hover { color: #fff; }
.tour-scene[aria-current="true"] { border-color: var(--c-primary); color: #fff; }

@media (max-width: 640px) {
  .tour-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }
  .tour-dialog__frame { height: 100dvh; }
  .tour-dialog__scene-name { display: none; }
}

/* ---- Bài viết chi tiết ----------------------------------------------------- */
.article-head { max-width: 760px; }
.article-head .breadcrumb { margin-bottom: 16px; }
.article-kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary-700); margin-bottom: 10px;
}
.article-head h1 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; }
.article-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--c-ink-faint); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.article-cover { margin: 26px 0 0; }
.article-cover img { width: 100%; border-radius: var(--radius); aspect-ratio: 21 / 9; object-fit: cover; }
.article-cover figcaption { color: var(--c-ink-faint); font-size: var(--fs-13); margin-top: 8px; }
.prose .lede { font-size: var(--fs-17); color: var(--c-ink); font-weight: 500; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--c-primary); color: var(--c-ink);
  font-size: var(--fs-17); font-weight: 500; font-style: italic;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.tag-row a {
  font: 600 var(--fs-13) var(--font-sans); color: var(--c-ink-soft);
  background: var(--c-bg); border: 1px solid var(--c-line);
  padding: 6px 14px; border-radius: 999px;
}
.tag-row a:hover { color: var(--c-primary-700); border-color: var(--c-primary); text-decoration: none; }
.share-row { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.share-row span { font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-soft); }
.share-row a, .share-row button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink-soft); cursor: pointer; font-size: 14px;
}
.share-row a:hover, .share-row button:hover { color: var(--c-primary-700); border-color: var(--c-primary); }

/* ---- Trang video --------------------------------------------------------- */
.video-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--c-navy-900); aspect-ratio: 16 / 9;
}
.video-stage__poster { position: absolute; inset: 0; }
.video-stage__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-stage__play {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(52, 152, 219, .92); color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  transition: scale .15s, background .15s;
}
.video-stage__play:hover { scale: 1.08; background: var(--c-primary); }
.video-stage__badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 var(--fs-12) var(--font-sans); letter-spacing: .04em;
  color: #fff; background: rgba(15,30,51,.7); border: 1px solid rgba(255,255,255,.3);
  padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(3px);
}
.video-stage__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 26px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(15,30,51,.85));
  color: #fff; font-size: var(--fs-13); font-variant-numeric: tabular-nums;
}
.video-stage__bar input[type="range"] { flex: 1; accent-color: var(--c-primary); }
.video-stage__bar button {
  background: none; border: 0; color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; font-size: 14px;
}
.video-stage__bar button:hover { background: rgba(255,255,255,.18); }

/* ---- Trang lỗi ------------------------------------------------------------ */
.error-hero {
  min-height: calc(100vh - var(--header-h) - 320px);
  display: flex; align-items: center; text-align: center; padding-block: 72px;
}
.error-hero__inner { max-width: 560px; margin-inline: auto; }
.error-code {
  font-size: clamp(84px, 16vw, 140px); font-weight: 800; line-height: 1;
  color: var(--c-primary); letter-spacing: .02em; margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.error-hero h1 { font-size: var(--fs-24); margin-bottom: 10px; }
.error-hero p { color: var(--c-ink-soft); margin-bottom: 24px; }
.error-hero .toolbar__search { max-width: 420px; margin: 0 auto 22px; }
.error-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Trang nội dung tĩnh (chính sách / điều khoản) ------------------------ */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 991px) { .legal-layout { grid-template-columns: 1fr; } }
.toc { position: sticky; top: calc(var(--header-h) + 24px); }
.toc h2 { font-size: var(--fs-13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.toc a {
  display: block; padding: 7px 12px; border-left: 3px solid var(--c-line);
  color: var(--c-ink-soft); font-size: var(--fs-14);
}
.toc a:hover { color: var(--c-primary-700); border-left-color: var(--c-primary); text-decoration: none; }
.legal-prose h2 { font-size: var(--fs-20); font-weight: 800; margin-top: 2em; scroll-margin-top: calc(var(--header-h) + 20px); }
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose p, .legal-prose li { color: var(--c-ink-soft); }
.legal-prose ul { padding-left: 22px; }
.legal-updated { color: var(--c-ink-faint); font-size: var(--fs-13); margin-bottom: 28px; }

/* ---- Misc ---------------------------------------------------------------- */
/* padding-block only: shorthand `padding` sẽ ghi đè padding-inline của .container */
.stat-strip { display: flex; gap: 24px 40px; flex-wrap: wrap; padding-block: 26px; }
.stat-strip div { font-size: var(--fs-13); color: var(--c-ink-soft); }
.stat-strip strong { display: block; font-size: var(--fs-24); font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}