/*
 * Theme xuandinh-v3 — phong cách bảng gỗ sơn son thếp vàng.
 * Chuyển thể từ mockups/xuandinh_v3_mockup.html (giữ nguyên bảng màu & class gốc).
 */

:root {
    --deep-green: #163f2c;
    --mid-green: #1f5a3f;
    --panel-brown: #57402a;
    --panel-brown-dark: #3d2c1c;
    --gold: #d4af5c;
    --gold-light: #f2d998;
    --gold-dark: #8a6a26;
    --cream: #f3ead4;
    --cream-dim: #cdbb96;
    --red-badge: #a83a2c;
    --logo-blue: #1f4fa0;
    --logo-blue-light: #4a7fc9;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--deep-green);
    color: var(--cream);
}

h1, h2, h3, h4, .heading-font { font-family: 'Roboto', sans-serif; }
.script-font { font-family: 'Great Vibes', cursive; }
.sans-font { font-family: 'Be Vietnam Pro', sans-serif; }

/* Nền hoa văn lặp lại của toàn trang */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--deep-green);
    background-image: url('../images/bg-seamless.jpg');
    background-repeat: repeat;
    background-size: 460px 460px;
}

/* Khối nội dung giới hạn max-width, nổi trên nền hoa văn */
.content-root {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    background: var(--deep-green);
    border-left: 3px solid var(--gold-dark);
    border-right: 3px solid var(--gold-dark);
    box-shadow: 0 0 90px rgba(0,0,0,0.65);
}

/* Dải logo + hoa văn (fade từ xanh đặc sang hoa văn vàng) */
.header-top-band {
    /* background-image:
        linear-gradient(to right, var(--deep-green) 0%, var(--deep-green) 22%, rgba(12,35,24,0.55) 55%, transparent 85%),
        url('../images/bg-seamless.jpg'); */
    background-image: url('../images/headerdai2.jpg');
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    background-color: var(--deep-green);
}
@media (max-width: 767px) {
    .header-top-band {
        height: 80px;
        /* Mobile chỉ dùng màu, không ảnh nền (!important để đè cả inline style header_banner_url từ
           Settings). Nền vàng nhạt (gold-light), gần tông bầu trời của ảnh header desktop — logo xanh dương bị chìm
           trên nền xanh lá đậm. */
        background-image: none !important;
        background-color: var(--gold-light);
    }
    /* Nút menu vàng không đủ tương phản trên nền vàng nhạt — ID thắng class Tailwind text-[var(--gold)] */
    #menu-btn { color: var(--panel-brown); }
}

