.hidden {
    display: none;
}

#blazor-error-ui.show {
    display: block;
}

/* FontAwesome tự tắt fa-spin khi máy bật "giảm hiệu ứng chuyển động" (prefers-reduced-motion) —
   spinner ở đây báo trạng thái đang xử lý (không phải trang trí) nên luôn cho xoay */
.fa-spin {
    animation: fa-spin 1s linear infinite;
}

/* Nền html/body = cùng màu nền màn boot + trang đăng nhập (bg-lacquer) để lúc chuyển boot → đăng nhập
   (Blazor chưa vẽ xong / Tailwind CDN chưa sinh class) không lộ nền sáng. Các trang trong MainLayout
   tự phủ nền trắng toàn màn hình nên không bị ảnh hưởng. */
html {
    background-color: #1c0508;
}

body {
    font-family: "Be Vietnam Pro", "Noto Sans", sans-serif;
    background-color: #1c0508;
    color: #1c1006;
}

.font-serif, h1, h2, h3 {
    font-family: "Noto Serif", serif;
}

/* Bỏ viền focus mặc định của trình duyệt trên mọi phần tử —
   nơi nào cần chỉ báo focus thì đã tự khai focus-visible:ring riêng bằng Tailwind. */
*:focus,
*:focus-visible {
    outline: none;
}

/* Khung viền ba lớp kiểu "sắc phong" — dùng cho form/card nổi bật trên nền tối */
.frame-triple {
    position: relative;
    border: 2px solid #b8912f;
    box-shadow:
        inset 0 0 0 4px #fdfbf3,
        inset 0 0 0 6px #977224,
        inset 0 0 0 10px #fdfbf3,
        inset 0 0 0 12px #5c341a,
        0 25px 55px rgba(0, 0, 0, 0.35);
}

/* Biến thể tone gỗ (không dùng viền vàng dày) — dùng cho form đăng nhập trên nền tối */
.frame-triple.on-dark {
    border-color: #7a4726;
    box-shadow:
        inset 0 0 0 4px #2b1608,
        inset 0 0 0 5px #96633a,
        inset 0 0 0 9px #2b1608,
        inset 0 0 0 11px #5c341a,
        0 25px 55px rgba(0, 0, 0, 0.45);
}

/* Kết cấu gỗ nâu thật — dùng cho menu/sidebar (tương phản với nội dung xanh) */
.bg-wood {
    background-color: #3a2415;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 2px,
            rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px,
            transparent 4px, transparent 9px),
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 38px,
            rgba(0,0,0,0.18) 38px, rgba(0,0,0,0.18) 40px,
            transparent 40px, transparent 78px,
            rgba(0,0,0,0.1) 78px, rgba(0,0,0,0.1) 80px),
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%),
        radial-gradient(ellipse at top, rgba(205,166,63,0.12), transparent 60%);
}

/* Nền sơn mài nâu/mận đậm kiểu template3 — dùng riêng cho hero trang đăng nhập */
.bg-lacquer {
    background-color: #1c0508;
    background-image:
        radial-gradient(ellipse at top, rgba(138,30,41,0.5), transparent 60%),
        repeating-linear-gradient(115deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 2px, transparent 2px, transparent 6px);
}

/* Đường kẻ ngang phân cách đơn giản (dùng trong sidebar/dashboard) */
.meander-strip {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,145,47,0.4) 20%, rgba(184,145,47,0.4) 80%, transparent);
}

.meander-strip.on-dark {
    background: linear-gradient(90deg, transparent, rgba(236,220,160,0.25) 20%, rgba(236,220,160,0.25) 80%, transparent);
}

/* Dải hồi văn góc vuông trang trí (đúng hoạ tiết template3) — dùng cho hero/trang đăng nhập */
.ornamental-border {
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 13 H9 V3 H18 V13 H27 V3 H36 V13 H40' fill='none' stroke='%23ecdca0' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 14px;
    background-position: center;
    opacity: 0.55;
}

/* Cột gỗ hai bên kiểu cổng tam quan — dùng cho trang đăng nhập */
.gate-pillar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    background: linear-gradient(90deg, #2b1608, #5c341a 45%, #2b1608);
    box-shadow: inset 0 0 0 2px rgba(205, 166, 63, 0.35);
}

.gate-pillar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -27px;
    width: 54px;
    height: 54px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, #b8912f, #7a5c1e);
    border: 2px solid #ecdca0;
}

.gate-pillar.left { left: 0; }
.gate-pillar.right { right: 0; }

/* Biến thể nhỏ gọn — dùng cho sidebar menu (không có thoi vàng đầu cột, đã có hoành phi che ngang trên đỉnh) */
.gate-pillar-sm {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    background: linear-gradient(90deg, #2b1608, #5c341a 45%, #2b1608);
    box-shadow: inset 0 0 0 1px rgba(205, 166, 63, 0.3);
}

.gate-pillar-sm.left { left: 0; }
.gate-pillar-sm.right { right: 0; }

/* Ánh sáng ấm phía sau tiêu đề hero, kiểu ánh nến */
.candle-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,196,107,0.18), transparent 65%);
    pointer-events: none;
}