/* Thanh menu dạng bảng gỗ với viền chỉ vàng trên dưới */
.nav-plaque {
    background: linear-gradient(180deg, #65492d, #432f1d);
    border-top: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.45);
}
.nav-pill {
    background: var(--cream);
    color: #2a1d12;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6);
}
.nav-pill:hover, .nav-pill.active { background: var(--gold); color: #201709; }

/* Dropdown "Thêm" - gom mục menu cuối không đủ chỗ ở màn hình trung bình (~1280px),
   tránh nav-pill xuống dòng vỡ layout. Đo & gán bởi theme.js#initPriorityNav. */
#nav-more { position: relative; }
#nav-more-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--cream);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    padding: 6px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
#nav-more-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: #2a1d12;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
.nav-dropdown-link:hover { background: var(--gold); color: #201709; }

/* Khung viền vàng cho panel gỗ — luôn dùng kèm .ornate-box (xem grep usages), nên border/border-radius
   đã chuyển hẳn sang .ornate-box, ở đây chỉ còn nền + đổ bóng. */
.gold-panel {
    background: linear-gradient(160deg, rgba(87,64,42,0.96), rgba(61,44,28,0.98));
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.gold-panel-header {
    text-align: center;
    color: var(--gold-light);
    letter-spacing: 0.04em;
}

/* Khung ảnh cổ: viền đôi + họa tiết "nút thắt 5 ô vuông" ở 4 góc, vẽ LIỀN MẠCH trong 1 file SVG
   duy nhất (assets/images/ornate-frame.svg) và ghép bằng CSS border-image — KHÔNG còn ghép native
   border CSS (vẽ 4 cạnh) với SVG icon dán rời ở 4 góc (.orn) như cách cũ.

   Cách cũ luôn có 2 hệ toạ độ độc lập (border+inset của .ornate-box, và viewBox riêng của SVG góc)
   phải tự tính tay cho khớp nhau, và chỉ khớp đúng ở 1 kích thước .orn cụ thể — đổi breakpoint/DPI là
   lệch (xem lịch sử sửa ở các bản trước). border-image xoá bỏ hẳn vấn đề này: góc + cạnh nằm chung 1
   ảnh, browser tự cắt lát (border-image-slice) và co giãn phần cạnh (chỉ là 2 nét thẳng nên kéo giãn
   không méo), luôn tự khớp ở mọi kích thước box/độ phân giải vì chỉ có 1 hệ toạ độ duy nhất.

   border-image-slice 42.5% = 85/200 (kích thước ô góc trong ảnh nguồn, xem ornate-frame.svg).
   border-image-width khớp visually với kích thước góc cũ (~28px). border-color là màu dự phòng nếu
   ảnh lỗi tải. KHÔNG bo góc (border-radius) — họa tiết góc vuông theo đúng phong cách khung cổ, và
   border-image không cắt theo border-radius nhất quán giữa các trình duyệt.

   Đặt border-image lên ::before (position:absolute; inset:0), KHÔNG đặt trực tiếp lên .ornate-box:
   border-width chiếm không gian layout thật (như padding) — nếu đặt thẳng lên .ornate-box, 28px này
   cộng dồn với p-4/p-6/p-10 của class đi kèm khiến nội dung bị đẩy vào quá sâu, cách xa 2 đường kẻ
   (không như cách cũ, .orn chỉ là icon phủ đè, không chiếm layout). Dùng ::before làm lớp phủ riêng,
   tách hẳn khỏi box model của nội dung thật — border-width ở đây muốn dày bao nhiêu cũng không đẩy
   nội dung bên trong. z-index cao hơn nội dung để họa tiết góc phủ nhẹ lên mép ảnh/text bên dưới,
   giống hệt cách .orn cũ đã làm; pointer-events:none để không chặn click/hover nội dung thật. */
.ornate-box { position: relative; }
.ornate-box::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-style: solid;
    border-width: 28px;
    border-color: var(--gold-dark);
    border-image-source: url('../images/ornate-frame.svg');
    border-image-slice: 42.5%;
    border-image-width: 28px;
    border-image-outset: 0;
    border-image-repeat: stretch;
}

.heritage-card {
    background: linear-gradient(160deg, rgba(87,64,42,0.97), rgba(58,42,27,0.98));
    transition: transform .35s ease, box-shadow .35s ease;
}
/* Bản đồ Leaflet nằm trong .ornate-box: thụt 12px để vượt hẳn qua viền kép ở cạnh — đường viền trong
   kết thúc ở ~8.7px (x=25 + nửa stroke 1.5 = 26.5/85 trong ornate-frame.svg × border-image-width 28px);
   9px như .card-img bên dưới quá sát nên sau khi làm tròn pixel bản đồ vẫn đè lên nét. Họa tiết góc
   ăn sâu hơn (~22px) được phép nằm đè lên bản đồ.
   z-index:0 tạo stacking context riêng — nếu không, các pane của Leaflet (z-index 400+) sẽ đè lên khung
   ::before (z-index 3) và che mất viền. */
.ornate-box > .ornate-map { position: absolute; inset: 12px; z-index: 0; }
/* .card-img là nội dung DUY NHẤT nằm sát mép .ornate-box (ảnh bìa, không có padding bao quanh như
   text/panel khác) — margin 9px ~ đúng độ sâu của lằn viền trong (xem tính toán trong comment của
   .ornate-box::before: 25 đơn vị / 85 * 28px border-image-width ≈ 8.7px, làm tròn 9px) để ảnh "lùi
   vào chạm" lằn viền trong thay vì nằm sát mép ngoài, bị khung phủ đè trực tiếp lên ảnh. Không đặt
   margin-bottom vì .card-img luôn là phần tử đầu, nội dung tiếp theo (tiêu đề, mô tả) đã tự có
   padding riêng (p-4/p-5...) không cần thêm. */
.heritage-card > .card-img {
    overflow: hidden;
    margin: 9px 9px 0;
}
.heritage-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.5);
}
.badge-tag {
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.card-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(212,175,92,0.3);
}

.ornate-divider { display:flex; align-items:center; justify-content:center; gap:14px; margin: 10px 0 28px; }
.ornate-divider .line { height:1px; width:64px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* Menu mobile - drawer trượt từ phải */
#mobile-drawer {
    transform: translateX(100%);
    transition: transform .35s ease;
}
#mobile-drawer.open { transform: translateX(0); }
#drawer-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
#drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* Hero slider trang chủ - chuyển ảnh nền giữa các di tích (theme.js#initHeroSlider) */
.hero-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease;
    z-index: 0;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }

.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 40px; height: 40px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(22,63,44,0.45);
    border: 1px solid var(--gold);
    color: var(--gold-light);
    transition: background .2s ease;
}
.hero-nav-btn:hover { background: rgba(22,63,44,0.7); }

.hero-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
}
.hero-dot {
    width: 9px; height: 9px;
    border-radius: 999px;
    background: rgba(243,234,212,0.4);
    border: 1px solid rgba(212,175,92,0.6);
}
.hero-dot.active { background: var(--gold); }

.contact-fab {
    width: 44px; height: 44px; border-radius: 999px;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--gold); color: var(--gold);
    background: rgba(212,175,92,0.08);
}