/* Gạch chân tiêu đề: vạch — thoi gỗ — vạch (mặc định tone gỗ của hệ thống trên nền sáng) */
.title-ornament {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.title-ornament::before,
.title-ornament::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #7a4726);
}

.title-ornament::after {
    background: linear-gradient(90deg, #7a4726, transparent);
}

.title-ornament .diamond {
    width: 7px;
    height: 7px;
    background: #7a4726;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Biến thể vàng — chỉ dùng trên nền tối (hero trang đăng nhập) */
.title-ornament.on-dark::before,
.title-ornament.on-dark::after {
    background: linear-gradient(90deg, transparent, #cda63f);
}

.title-ornament.on-dark::after {
    background: linear-gradient(90deg, #cda63f, transparent);
}

.title-ornament.on-dark .diamond {
    background: #cda63f;
}

/* Khung viền đôi vàng-nâu, dùng cho card nổi bật */
.frame-double {
    border: 1px solid #cda63f;
    outline: 1px solid #1d4265;
    outline-offset: 3px;
}

.rise-on-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rise-on-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(10, 31, 48, 0.18);
}

.btn-gold-outline {
    border: 1px solid #b8912f;
    color: #7a5c1e;
    transition: all 0.2s ease;
}

.btn-gold-outline:hover {
    background: #b8912f;
    color: #fff;
}

/* Nút chính trang đăng nhập — cùng tông sơn mài/hoành phi với phần còn lại của trang (mận đậm + viền vàng), không còn tách biệt kiểu gradient vàng rực riêng lẻ */
.btn-gold-loading {
    background: linear-gradient(180deg, #8a2510, #5c1408 65%, #3a0d05);
    border: 1px solid #f0c060;
    color: #f5e6c0;
    box-shadow: 0 0 16px rgba(120, 24, 0, 0.5), inset 0 0 0 1px rgba(240, 192, 96, 0.25);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-gold-loading:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 22px rgba(120, 24, 0, 0.7), inset 0 0 0 1px rgba(240, 192, 96, 0.4);
}

/* Tấm màn/hoành phi che ngang giữa 2 cột gỗ — kiểu cổng đình/nhà thờ họ */
.temple-banner {
    position: relative;
    background: linear-gradient(180deg, #781800, #480000 70%, #300000);
    border-top: 2px solid #f0c060;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(240, 192, 96, 0.2);
    padding-bottom: 14px;
}

/* Hoa văn tối giản khắc giữa hoành phi — vạch mảnh mờ dần ở 2 đầu, giữa 1 thoi nhỏ */
.hoanhphi-motif {
    display: flex;
    align-items: center;
    width: 260px;
    max-width: 70%;
}

.hoanhphi-motif::before,
.hoanhphi-motif::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f0c060);
}

.hoanhphi-motif::after {
    background: linear-gradient(90deg, #f0c060, transparent);
}

.hoanhphi-motif .diamond {
    width: 7px;
    height: 7px;
    background: #f0c060;
    transform: rotate(45deg);
    margin: 0 12px;
    flex-shrink: 0;
}

/* Dải tua-rua lượn sóng ở mép dưới màn — đặt làm phần tử con cuối trong .temple-banner */
.temple-banner-fringe {
    height: 16px;
    margin: 0 -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cpath d='M0 0 H28 V6 A8 8 0 0 1 14 6 A8 8 0 0 1 0 6 Z' fill='%23f0a848'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 28px 16px;
    opacity: 0.9;
}

/* Nút vàng bo tròn kiểu CTA hero */
.btn-gold-pill {
    background: linear-gradient(180deg, #ddc06a, #b8912f);
    color: #0a1f30;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px -4px rgba(184,145,47,0.5);
}

.btn-gold-pill:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px -4px rgba(184,145,47,0.7);
}

/* Nút gỗ bo tròn — nút primary chính của toàn hệ thống */
.btn-wood-pill {
    background: linear-gradient(180deg, #7a4726, #4a2914);
    color: #f5e6c0;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px -4px rgba(43,22,8,0.5);
}

.btn-wood-pill:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px -4px rgba(43,22,8,0.7);
}

/* Thanh cuộn vàng trên nền ngà */
/* Thanh cuộn nhạt: rãnh trùng nền, tay kéo vàng nhạt trong suốt */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 134, 11, 0.35) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(184, 134, 11, 0.3);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 134, 11, 0.5);
}

/* Ô chọn (select): mũi tên tự vẽ, cách mép phải một khoảng thay vì dính sát như mũi tên mặc định của trình duyệt */
.select-soft {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%234a2f1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.75rem 0.5rem;
}