.map-pin-item {
    display:flex; align-items:center; gap:12px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(212,175,92,0.2);
    transition: background .25s ease, border-color .25s ease;
    cursor: pointer;
}
.map-pin-item:hover, .map-pin-item.active { background: rgba(212,175,92,0.1); border-color: rgba(212,175,92,0.5); }

.hero-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    /* Line-height rộng hơn mặc định của text-6xl (đi qua Tailwind CDN, không phải build Vite,
       nên class leading-* không được ưu tiên đè lên) để dấu thanh tiếng Việt (Ề, Ộ, Ố...) không
       bị cắt phần trên bởi overflow-hidden của khung ảnh cha. */
    line-height: 1.35 !important;
    letter-spacing: 0.01em;
}

/* Hiệu ứng chữ trên hero banner — chọn theo title_effect/subtitle_effect của từng HeroBanner
   (HeroBanner::TEXT_EFFECTS). Màu tuỳ chỉnh (title_color/subtitle_color) truyền vào qua biến
   --hero-text-color inline trên thẻ, không có thì về màu mặc định của theme. */
.hero-text-gradient {
    background: linear-gradient(180deg, #fff8e6 15%, var(--gold-light) 55%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Không dùng text-shadow: với background-clip:text + color:transparent, bóng bị vẽ đè lên phần
       chữ gradient (chữ trong suốt) làm chữ đục, nhoè. drop-shadow áp lên kết quả đã render nên bóng
       chỉ nằm phía sau/viền chữ — 1 lớp nét đậm sát chữ để tách khỏi ảnh nền sáng, 1 lớp toả nhẹ. */
    filter: drop-shadow(0 2px 0 rgba(40,22,5,0.85)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.hero-text-shadow {
    color: var(--hero-text-color, var(--gold-light));
    text-shadow: 0 2px 6px rgba(0,0,0,0.75);
}
/* paint-order: stroke vẽ trước fill nên chỉ nửa ngoài của nét viền lộ ra, không ăn vào ruột chữ. */
.hero-text-outline {
    color: var(--hero-text-color, var(--gold-light));
    -webkit-text-stroke: 3px rgba(40,22,5,0.9);
    paint-order: stroke fill;
}
.hero-text-none {
    color: var(--hero-text-color, var(--gold-light));
}

/* Khung nội dung trang chi tiết (layouts/detail) */
.detail-panel {
    background: linear-gradient(160deg, rgba(87,64,42,0.97), rgba(58,42,27,0.98));
}

/* Nội dung bài viết render từ RichEditor (article-detail) */
.prose-article :where(h1, h2, h3, h4) {
    color: var(--gold-light);
    font-weight: 700;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}
.prose-article p { margin-bottom: 1em; }
.prose-article :where(ul, ol) { margin: 1em 0; padding-left: 1.5em; }
.prose-article ul { list-style-type: disc; }
.prose-article ol { list-style-type: decimal; }
.prose-article a { color: var(--gold); text-decoration: underline; }
.prose-article img { border-radius: 8px; margin: 1em 0; }
.prose-article strong { color: var(--cream); }
.prose-article blockquote {
    border-left: 2px solid var(--gold);
    padding-left: 1em;
    color: var(--cream-dim);
    font-style: italic;
}

/* Bản đồ Leaflet - style lại marker/popup theo tông gỗ vàng */
.heritage-leaflet-pin {
    background-color: var(--red-badge);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    font-size: 16px;
}
/* Bản đồ trực quan trạng thái bảo tồn (6.4): tô màu marker/chấm chú giải theo mức xuống cấp. */
.heritage-leaflet-pin.conservation-pin-good, .conservation-dot-good { background-color: #2e7d32; }
.heritage-leaflet-pin.conservation-pin-fair, .conservation-dot-fair { background-color: #1976d2; }
.heritage-leaflet-pin.conservation-pin-degraded, .conservation-dot-degraded { background-color: #f57c00; }
.heritage-leaflet-pin.conservation-pin-critical, .conservation-dot-critical { background-color: #c62828; }
.heritage-leaflet-pin.conservation-pin-restoring, .conservation-dot-restoring { background-color: #6a1b9a; }
.leaflet-popup-content-wrapper {
    background: var(--panel-brown);
    color: var(--cream);
    border: 1px solid var(--gold-dark);
}
.leaflet-popup-tip { background: var(--panel-brown); }
.map-popup-label { font-weight: 600; }
.map-popup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.map-popup-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--gold-dark); color: var(--gold-light);
    text-decoration: none; white-space: nowrap;
}
.map-popup-btn:hover { background: rgba(212,175,92,0.15); color: var(--gold-light); }
.map-popup-btn-primary { background: var(--gold); color: #201709; border-color: var(--gold); }
.map-popup-btn-primary:hover { background: var(--gold-light); color: #201709; }