/*
 * layout-client.css
 * CSS dành riêng cho layout chrome (header, ribbon, footer, offcanvas).
 * KHÔNG đụng vào style.min.css hay nội dung trang thi.
 * Màu chủ đạo: #c8102e | Font: Be Vietnam Pro
 * Sở Nội vụ tỉnh Lâm Đồng – Cuộc thi CCHC 2026
 */

/* ══════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════ */
:root {
    --lc-red: #c8102e;
    --lc-red-dark: #8f0b1f;
    --lc-red-deep: #5c0613;
    --lc-red-light: rgba(200, 16, 46, 0.08);
    --lc-gold: #e8a800;
    --lc-gold-lt: #ffd54f;
    --lc-ink: #0e0509;
    --lc-ink-mid: #1c0a10;
    --lc-white: #ffffff;
    --lc-text: #1a1a2e;
    --lc-muted: rgba(255,255,255,0.55);
    --lc-border: rgba(255,255,255,0.10);
    --lc-header-h: 72px;
    --lc-ribbon-h: 54px;
    --lc-announce-h: 36px;
    --lc-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lc-ease: cubic-bezier(.4,0,.2,1);
    --lc-trans: 0.22s var(--lc-ease);
    --red: #c8102e;
    --red-dark: #8f0b1f;
    --red-deep: #5c0613;
    --gold: #ffd54f;
    --font: 'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --red: #c8102e;
    --red-dark: #8f0b1f;
    --red-deep: #5c0613;
    --red-lt: rgba(200,16,46,.08);
    --red-dk: #8f0b1f;
    --gold: #ffd54f;
    --ink: #0e0509;
    /* Answer colours */
    --a-bg: #eff6ff;
    --a-border: #93c5fd;
    --a-sel: #1d4ed8;
    --a-badge: #2563eb;
    --b-bg: #f5f3ff;
    --b-border: #c4b5fd;
    --b-sel: #7c3aed;
    --b-badge: #7c3aed;
    --c-bg: #f0fdf4;
    --c-border: #86efac;
    --c-sel: #16a34a;
    --c-badge: #16a34a;
    --d-bg: #fffbeb;
    --d-border: #fcd34d;
    --d-sel: #d97706;
    --d-badge: #d97706;
    --check-bg: #fff1f2; /* nền rất nhẹ */
    --check-border: #fda4af; /* viền đỏ hồng nhẹ */
    --check-sel: #c8102e; /* màu chính (đỏ trung tâm) */
    --check-badge: #8f0b1f; /* badge đậm */
    --check-hover: #e8283f; /* hover nổi bật */
    --wrong: #dc2626;
    --wrong-lt: #fff1f2;
}

/* ══════════════════════════════════════════════════
   BODY
══════════════════════════════════════════════════ */
.lc-body {
    font-family: var(--lc-font);
    background: #f6f2f3;
    color: var(--lc-text);
    padding-top: calc(var(--lc-announce-h) + var(--lc-header-h));
}

/* Mobile: no ribbon */
@media (max-width: 767.98px) {
    .lc-body {
        padding-top: calc(var(--lc-announce-h) + var(--lc-header-h));
    }
}

/* ══════════════════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════════════════ */
.lc-announce {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    height: var(--lc-announce-h);
    background: var(--lc-red-dark);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.lc-announce--hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.lc-announce__inner {
    display: flex;
    align-items: center;
    height: var(--lc-announce-h);
    gap: 12px;
    overflow: hidden;
}

/* Badge "ĐANG MỞ" */
.lc-announce__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--lc-gold-lt);
    text-transform: uppercase;
    white-space: nowrap;
}

.lc-announce__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4cdf7a;
    animation: lcPulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes lcPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

@keyframes blobFloat {
    from {
        transform: scale(1) translate(0,0)
    }

    to {
        transform: scale(1.12) translate(20px,20px)
    }
}
/* Scrolling ticker */
.lc-announce__ticker-wrap {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}

.lc-announce__ticker {
    display: inline-block;
    animation: lcTicker 28s linear infinite;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.2px;
}

    .lc-announce__ticker:hover {
        animation-play-state: paused;
    }

@keyframes lcTicker {
    0% {
        transform: translateX(60px);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Right links */
.lc-announce__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-announce__link {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color var(--lc-trans), background var(--lc-trans);
    white-space: nowrap;
}

    .lc-announce__link:hover {
        color: var(--lc-white);
        background: rgba(255,255,255,0.10);
    }

.lc-announce__sep {
    color: var(--lc-muted);
    font-size: 0.72rem;
}

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
.lc-header {
    position: fixed;
    top: var(--lc-announce-h);
    left: 0;
    right: 0;
    z-index: 1050;
    height: var(--lc-header-h);
    background: var(--lc-white);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    transition: box-shadow var(--lc-trans), background var(--lc-trans);
}

.lc-header--scrolled {
    background: rgba(255,255,255,0.97);
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Animated shimmer line at top of header */
.lc-header__shimmer-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lc-red-dark) 0%, var(--lc-red) 30%, var(--lc-gold) 60%, var(--lc-red) 80%, var(--lc-red-dark) 100%);
    background-size: 200% 100%;
    animation: lcShimmer 4s linear infinite;
}

@keyframes lcShimmer {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

.lc-header__inner {
    display: flex;
    align-items: center;
    height: var(--lc-header-h);
    gap: 24px;
    justify-content: space-between;
}

/* ── Brand ── */
.lc-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.lc-brand__logo-ring {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lc-red-light);
    border: 2px solid rgba(200,16,46,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color var(--lc-trans);
}

.lc-brand:hover .lc-brand__logo-ring {
    border-color: var(--lc-red);
}

.lc-brand__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.lc-brand__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px
}

.lc-brand__org {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    color: var(--lc-red);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
}

.lc-brand__contest {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.5;
    white-space: nowrap;
}

    .lc-brand__contest em {
        font-style: normal;
        font-weight: 900;
        font-size: 1.2rem;
        color: var(--lc-red);
    }

/* ── Header Nav ── */
.lc-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.lc-hnav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #3a3a4a;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: background var(--lc-trans), color var(--lc-trans);
    position: relative;
}

    .lc-hnav__item::after {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 20px;
        height: 2px;
        background: var(--lc-red);
        border-radius: 2px;
        transition: transform var(--lc-trans);
    }

    .lc-hnav__item:hover {
        background: var(--lc-red-light);
        color: var(--lc-red);
    }

        .lc-hnav__item:hover::after {
            transform: translateX(-50%) scaleX(1);
        }

    .lc-hnav__item i {
        font-size: 0.88rem;
    }

/* ── Support chip ── */
.lc-header__support {
    flex-shrink: 0;
}

.lc-support-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lc-red-light);
    border: 1px solid rgba(200,16,46,0.20);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: default;
}

.lc-support-chip__ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--lc-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    flex-shrink: 0;
}

.lc-support-chip__lbl {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #888;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.lc-support-chip__num {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--lc-red);
    text-decoration: none;
    display: block;
    line-height: 1;
}

    .lc-support-chip__num:hover {
        text-decoration: underline;
    }

/* ── Hamburger ── */
.lc-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1.5px solid rgba(200,16,46,0.30);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color var(--lc-trans), background var(--lc-trans);
}

    .lc-hamburger:hover {
        background: var(--lc-red-light);
        border-color: var(--lc-red);
    }

    .lc-hamburger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--lc-red);
        transition: width var(--lc-trans);
    }

        .lc-hamburger span:nth-child(2) {
            width: 70%;
        }

/* ══════════════════════════════════════════════════
   RIBBON (Quick-access)
══════════════════════════════════════════════════ */
.lc-ribbon {
    position: fixed;
    top: calc(var(--lc-announce-h) + var(--lc-header-h));
    left: 0;
    right: 0;
    z-index: 1040;
    height: var(--lc-ribbon-h);
    background: #fff;
    border-bottom: 2px solid var(--lc-red);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.lc-ribbon__inner {
    display: flex;
    align-items: stretch;
    height: var(--lc-ribbon-h);
    justify-content: space-between;
}

/* Nav items */
.lc-ribbon__nav {
    display: flex;
    align-items: stretch;
}

.lc-ribbon__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 22px;
    text-decoration: none;
    border-right: 1px solid #f0eded;
    position: relative;
    transition: background var(--lc-trans);
}

    .lc-ribbon__item::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--lc-red);
        transform: scaleX(0);
        transition: transform var(--lc-trans);
    }

    .lc-ribbon__item:hover {
        background: var(--lc-red-light);
    }

        .lc-ribbon__item:hover::before {
            transform: scaleX(1);
        }

        .lc-ribbon__item:hover .lc-ribbon__ico {
            color: var(--lc-red);
        }

        .lc-ribbon__item:hover .lc-ribbon__lbl {
            color: var(--lc-red);
        }

.lc-ribbon__ico {
    font-size: 1rem;
    color: #999;
    transition: color var(--lc-trans);
}

.lc-ribbon__lbl {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #555;
    text-transform: uppercase;
    transition: color var(--lc-trans);
    white-space: nowrap;
}

/* Support info */
.lc-ribbon__support {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #666;
    font-weight: 500;
    padding: 0 16px;
    border-left: 1px solid #f0eded;
    white-space: nowrap;
}

    .lc-ribbon__support i {
        color: var(--lc-red);
        font-size: 1rem;
    }

    .lc-ribbon__support strong {
        color: var(--lc-red);
    }

    .lc-ribbon__support a {
        color: var(--lc-red-dark);
        text-decoration: none;
        font-weight: 600;
    }

        .lc-ribbon__support a:hover {
            text-decoration: underline;
        }

.lc-ribbon__dot {
    color: #ccc;
}

/* ══════════════════════════════════════════════════
   OFFCANVAS MOBILE MENU
══════════════════════════════════════════════════ */
.lc-offcanvas {
    width: 300px !important;
    background: var(--lc-ink);
    border-left: none !important;
}

/* Header */
.lc-offcanvas__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 20px 18px;
    background: linear-gradient(135deg, var(--lc-red-deep), var(--lc-red-dark));
    border-bottom: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
}

.lc-offcanvas__badge {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--lc-gold-lt);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.lc-offcanvas__sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.65);
    font-weight: 500;
    line-height: 1.3;
    max-width: 200px;
}

.lc-offcanvas__close {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--lc-trans);
    flex-shrink: 0;
    margin-top: 2px;
}

    .lc-offcanvas__close:hover {
        background: rgba(255,255,255,0.20);
    }

/* Body */
.lc-offcanvas__body {
    padding: 18px 0;
    background: var(--lc-ink);
    overflow-y: auto;
}

/* Nav links */
.lc-offcanvas__nav {
    display: flex;
    flex-direction: column;
}

.lc-offcanvas__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background var(--lc-trans), color var(--lc-trans);
}

    .lc-offcanvas__link:hover {
        background: rgba(200,16,46,0.15);
        color: #fff;
    }

.lc-offcanvas__ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    color: var(--lc-red);
    flex-shrink: 0;
    transition: background var(--lc-trans);
}

.lc-offcanvas__link:hover .lc-offcanvas__ico {
    background: var(--lc-red);
    color: #fff;
}

.lc-offcanvas__arr {
    margin-left: auto;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/* Divider */
.lc-offcanvas__hr {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 10px 20px;
}

/* Contact section */
.lc-offcanvas__contact {
    padding: 10px 20px 16px;
}

.lc-offcanvas__contact-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-gold-lt);
    margin-bottom: 10px;
}

.lc-offcanvas__contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 500;
    transition: color var(--lc-trans);
}

    .lc-offcanvas__contact-row i {
        color: var(--lc-red);
        width: 14px;
    }

    .lc-offcanvas__contact-row:hover {
        color: #fff;
    }

/* Footer of offcanvas */
.lc-offcanvas__foot {
    padding: 14px 20px;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 0.70rem;
    color: rgba(255,255,255,0.30);
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

    .lc-offcanvas__foot i {
        margin-right: 4px;
    }

/* ══════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════ */
.lc-main {
    min-height: calc(100vh - 300px);
    background: #f6f2f3;
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.lc-footer {
    background: var(--lc-ink-mid);
    margin-top: 0;
    overflow: hidden;
}

/* SVG wave – creates visual break */
.lc-footer__wave {
    display: block;
    line-height: 0;
    margin-bottom: -1px;
}

    .lc-footer__wave svg {
        display: block;
        width: 100%;
        height: 56px;
    }

/* Body */
.lc-footer__body {
    padding: 28px 0 36px;
    background: var(--lc-ink);
}

/* Brand col */
.lc-footer__brand {
    padding-right: 16px;
}

.lc-footer__logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    margin-bottom: 14px;
    filter: drop-shadow(0 2px 8px rgba(200,16,46,0.35));
}

.lc-footer__brand-desc {
    font-size: 0.80rem;
    color: rgba(255,255,255,0.60);
    line-height: 1.7;
    margin-bottom: 16px;
}

    .lc-footer__brand-desc strong {
        color: rgba(255,255,255,0.88);
    }

.lc-footer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .lc-footer__chips span {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--lc-gold-lt);
        background: rgba(232,168,0,0.12);
        border: 1px solid rgba(232,168,0,0.25);
        border-radius: 20px;
        padding: 3px 10px;
    }

/* Section headings */
.lc-footer__section {
    height: 100%;
}

.lc-footer__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.90);
    margin-bottom: 18px;
}

.lc-footer__heading-accent {
    display: inline-block;
    width: 18px;
    height: 3px;
    background: var(--lc-red);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Footer list */
.lc-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .lc-footer__list li {
        display: flex;
        gap: 10px;
        font-size: 0.80rem;
        color: rgba(255,255,255,0.62);
        line-height: 1.5;
        align-items: flex-start;
    }

    .lc-footer__list i {
        color: var(--lc-red);
        width: 14px;
        margin-top: 2px;
        flex-shrink: 0;
        font-size: 0.80rem;
    }

    .lc-footer__list a {
        color: rgba(255,255,255,0.72);
        text-decoration: none;
        transition: color var(--lc-trans);
    }

        .lc-footer__list a:hover {
            color: var(--lc-gold-lt);
        }

/* Quick nav */
.lc-footer__qnav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-footer__qlink {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.80rem;
    color: rgba(255,255,255,0.60);
    text-decoration: none;
    padding: 5px 0;
    transition: color var(--lc-trans), padding-left var(--lc-trans);
}

    .lc-footer__qlink i {
        color: var(--lc-red);
        font-size: 0.65rem;
        flex-shrink: 0;
    }

    .lc-footer__qlink:hover {
        color: var(--lc-gold-lt);
        padding-left: 6px;
    }

/* Bottom bar */
.lc-footer__bar {
    background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px 0;
}

.lc-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.lc-footer__partner,
.lc-footer__copy,
.lc-footer__online {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.36);
    font-weight: 500;
}

    .lc-footer__partner a {
        color: rgb(253 203 13);
    }

    .lc-footer__partner i {
        margin-right: 4px;
    }

.lc-footer__online {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .lc-footer__online strong {
        color: var(--lc-gold-lt);
    }

.lc-footer__online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4cdf7a;
    animation: lcPulse 2s ease-in-out infinite;
}

@media (max-width: 575.98px) {
    .lc-footer__bar-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE TWEAKS
══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .lc-header__inner {
        gap: 14px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --lc-header-h: 60px;
        --lc-announce-h: 32px;
    }

    .lc-brand__logo-ring {
        width: 44px;
        height: 44px;
    }

    .lc-brand__logo {
        width: 36px;
        height: 36px;
    }

    .lc-footer__body {
        padding: 22px 0 24px;
    }

    .lc-footer__brand {
        margin-bottom: 8px;
    }
}

@media (max-width: 575.98px) {
    .lc-announce__actions {
        display: none;
    }

    .lc-announce__badge {
        display: none;
    }

    .lc-ribbon {
        display: none !important;
    }

    :root {
        --lc-ribbon-h: 0px;
    }
}

/* ══════════════════════════════════════════════════
   ANNOUNCE MISSING (no announce bar on scroll)
   – recalculate header top
══════════════════════════════════════════════════ */
.lc-announce--hidden ~ .lc-header {
    top: 0;
}

.lc-announce--hidden ~ .lc-ribbon {
    top: var(--lc-header-h);
}

/* ═══════════════════════════════════════════════════
   CONTENT PAGES (cp-*) — shared hero / card / back
═══════════════════════════════════════════════════ */
.cp-hero {
    background: linear-gradient(135deg,#8f0b1f 0%,#c8102e 55%,#e8283f 100%);
    padding: 38px 0 32px;
    position: relative;
    overflow: hidden
}

    .cp-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none
    }

.cp-hero__inner {
    position: relative;
    z-index: 1
}

.cp-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: rgba(255,255,255,.60);
    margin-bottom: 10px;
    font-weight: 500
}

    .cp-hero__breadcrumb a {
        color: rgba(255,255,255,.65);
        text-decoration: none;
        transition: color .18s
    }

        .cp-hero__breadcrumb a:hover {
            color: #fff
        }

    .cp-hero__breadcrumb .sep {
        font-size: .6rem;
        opacity: .5
    }

.cp-hero__title {
    font-size: clamp(1.4rem,3vw,2rem);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,.30)
}

.cp-hero__accent {
    display: inline-block;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg,#ffd700,rgba(255,215,0,.2));
    border-radius: 2px
}

.cp-body {
    padding: 40px 0 60px;
    background: #f6f2f3
}

.cp-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(200,16,46,.08);
    border: 1px solid #f0e8ea;
    overflow: hidden
}

.cp-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-bottom: 2px solid #fdf0f2;
    background: #fdf9fa
}

.cp-card__head-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0
}

.cp-card__head-title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c8102e;
    margin: 0
}

.cp-card__body {
    padding: 32px 36px
}

@media(max-width:575.98px) {
    .cp-card__body {
        padding: 20px 18px
    }
}

.cp-card__body .NContent {
    font-size: .95rem;
    line-height: 1.85;
    color: #333
}

    .cp-card__body .NContent h1, .cp-card__body .NContent h2 {
        color: #c8102e;
        font-weight: 800;
        margin-top: 1.5rem
    }

    .cp-card__body .NContent h3 {
        color: #8f0b1f;
        font-weight: 700;
        margin-top: 1.2rem
    }

    .cp-card__body .NContent a {
        color: #c8102e
    }

    .cp-card__body .NContent table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: .88rem
    }

        .cp-card__body .NContent table th, .cp-card__body .NContent table td {
            border: 1px solid #e0d0d3;
            padding: 8px 12px
        }

        .cp-card__body .NContent table th {
            background: #c8102e;
            color: #fff;
            font-weight: 700
        }

        .cp-card__body .NContent table tr:nth-child(even) td {
            background: #fdf5f6
        }

    .cp-card__body .NContent ul, .cp-card__body .NContent ol {
        padding-left: 20px
    }

    .cp-card__body .NContent img {
        max-width: 100%;
        border-radius: 8px
    }

.cp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .80rem;
    font-weight: 700;
    color: #c8102e;
    text-decoration: none;
    padding: 8px 16px;
    border: 1.5px solid rgba(200,16,46,.30);
    border-radius: 8px;
    transition: background .18s, border-color .18s;
    margin-bottom: 20px
}

    .cp-back:hover {
        background: rgba(200,16,46,.06);
        border-color: #c8102e;
        color: #c8102e
    }
/* Step highlight */
.cp-card__body .NContent ol > li {
    margin-bottom: 12px;
}

    .cp-card__body .NContent ol > li::marker {
        font-weight: 800;
        color: #c8102e;
    }


/* doc download highlight */
.cp-card__body .NContent a[href$=".pdf"]::before,
.cp-card__body .NContent a[download]::before {
    content: '\f019  ';
    font-family: 'FontAwesome';
    color: #c8102e;
}

/* ═══════════════════════════════════════════════════
   PRIZE PAGE
═══════════════════════════════════════════════════ */
/* Prize cards */
.prize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 16px;
    margin: 24px 0
}

.prize-card {
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    border: 2px solid transparent;
    transition: transform .2s,box-shadow .2s
}

    .prize-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,.10)
    }

.prize-card--gold {
    background: linear-gradient(135deg,#fff9e6,#fffbe8);
    border-color: #e8a800
}

.prize-card--silver {
    background: linear-gradient(135deg,#f5f5f5,#fafafa);
    border-color: #aaa
}

.prize-card--bronze {
    background: linear-gradient(135deg,#fff3ec,#fff7f3);
    border-color: #c87533
}

.prize-card__medal {
    font-size: 2.5rem;
    margin-bottom: 8px
}

.prize-card__label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px
}

.prize-card__name {
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 4px
}

.prize-card__value {
    font-size: .88rem;
    color: #c8102e;
    font-weight: 700
}

/* ═══════════════════════════════════════════════════
   REPORT PAGE (rp-*)
═══════════════════════════════════════════════════ */
/* Hero */
.rp-hero {
    background: linear-gradient(135deg,#8f0b1f 0%,#c8102e 55%,#e8283f 100%);
    padding: 38px 0 32px;
    position: relative;
    overflow: hidden
}

    .rp-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none
    }

.rp-hero__inner {
    position: relative;
    z-index: 1
}

.rp-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: rgba(255,255,255,.60);
    margin-bottom: 10px;
    font-weight: 500
}

    .rp-hero__breadcrumb a {
        color: rgba(255,255,255,.65);
        text-decoration: none
    }

        .rp-hero__breadcrumb a:hover {
            color: #fff
        }

    .rp-hero__breadcrumb .sep {
        font-size: .6rem;
        opacity: .5
    }

.rp-hero__title {
    font-size: clamp(1.4rem,3vw,2rem);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,.30)
}

.rp-hero__accent {
    display: inline-block;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg,#ffd700,rgba(255,215,0,.2));
    border-radius: 2px
}

/* Body */
.rp-body {
    padding: 36px 0 60px;
    background: #f6f2f3
}

/* Card */
.rp-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(200,16,46,.08);
    border: 1px solid #f0e8ea;
    overflow: hidden;
    margin-bottom: 24px
}

.rp-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 2px solid #fdf0f2;
    background: #fdf9fa
}

.rp-card__head-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0
}

.rp-card__head-title {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #c8102e;
    margin: 0
}

.rp-card__body {
    padding: 24px
}

@media(max-width:575.98px) {
    .rp-card__body {
        padding: 16px
    }
}

/* Filter bar */
.rp-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

    .rp-filter label {
        font-size: .82rem;
        font-weight: 700;
        color: #555;
        white-space: nowrap;
        margin: 0
    }

    .rp-filter select {
        flex: 1;
        min-width: 220px;
        border: 1.5px solid #e0d0d3;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: .88rem;
        color: #333;
        background: #fff;
        outline: none;
        transition: border-color .18s;
        font-family: inherit
    }

        .rp-filter select:focus {
            border-color: #c8102e;
            box-shadow: 0 0 0 3px rgba(200,16,46,.10)
        }

/* Stat cards */
.rp-stat {
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%
}

.rp-stat--reg {
    background: linear-gradient(135deg,#fff0f2,#fde8eb);
    border: 1.5px solid rgba(200,16,46,.20)
}

.rp-stat--join {
    background: linear-gradient(135deg,#edf9ee,#e0f5e2);
    border: 1.5px solid rgba(34,139,34,.20)
}

.rp-stat__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0
}

.rp-stat--reg .rp-stat__icon {
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff
}

.rp-stat--join .rp-stat__icon {
    background: linear-gradient(135deg,#28a745,#1a7a2e);
    color: #fff
}

.rp-stat__body {
}

.rp-stat__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px
}

.rp-stat__value {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    color: #1a1a2e
}

.rp-stat--reg .rp-stat__value {
    color: #c8102e
}

.rp-stat--join .rp-stat__value {
    color: #28a745
}

/* Report table */
.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem
}

    .rp-table thead th {
        background: linear-gradient(135deg,#c8102e,#8f0b1f);
        color: #fff;
        padding: 10px 14px;
        font-weight: 700;
        font-size: .76rem;
        letter-spacing: .5px;
        text-align: center;
        white-space: nowrap
    }

        .rp-table thead th:first-child {
            border-radius: 8px 0 0 0;
            width: 56px
        }

        .rp-table thead th:last-child {
            border-radius: 0 8px 0 0
        }

    .rp-table tbody tr {
        border-bottom: 1px solid #f5eef0;
        transition: background .15s
    }

        .rp-table tbody tr:hover {
            background: #fdf5f6
        }

    .rp-table tbody td {
        padding: 10px 14px;
        color: #333;
        vertical-align: middle
    }

        .rp-table tbody td:first-child, .rp-table tbody td:nth-child(3), .rp-table tbody td:nth-child(4) {
            text-align: center
        }

.rp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap
}

.rp-badge--red {
    background: #c8102e;
    color: #fff
}

.rp-badge--green {
    background: #28a745;
    color: #fff
}

/* Chart containers */
.rp-chart-wrap {
    position: relative;
    height: 280px;
    padding: 8px
}

/* ═══════════════════════════════════════════════════
   NOTIFICATION PANELS / MODALS / PARTNERS / INDEX
═══════════════════════════════════════════════════ */

/* Notification section */
.hp-noti-section {
    background: #fff;
    padding: 36px 0;
    border-bottom: 1px solid #f0e8ea;
}

/* Panel card */
.hp-panel {
    border-radius: 12px;
    overflow: hidden;
    /*  box-shadow: 0 2px 16px rgba(200,16,46,.08);*/
    border: 1px solid #c9c4c5;
    height: 100%;
    display: flex;
    flex-direction: column;
    width:100%
}

.hp-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #c8102e 0%, #8f0b1f 100%);
    color: #fff;
}

.hp-panel__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
    flex-shrink: 0;
}

.hp-panel__title {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.hp-panel__body {
    padding: 0;
    background: #fff;
    flex: 1;
    overflow: hidden;
}

/* Notification row */
.hp-noti-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
}

.hp-noti-link {
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: .84rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    line-height: 1.5;
    transition: color .18s;
}

    .hp-noti-link:hover {
        color: #c8102e;
    }

.hp-noti-date {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: #c8102e;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Modal */
.hp-modal__content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.20);
}

.hp-modal__header {
    background: linear-gradient(135deg, #c8102e 0%, #8f0b1f 100%);
    color: #fff;
    border: none;
    padding: 18px 24px;
    gap: 12px;
    justify-content: space-between;
}

    .hp-modal__header .modal-title {
        font-size: .96rem;
        font-weight: 700;
        line-height: 1.4;
    }

.hp-modal__close {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    flex-shrink: 0;
    transition: background .18s;
}

    .hp-modal__close:hover {
        background: rgba(255,255,255,.28);
    }

.hp-modal__body {
    font-size: .9rem;
    line-height: 1.8;
    color: #333;
    overflow-y: auto;
}

.hp-modal__files {
    background: #fff8f9;
    border: 1px solid #f0e0e3;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.hp-modal__files-title {
    font-weight: 700;
    color: #c8102e;
    margin-bottom: 8px;
    font-size: .84rem;
}

.hp-modal__files ul {
    margin: 0;
    padding-left: 16px;
}

.hp-modal__files a {
    color: #c8102e;
    text-decoration: none;
    font-size: .84rem;
}
.hp-modal__files a i {
    color: #fff;
}

    .hp-modal__files a:hover {
        text-decoration: underline;
    }

.hp-modal__html {
    line-height: 1.8;
}

    .hp-modal__html img {
        max-width: 100%;
        height: auto;
    }

.hp-modal__footer {
    border-top: 1px solid #f0e8ea;
    padding: 12px 20px;
    background: #fdf9fa;
}

.hp-modal__btn-close {
    background: #c8102e;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 18px;
    font-weight: 600;
    font-size: .82rem;
    transition: background .18s;
}

    .hp-modal__btn-close:hover {
        background: #8f0b1f;
        color: #fff;
    }

/* Partners */
.hp-partners {
    background: linear-gradient(135deg, #8f0b1f 0%, #c8102e 100%);
    padding: 32px 0;
}

.hp-partners__label {
    text-align: center;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 20px;
}

.hp-partner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    transition: background .2s, transform .2s;
}

    .hp-partner-link:hover {
        background: rgba(255,255,255,.22);
        transform: translateY(-2px);
    }

.hp-partner-img {
    max-width: 100%;
    object-fit: contain;
    opacity: .80;
    transition: opacity .2s;
}

.hp-partner-link:hover .hp-partner-img {
    opacity: 1;
}

/* HERO */
.idx-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column
}

.idx-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0
}

.idx-hero__overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient( 160deg, rgba(92, 6, 19, .42) 0%, rgba(143, 11, 31, .34) 38%, rgba(18, 5, 12, .3) 100% );*/
    z-index: 1
}

.idx-hero__shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--lc-red-dark),var(--lc-red),var(--lc-gold-lt),var(--lc-red),var(--lc-red-dark));
    background-size: 200% 100%;
    animation: lcShimmer 4s linear infinite;
    z-index: 5
}

.idx-hero__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 56px 0 32px
}

.idx-hero__content {
    width: 100%
}

.idx-hero__org {
    font-family: var(--lc-font);
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lc-gold-lt);
    text-shadow: 0 0 16px rgba(255,213,79,.55);
    margin: 0 0 14px
}

.idx-hero__title {
    font-family: var(--lc-font);
    font-size: clamp(1.55rem,4vw,2.75rem);
    font-weight: 900;
    line-height: 1.56;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,.60);
    letter-spacing: 1.2px;
    margin: 0 0 8px
}

.idx-hero__year {
    color: var(--lc-gold-lt);
    text-shadow: 0 0 24px rgba(255,213,79,.65),0 2px 8px rgba(0,0,0,.5)
}

.idx-hero__sub {
    font-family: var(--lc-font);
    font-size: clamp(.80rem,1.8vw,1rem);
    font-weight: 500;
    color: rgba(255,255,255,.78);
    margin: 0 0 18px;
    letter-spacing: .4px
}

.idx-hero__divider {
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg,transparent,var(--lc-gold-lt),transparent);
    border-radius: 2px;
    margin: 0 auto 22px
}

.idx-dot-card {
    display: inline-block;
    max-width: 860px;
    width: 100%;
    background: rgb(143 11 31 / 68%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    padding: 18px 24px 16px;
    text-align: center
}

.idx-dot-card__label {
    font-family: var(--lc-font);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lc-gold-lt);
    margin: 0 0 12px
}

    .idx-dot-card__label i {
        margin-right: 6px
    }

.idx-dot-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    justify-content: center
}

.idx-badge {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,213,79,.35);
    border-radius: 6px;
    padding: 5px 13px;
    color: #fff;
    font-family: var(--lc-font);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    transition: background .2s,border-color .2s
}

    .idx-badge:hover {
        background: rgba(255,213,79,.14);
        border-color: rgba(255,213,79,.7)
    }

    .idx-badge strong {
        font-weight: 800;
        color: var(--lc-gold-lt);
    }

.idx-dot-card__time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lc-font);
    font-size: .88rem;
    font-weight: 500;
    color: rgba(255,255,255,.78);
    justify-content: center
}

    .idx-dot-card__time i {
        color: var(--lc-gold-lt)
    }

    .idx-dot-card__time strong {
        color: var(--lc-gold-lt);
        font-weight: 800
    }

.idx-hero__wave {
    position: relative;
    z-index: 2;
    line-height: 0;
    margin-bottom: -1px
}

    .idx-hero__wave svg {
        display: block;
        width: 100%;
        height: 40px
    }

@media(max-width:767px) {
    .idx-hero {
        min-height: 360px
    }

    .idx-hero__body {
        padding: 36px 0 22px
    }

    .idx-dot-card {
        padding: 14px 14px 12px;
        border-radius: 10px
    }

    .idx-badge {
        font-size: .75rem;
        padding: 4px 10px
    }
}

/* CLOCK */
.idx-clock {
    background: #0e0d1a;
    padding: 32px 0 40px
}

.idx-clock__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 35px 5px 15px;
}

.idx-clock__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lc-font);
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6);
}

.idx-clock__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4cdf7a;
    flex-shrink: 0;
    animation: lcPulse 1.8s ease-in-out infinite
}

/* Countdown badge container */
.countdown {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center
}

/* Separator ":" between units */
.idx-tick__sep {
    font-family: var(--lc-font);
    font-size: 2rem;
    font-weight: 900;
    color: rgba(255,255,255,.25);
    line-height: 1;
    align-self: flex-start;
    margin-top: 10px;
    flex-shrink: 0;
    display: none
}

/* Each time-unit badge */
.idx-tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 16px 18px 12px;
    border-radius: 14px;
    box-shadow: 0 6px 28px rgba(0,0,0,.32);
    position: relative;
    overflow: hidden;
    transition: transform .2s
}

    .idx-tick:hover {
        transform: translateY(-3px)
    }

    /* Shine overlay */
    .idx-tick::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 60%);
        pointer-events: none
    }

/* The big number */
.idx-tick__val {
    font-family: var(--lc-font);
    font-size: clamp(2.6rem,5vw,3.8rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,.30)
}

/* Unit label below */
.idx-tick__lbl {
    font-family: var(--lc-font);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.70);
    margin-top: 7px;
    white-space: nowrap
}

/* Colour variants — each unit a distinct hue */
.idx-tick--day {
    background: linear-gradient(145deg, #c8102e 0%, #8f0b1f 100%);
    border: 1px solid rgba(255,120,120,.20)
}

.idx-tick--hour {
    background: linear-gradient(145deg, #1d4ed8 0%, #1e3a8a 100%);
    border: 1px solid rgba(100,160,255,.20)
}

.idx-tick--min {
    background: linear-gradient(145deg, #7c3aed 0%, #5b21b6 100%);
    border: 1px solid rgba(190,140,255,.20)
}

.idx-tick--sec {
    background: linear-gradient(145deg, #d97706 0%, #92400e 100%);
    border: 1px solid rgba(255,210,100,.20)
}

.idx-clock__cta {
    margin-top: 14px
}

.idx-btn-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lc-font);
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg,var(--lc-red) 0%,var(--lc-red-dark) 100%);
    border: none;
    border-radius: 50px;
    padding: 0 52px;
    height: 52px;
    line-height: 52px;
    box-shadow: 0 6px 28px rgba(200,16,46,.52);
    transition: transform .2s,box-shadow .2s;
    animation: idxPulse 2.5s ease-in-out infinite
}

    .idx-btn-cta::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 220%;
        height: 220%;
        background: linear-gradient(45deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 100%);
        animation: shineMove 3.5s linear infinite;
        pointer-events: none
    }

    .idx-btn-cta:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 10px 38px rgba(200,16,46,.68);
        animation: none;
        color: #fff
    }

@keyframes idxPulse {
    0%,100% {
        box-shadow: 0 6px 28px rgba(200,16,46,.52),0 0 0 0 rgba(200,16,46,.28)
    }

    50% {
        box-shadow: 0 6px 28px rgba(200,16,46,.52),0 0 0 10px rgba(200,16,46,0)
    }
}

.idx-btn-pending, .idx-btn-ended {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lc-font);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .8px;
    color: rgba(255,255,255,.40);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50px;
    padding: 0 36px;
    height: 46px;
    line-height: 46px;
    cursor: default
}

@media(max-width:575px) {
    .idx-clock {
        padding: 22px 0 28px
    }

    .idx-tick {
        min-width: 72px;
        padding: 12px 12px 10px
    }

    .idx-tick__val {
        font-size: 2.2rem
    }

    .idx-btn-cta {
        font-size: .82rem;
        padding: 0 28px;
        height: 46px;
        line-height: 46px
    }
}

/* NOTIFICATIONS */
.idx-noti {
    background: #f6f2f3;
    padding: 44px 0 52px;
    width:100%
}

.idx-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px
}

.idx-section-head__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(200,16,46,.22),transparent)
}

.idx-section-head__text {
    font-family: var(--lc-font);
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #999;
    white-space: nowrap
}

.hp-noti-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(200,16,46,.09);
    color: #c8102e;
    font-size: .66rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-right: 7px
}

/* DataTable overrides */
.hp-panel__body .dataTables_wrapper {
    padding: 0
}

.hp-panel__body .hiddensearch {
    display: none !important
}

.hp-panel__body table.dataTable {
    margin: 0 !important;
    border: none !important
}

    .hp-panel__body table.dataTable tbody tr td {
        padding: 0 !important;
        height: auto !important;
        border-bottom: 1px solid #fdf0f2 !important;
        overflow: visible !important;
        text-overflow: unset !important
    }

    .hp-panel__body table.dataTable tbody tr:last-child td {
        border-bottom: none !important
    }

    .hp-panel__body table.dataTable tbody tr:hover {
        background: #fff8f9 !important
    }

.hp-panel__body .table-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 16px;
    background: #fdf9fa;
    border-top: 1px solid #f0e8ea;
    font-size: .72rem;
    color: #888;
    gap: 12px
}

.hp-panel__body .material-pagination {
    display: flex;
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 0
}

    .hp-panel__body .material-pagination li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        border-radius: 6px;
        font-size: .76rem;
        color: #555;
        text-decoration: none;
        transition: background .18s,color .18s
    }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(200,16,46,.10);
    color: #c8102e;
    border: 1px solid #c9c4c5;
    border-radius:5px;
}

.hp-panel__body .material-pagination li.disabled a {
    color: #ddd;
    pointer-events: none
}
/* Grid pattern overlay */
.login-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(200,16,46,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,.07) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

/* ── CARD ── */
.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 16px;
}

.login-card {
    background: linear-gradient(160deg, rgba(92, 6, 19, .86) 0%, rgba(143, 11, 31, .72) 38%, rgba(18, 5, 12, .50) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(200,16,46,.18), 0 24px 60px rgba(0,0,0,.55);
    animation: cardIn .6s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.96)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

/* Shimmer top bar */
.login-card__bar {
    height: 3px;
    background: linear-gradient(90deg,var(--red-deep),var(--red),var(--gold),var(--red),var(--red-deep));
    background-size: 200% 100%;
    animation: shimmer 3.5s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0%
    }

    100% {
        background-position: 200%
    }
}

/* Card header */
.login-card__head {
    padding: 28px 36px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.login-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--red),var(--red-dark));
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(200,16,46,.50);
}

    .login-card__logo i {
        font-size: 1.6rem;
        color: var(--lc-white);
    }

.login-card__title {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}

.login-card__sub {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    line-height: 1.35;
}

/* Form body */
.login-card__body {
    padding: 28px 36px 32px
}

/* Error notice */
.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(200,16,46,.18);
    border: 1px solid rgba(200,16,46,.35);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: .84rem;
    font-weight: 600;
    color: #ffb3b3;
}

    .login-error i {
        color: var(--red);
        flex-shrink: 0
    }

/* Input groups */
.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-group__label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-white);
    margin-bottom: 7px;
}

.form-group__ico {
    position: absolute;
    left: 14px;
    bottom: 12px;
    color: rgba(255,255,255,.35);
    font-size: .92rem;
    pointer-events: none;
    transition: color .2s;
}

.form-group input {
    display: block;
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 11px 14px 11px 40px;
    font-family: var(--font);
    font-size: .92rem;
    font-weight: 500;
    color: var(--lc-white);
    outline: none;
    transition: border-color .2s,background .2s,box-shadow .2s;
    -webkit-appearance: none;
}

    .form-group input::placeholder {
        color: rgba(255,255,255,.35);
    }

    .form-group input:focus {
        border-color: var(--lc-red);
        color: var(--lc-white);
        background: rgba(200,16,46,.10);
        box-shadow: 0 0 0 3px rgba(200,16,46,.18);
    }

        .form-group input:focus + .form-group__ico,
        .form-group:focus-within .form-group__ico {
            color: var(--red)
        }
    /* autocomplete dark */
    .form-group input:-webkit-autofill,
    .form-group input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 40px #1a0408 inset !important;
        -webkit-text-fill-color: #fff !important;
        border-color: var(--red) !important;
    }

/* Submit button */
.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 13px 24px;
    font-family: var(--font);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 6px 24px rgba(200,16,46,.45);
    transition: transform .2s,box-shadow .2s;
    position: relative;
    overflow: hidden;
}

    .btn-login::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 220%;
        height: 220%;
        background: linear-gradient(45deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,0) 100%);
        animation: shineBtn 3s linear infinite;
        pointer-events: none;
    }

@keyframes shineBtn {
    0% {
        transform: translateX(-120%) rotate(45deg)
    }

    100% {
        transform: translateX(120%) rotate(45deg)
    }
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(200,16,46,.62)
}

.btn-login:active {
    transform: translateY(0)
}

/* Footer note */
.login-card__foot {
    padding: 14px 36px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    text-align: center;
    font-size: .70rem;
    color: rgba(255,255,255,.25);
    letter-spacing: .3px;
}

    .login-card__foot strong {
        color: var(--lc-gold-lt);
    }


/* Status toast */
#status {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    height: 0;
    line-height: 0;
    overflow: hidden;
    z-index: 9999;
}

.rg-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px auto;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
}

.rg-alert--warn {
    background: rgba(255,183,77,.12);
    border: 1px solid rgba(255,183,77,.35);
    color: #c07010;
}

/* ── Page wrapper ── */
.rg-page {
    background: #f6f2f3;
    padding: 40px 0 64px;
    min-height: calc(100vh - 300px);
}

/* ── Page header ── */
.rg-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(200,16,46,.12);
}

.rg-header__badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #c8102e, #8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(200,16,46,.35);
}

.rg-header__eyebrow {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #c8102e;
    margin: 0 0 3px;
}

.rg-header__title {
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    font-weight: 900;
    color: #1a1a2e;
    margin: 0;
    letter-spacing: .5px;
}

/* ── Form card ── */
.rg-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0e8ea;
    box-shadow: 0 4px 28px rgba(200,16,46,.08);
    overflow: hidden;
}

/* ── Section ── */
.rg-section {
    padding: 28px 32px;
}

.rg-section--foot {
    padding: 20px 32px 28px;
}

.rg-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.rg-section__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #c8102e, #8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    flex-shrink: 0;
}

.rg-section__title {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c8102e;
}

/* Divider between sections */
.rg-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,16,46,.15), transparent);
    margin: 0 32px;
}

/* ── Fields ── */
.rg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rg-label {
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #666;
    margin: 0;
}

.rg-required {
    color: #c8102e;
    font-weight: 800;
    margin-left: 2px;
}

/* Input wrapper */
.rg-input-wrap {
    position: relative;
}

.rg-input-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(200,16,46,.40);
    font-size: .88rem;
    pointer-events: none;
    transition: color .2s;
    z-index: 2;
}

.rg-input-wrap:focus-within .rg-input-ico {
    color: #c8102e;
}

/* Text/number inputs */
.rg-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    background: #fdf9fa;
    border: 1.5px solid #f0e0e3;
    border-radius: 10px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    color: #1a1a2e;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    -webkit-appearance: none;
}

    .rg-input::placeholder {
        color: #bbb;
        font-weight: 400;
    }

    .rg-input:focus {
        border-color: #c8102e;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(200,16,46,.10);
    }
    /* Hide number spinners */
    .rg-input[type=number]::-webkit-inner-spin-button,
    .rg-input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    .rg-input[type=number] {
        -moz-appearance: textfield;
    }

/* Select inputs */
.rg-select {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    background: #fdf9fa;
    border: 1.5px solid #f0e0e3;
    border-radius: 10px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    color: #1a1a2e;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    -webkit-appearance: none;
    cursor: pointer;
}

    .rg-select:focus {
        border-color: #c8102e;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(200,16,46,.10);
    }

/* ── Select2 overrides ── */
.select2-container--default .select2-selection--single {
    height: 44px !important;
    border: 1.5px solid #f0e0e3 !important;
    border-radius: 10px !important;
    background: #fdf9fa !important;
    padding-left: 34px !important;
    transition: border-color .2s, box-shadow .2s !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        color: #1a1a2e !important;
        font-family: 'Be Vietnam Pro', sans-serif !important;
        font-size: .9rem !important;
        padding-left: 4px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
        right: 10px !important;
    }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #c8102e !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(200,16,46,.10) !important;
    outline: none !important;
}

.select2-dropdown {
    border: 1.5px solid #f0e0e3 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(200,16,46,.12) !important;
    overflow: hidden;
}

.select2-results__option {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: .88rem !important;
    padding: 9px 14px !important;
    color: #333;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(200,16,46,.09) !important;
    color: #c8102e !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(200,16,46,.05) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #f0e0e3 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: .88rem !important;
    outline: none !important;
}

    .select2-search--dropdown .select2-search__field:focus {
        border-color: #c8102e !important;
        box-shadow: 0 0 0 2px rgba(200,16,46,.10) !important;
    }

/* ── Footer actions ── */
.rg-foot-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rg-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(200,16,46,.05);
    border: 1px solid rgba(200,16,46,.12);
    border-left: 3px solid #c8102e;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: .82rem;
    font-weight: 500;
    color: #555;
    line-height: 1.6;
}

    .rg-note i {
        color: #c8102e;
        flex-shrink: 0;
        margin-top: 1px;
    }

.rg-foot-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end
}

/* reCAPTCHA scale down slightly if needed */
.g-recaptcha {
    transform: scale(0.94);
    transform-origin: left center;
}

/* Submit button */
.rg-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #c8102e 0%, #8f0b1f 100%);
    border: none;
    border-radius: 50px;
    padding: 0 36px;
    height: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(200,16,46,.42);
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
    flex-shrink: 0;
}

    .rg-btn-submit::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 220%;
        height: 220%;
        background: linear-gradient(45deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 100%);
        animation: rgShine 3s linear infinite;
        pointer-events: none;
    }

@keyframes rgShine {
    0% {
        transform: translateX(-120%) rotate(45deg);
    }

    100% {
        transform: translateX(120%) rotate(45deg);
    }
}

.rg-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(200,16,46,.58);
    color: #fff;
}

.rg-btn-submit:active {
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .rg-page {
        padding: 24px 0 48px;
    }

    .rg-section {
        padding: 20px 18px;
    }

    .rg-section--foot {
        padding: 16px 18px 24px;
    }

    .rg-divider {
        margin: 0 18px;
    }

    .rg-header {
        gap: 12px;
        margin-bottom: 18px;
    }

    .rg-foot-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .rg-btn-submit {
        width: 100%;
        justify-content: center;
    }

    .g-recaptcha {
        transform: scale(0.88);
        transform-origin: left center;
    }
}
/* ── Alert ── */
.sw-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px auto;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
}

.sw-alert--warn {
    background: rgba(255,183,77,.12);
    border: 1px solid rgba(255,183,77,.35);
    color: #e0a020;
}

/* ── PAGE ── */
.sw-page {
    background: #f6f2f3;
    padding: 40px 0 60px;
    min-height: calc(100vh - 300px);
}

/* ── HEADER ── */
.sw-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(200,16,46,.12);
}

.sw-header__badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(200,16,46,.35);
}

.sw-header__eyebrow {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #c8102e;
    margin: 0 0 3px;
}

.sw-header__title {
    font-size: clamp(1.3rem,3vw,1.85rem);
    font-weight: 900;
    color: #1a1a2e;
    margin: 0;
    letter-spacing: .5px;
}

/* ── INFO CARD ── */
.sw-info-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0e8ea;
    box-shadow: 0 4px 24px rgba(200,16,46,.08);
    padding: 28px 24px;
    text-align: center;
    height: 100%;
}

.sw-info-card__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 14px;
    box-shadow: 0 4px 20px rgba(200,16,46,.35);
}

.sw-info-card__greeting {
    font-size: .80rem;
    color: #999;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.sw-info-card__name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 16px;
    word-break: break-word;
}

.sw-divider {
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(200,16,46,.18),transparent);
    margin: 0 0 18px;
}

.sw-info-card__notice {
    font-size: .86rem;
    font-weight: 500;
    color: #555;
    line-height: 1.6;
    margin: 0 0 20px;
    text-align: left;
}

    .sw-info-card__notice i {
        color: #c8102e;
        margin-right: 6px
    }

    .sw-info-card__notice strong {
        color: #c8102e
    }

/* Steps */
.sw-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left
}

.sw-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: #fdf9fa;
    border-radius: 8px;
    border: 1px solid #f5e8ea;
}

.sw-step__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    font-size: .70rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-step__text {
    font-size: .82rem;
    font-weight: 500;
    color: #444;
    line-height: 1.5;
    padding-top: 2px
}

    .sw-step__text strong {
        color: #c8102e
    }

/* ── WHEEL CARD ── */
.sw-wheel-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0e8ea;
    box-shadow: 0 4px 24px rgba(200,16,46,.08);
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sw-wheel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c8102e;
}

.sw-wheel-title__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c8102e;
    opacity: .5;
    display: inline-block;
}

.sw-pointer {
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(200,16,46,.45));
}

/* Spin container + canvas */
.spin-container {
    width: 100%;
    display: flex;
    justify-content: center
}

#wheel-container {
    position: relative;
    width: min(480px,85vw);
    height: min(480px,85vw);
}

#wheel {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(200,16,46,.25), 0 12px 40px rgba(0,0,0,.18);
}
/* Spin button */
#spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(100px,20vw);
    height: min(100px,20vw);
    border-radius: 50%;
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(200,16,46,.20), 0 8px 28px rgba(200,16,46,.50);
    transition: transform .18s,box-shadow .18s;
    overflow: hidden;
}

    #spin:hover:not(:disabled) {
        transform: translate(-50%,-50%) scale(1.07);
        box-shadow: 0 0 0 5px #fff,0 0 0 7px rgba(200,16,46,.35),0 12px 36px rgba(200,16,46,.60);
    }

    #spin:disabled {
        opacity: .6;
        cursor: default
    }

.spin-btn__text {
    font-size: clamp(.65rem,.9vw,1rem);
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.30);
}

.spin-btn__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.20);
    pointer-events: none;
}
/* Spin pulse while spinning */
#spin.is-spinning {
    animation: spinPulse .6s ease-in-out infinite alternate
}

@keyframes spinPulse {
    from {
        box-shadow: 0 0 0 5px #fff,0 0 0 7px rgba(200,16,46,.20),0 8px 28px rgba(200,16,46,.50)
    }

    to {
        box-shadow: 0 0 0 5px #fff,0 0 0 12px rgba(200,16,46,.35),0 12px 40px rgba(200,16,46,.70)
    }
}

.sw-wheel-hint {
    font-size: .78rem;
    font-weight: 500;
    color: #888;
    text-align: center;
    margin: 0;
}

    .sw-wheel-hint i {
        color: #c8102e;
        margin-right: 4px
    }

    .sw-wheel-hint strong {
        color: #c8102e
    }

/* ── MODAL ── */
.sw-modal__content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.sw-modal__header {
    background: linear-gradient(135deg,#c8102e 0%,#8f0b1f 100%);
    padding: 28px 24px 20px;
    text-align: center;
}

.sw-modal__firework {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 8px;
    display: block
}

.sw-modal__title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: .5px;
}

.sw-modal__sub {
    color: rgba(255,255,255,.72);
    font-size: .80rem;
    font-weight: 500;
    margin: 0;
}

.sw-modal__body {
    padding: 24px 28px 8px;
    background: #fff;
}

/* Result badge */
.sw-result-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg,#fdf0f2,#ffe8ec);
    border: 1.5px solid rgba(200,16,46,.22);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.sw-result-badge__ico {
    font-size: 1.6rem;
    color: #c8102e;
    flex-shrink: 0;
}

.sw-result-badge__text {
    font-size: 1.05rem;
    font-weight: 800;
    color: #c8102e;
    margin: 0;
    line-height: 1.4;
}

/* reCAPTCHA center */
.sw-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
    transform: scale(0.92);
    transform-origin: center;
}

.sw-modal__footer {
    display: flex;
    gap: 10px;
    padding: 16px 28px 24px;
    background: #fff;
}

.sw-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 50px;
    padding: 11px 20px;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: transform .18s,box-shadow .18s;
    border: none;
    text-decoration: none;
}

.sw-btn--primary {
    background: linear-gradient(135deg,#c8102e,#8f0b1f);
    color: #fff;
    box-shadow: 0 4px 18px rgba(200,16,46,.40);
}

    .sw-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(200,16,46,.55);
        color: #fff
    }

.sw-btn--ghost {
    background: rgba(200,16,46,.07);
    color: #c8102e;
    border: 1.5px solid rgba(200,16,46,.22);
}

    .sw-btn--ghost:hover {
        background: rgba(200,16,46,.12)
    }

/* ── RESPONSIVE ── */
@media(max-width:991.98px) {
    .sw-info-card {
        margin-bottom: 0
    }
}

@media(max-width:575.98px) {
    .sw-page {
        padding: 24px 0 40px
    }

    .sw-header {
        gap: 12px;
        margin-bottom: 20px
    }

    .sw-modal__footer {
        flex-direction: column
    }
}
/* ────────────────────────────────────────────
   TOP BAR
──────────────────────────────────────────── */
.dt-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px !important;
    background: #fff !important;
    border-bottom: 2px solid rgba(200,16,46,.12) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    position: relative;
    min-height: 62px;
    flex-wrap: wrap;
}

/* Badge icon */
.dt-topbar__badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(200,16,46,.35);
}

.dt-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dt-topbar__name {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
}

.dt-topbar__meta {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
}

/* Progress bar */
.dt-topbar__prog {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 160px;
}

.dt-prog__txt {
    font-size: .70rem;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
}

.dt-prog__track {
    flex: 1;
    height: 8px;
    background: #f0e8ea;
    border-radius: 4px;
    overflow: hidden;
}

.dt-prog__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--red-dark));
    border-radius: 4px;
    transition: width .4s ease;
}

.dt-prog__pct {
    font-size: .70rem;
    font-weight: 700;
    color: var(--red);
    white-space: nowrap;
    min-width: 28px;
    text-align: right;
}

/* ────────────────────────────────────────────
   TIMER  —  override timer-fixed
──────────────────────────────────────────── */
/* Wrapper shell (fixed position) */
.dt-timer-wrap {
    position: fixed !important;
    top: 7px !important;
    right: 14px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 2px solid rgba(200,16,46,.25) !important;
    border-radius: 50px !important;
    padding: 7px 16px 7px 12px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.12) !important;
    transition: border-color .3s, background .3s !important;
    margin: 0 !important;
}

.dt-timer-ico {
    font-size: 1rem;
    color: var(--red);
}

.dt-timer-val,
#timer {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    font-family: var(--font) !important;
    color: #1a1a2e !important;
    letter-spacing: 2px !important;
    /* override timer-fixed inline styles */
    position: static !important;
    top: auto !important;
    right: auto !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
/* Red urgent state (set by JS via color:red) —
   mirror onto wrapper via CSS custom property trick */
.dt-timer-wrap:has(#timer[style*="red"]),
.dt-timer-wrap.dt-timer--urgent {
    border-color: var(--red) !important;
    background: linear-gradient(135deg,#fff0f2,#ffe8ec) !important;
    animation: timerUrgent 1s ease-in-out infinite;
}

@keyframes timerUrgent {
    0%,100% {
        box-shadow: 0 4px 18px rgba(200,16,46,.15);
    }

    50% {
        box-shadow: 0 4px 24px rgba(200,16,46,.50);
    }
}

/* ────────────────────────────────────────────
   LAYOUT WRAPPER
──────────────────────────────────────────── */
.dt-wrap.blank {
    background: transparent !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 100%;
}

/* ────────────────────────────────────────────
   SIDEBAR  —  override .testing-left
──────────────────────────────────────────── */
.testing-left.dt-sidebar {
    width: 96px !important;
    background: #1a0408 !important;
    border: none !important;
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    display: table;
    /* top/height controlled by JS scroll */
}

/* Sidebar header */
.dt-sidebar__hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.40);
}

    .dt-sidebar__hd i {
        font-size: 1rem;
        color: var(--red);
    }

/* Legend */
.dt-sidebar__legend {
    display: flex;
    gap: 5px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}

.dt-leg {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.dt-leg--done {
    background: #c8102e;
}

.dt-leg--todo {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
}

.dt-leg__lbl {
    font-size: .58rem;
    font-weight: 600;
    color: rgba(255,255,255,.40);
    margin-left: 5px;
    vertical-align: middle;
}

/* Sidebar question list */
.dt-qnav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 20px;
}

/* Question nav item */
.menu-link.dt-qnav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.55) !important;
    text-decoration: none !important;
    transition: all .2s;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    position: relative;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

    .menu-link.dt-qnav:hover {
        background: rgba(200,16,46,.25) !important;
        border-color: rgba(200,16,46,.50) !important;
        color: #fff !important;
        transform: scale(1.06);
    }

    /* Answered state (initial from server) */
    .menu-link.dt-qnav--done,
    .menu-link.dt-qnav:has(.tick:not(:empty)) {
        background: var(--check-sel) !important;
        border-color: var(--check-sel);
        color: #fff !important;
    }

    /* Unanswered -> answered when tick gets text (CSS :has trick) */
    .menu-link.dt-qnav:not(.dt-qnav--done):has(.tick:not(:empty)) {
        background: var(--check-sel) !important;
        border-color: var(--check-sel);
        color: #fff !important;
    }

.dt-qnav__n {
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.dt-qnav__tick {
    font-size: .68rem;
    color: rgba(255,255,255,.85);
    min-height: 0.8em;
}

/* ────────────────────────────────────────────
   MAIN CONTENT  —  override .testing-right
──────────────────────────────────────────── */
.testing-right.dt-main {
    background: transparent !important;
    overflow-y: visible !important;
    padding: 18px 20px 120px 20px;
    width: calc(100% - 106px) !important;
}

/* ────────────────────────────────────────────
   QUESTION CARD
──────────────────────────────────────────── */
.dt-card.item-quest {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0e8ea;
    box-shadow: 0 2px 16px rgba(200,16,46,.07);
    margin-bottom: 20px;
    padding: 22px 26px 24px;
    /* left accent bar */
    border-left: 4px solid var(--red);
    transition: box-shadow .2s;
}

    .dt-card.item-quest:hover {
        box-shadow: 0 4px 24px rgba(200,16,46,.12);
    }
    /* scroll target highlight flash */
    .dt-card.item-quest:target {
        animation: cardFlash .6s ease;
    }

@keyframes cardFlash {
    0% {
        box-shadow: 0 0 0 3px rgba(200,16,46,.50);
    }

    100% {
        box-shadow: 0 2px 16px rgba(200,16,46,.07);
    }
}

/* Question header */
.dt-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.dt-q-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(200,16,46,.35);
    margin-top: 2px;
}

.dt-q-text.quest-title {
    font-size: .96rem !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    line-height: 1.6 !important;
    flex: 1;
}
/* Override original .quest-title color */
.quest-title {
    color: #1a1a2e !important;
}

/* Question image */
.dt-q-img.quest-content {
    margin: 12px 0 16px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.dt-q-img img {
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
}

/* ────────────────────────────────────────────
   ANSWER OPTIONS  —  2×2 grid
──────────────────────────────────────────── */
.dt-answers.quest-answer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

/* Hide the <p> wrapper if it exists (fallback, not used in new markup) */
.dt-answers p {
    margin: 0 !important;
}

/* ── Base answer card ── */
.dt-ans {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid;
    cursor: pointer;
    user-select: none;
    transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
    position: relative;
    min-height: 58px;
    font-family: var(--font);
}

    .dt-ans:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,.10);
    }

    /* Hide native radio */
    .dt-ans input[type=radio] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

/* Letter badge */
.dt-ans__badge {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: .80rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    letter-spacing: .5px;
    transition: background .18s;
}

/* Answer text */
.dt-ans__txt {
    flex: 1;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.45;
    transition: color .18s;
}

/* Check icon (hidden by default) */
.dt-ans__chk {
    flex-shrink: 0;
    font-size: 1.15rem;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s, transform .2s;
}

/* ── Option A — Blue ── */
.dt-ans--a {
    background: var(--a-bg);
    border-color: var(--a-border);
    color: #1e3a8a;
}

    .dt-ans--a .dt-ans__badge {
        background: var(--a-badge);
    }

    .dt-ans--a:hover {
        background: #dbeafe;
        border-color: #60a5fa;
        box-shadow: 0 6px 20px rgba(37,99,235,.15);
    }

    .dt-ans--a:has(input:checked) {
        background: var(--check-sel) !important;
        border-color: var(--check-sel) !important;
        color: #fff !important;
        box-shadow: 0 6px 24px rgba(29,78,216,.40) !important;
        transform: translateY(-2px);
    }

        .dt-ans--a:has(input:checked) .dt-ans__badge {
            background: rgba(255,255,255,.25);
        }

        .dt-ans--a:has(input:checked) .dt-ans__chk {
            opacity: 1;
            transform: scale(1);
            color: #fff;
        }

/* ── Option B — Purple ── */
.dt-ans--b {
    background: var(--b-bg);
    border-color: var(--b-border);
    color: #4c1d95;
}

    .dt-ans--b .dt-ans__badge {
        background: var(--b-badge);
    }

    .dt-ans--b:hover {
        background: #ede9fe;
        border-color: #a78bfa;
        box-shadow: 0 6px 20px rgba(124,58,237,.15);
    }

    .dt-ans--b:has(input:checked) {
        background: var(--check-sel) !important;
        border-color: var(--check-sel) !important;
        color: #fff !important;
        box-shadow: 0 6px 24px rgba(124,58,237,.40) !important;
        transform: translateY(-2px);
    }

        .dt-ans--b:has(input:checked) .dt-ans__badge {
            background: rgba(255,255,255,.25);
        }

        .dt-ans--b:has(input:checked) .dt-ans__chk {
            opacity: 1;
            transform: scale(1);
            color: #fff;
        }

/* ── Option C — Emerald ── */
.dt-ans--c {
    background: var(--c-bg);
    border-color: var(--c-border);
    color: #14532d;
}

    .dt-ans--c .dt-ans__badge {
        background: var(--c-badge);
    }

    .dt-ans--c:hover {
        background: #dcfce7;
        border-color: #4ade80;
        box-shadow: 0 6px 20px rgba(22,163,74,.15);
    }

    .dt-ans--c:has(input:checked) {
        background: var(--check-sel) !important;
        border-color: var(--check-sel) !important;
        color: #fff !important;
        box-shadow: 0 6px 24px rgba(22,163,74,.40) !important;
        transform: translateY(-2px);
    }

        .dt-ans--c:has(input:checked) .dt-ans__badge {
            background: rgba(255,255,255,.25);
        }

        .dt-ans--c:has(input:checked) .dt-ans__chk {
            opacity: 1;
            transform: scale(1);
            color: #fff;
        }

/* ── Option D — Amber ── */
.dt-ans--d {
    background: var(--d-bg);
    border-color: var(--d-border);
    color: #78350f;
}

    .dt-ans--d .dt-ans__badge {
        background: var(--d-badge);
    }

    .dt-ans--d:hover {
        background: #fef3c7;
        border-color: #f59e0b;
        box-shadow: 0 6px 20px rgba(217,119,6,.15);
    }

    .dt-ans--d:has(input:checked) {
        background: var(--check-sel) !important;
        border-color: var(--check-sel) !important;
        color: #fff !important;
        box-shadow: 0 6px 24px rgba(217,119,6,.40) !important;
        transform: translateY(-2px);
    }

        .dt-ans--d:has(input:checked) .dt-ans__badge {
            background: rgba(255,255,255,.25);
        }

        .dt-ans--d:has(input:checked) .dt-ans__chk {
            opacity: 1;
            transform: scale(1);
            color: #fff;
        }

/* ────────────────────────────────────────────
   SCORE PREDICTION CARD
──────────────────────────────────────────── */
.dt-score-card {
    border-left-color: #1d4ed8 !important;
}

.dt-score-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: 12px;
}

    .dt-score-card__head i {
        font-size: 1rem;
    }

.dt-score-card__desc {
    font-size: .88rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 14px !important;
    /* override input-field label transform */
    transform: none !important;
}

.dt-req {
    color: var(--red);
    font-weight: 800;
    margin-left: 3px;
}

.dt-score-input-wrap {
    position: relative;
}

.dt-score-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(29,78,216,.45);
    font-size: .9rem;
    pointer-events: none;
}

.dt-score-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px 0 38px;
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    font-family: var(--font);
    font-size: .92rem;
    font-weight: 500;
    color: #1e3a8a;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

    .dt-score-input::placeholder {
        color: #93c5fd;
    }

    .dt-score-input:focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 3px rgba(29,78,216,.12);
    }

    .dt-score-input::-webkit-inner-spin-button,
    .dt-score-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

/* ────────────────────────────────────────────
   SUBMIT BUTTON (fixed)
   Keep #sender and .sender-fixed for JS
──────────────────────────────────────────── */
.dt-submit-fixed.sender-fixed {
    position: fixed !important;
    bottom: 66px !important;
    right: 20px !important;
    top: auto !important;
    z-index: 9999 !important;
    margin: 0 !important;
}

.dt-submit-btn.btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--font) !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0 32px !important;
    height: 52px !important;
    line-height: 52px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 24px rgba(200,16,46,.50) !important;
    transition: transform .2s, box-shadow .2s !important;
    animation: submitPulse 2.8s ease-in-out infinite !important;
    position: relative !important;
    overflow: hidden !important;
}

    .dt-submit-btn.btn::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 220%;
        height: 220%;
        background: linear-gradient(45deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 100%);
        animation: dtShine 3.5s linear infinite;
        pointer-events: none;
    }

@keyframes dtShine {
    0% {
        transform: translateX(-120%) rotate(45deg);
    }

    100% {
        transform: translateX(120%) rotate(45deg);
    }
}

.dt-submit-btn.btn:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 36px rgba(200,16,46,.65) !important;
    animation: none !important;
}

@keyframes submitPulse {
    0%,100% {
        box-shadow: 0 6px 24px rgba(200,16,46,.50), 0 0 0 0 rgba(200,16,46,.25);
    }

    50% {
        box-shadow: 0 6px 24px rgba(200,16,46,.50), 0 0 0 8px rgba(200,16,46,0);
    }
}

/* ────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .dt-answers.quest-answer {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .dt-ans {
        padding: 12px 12px !important;
    }

    .dt-ans__txt {
        font-size: .82rem !important;
    }

    .dt-submit-fixed.sender-fixed {
        bottom: 45px !important
    }
}

@media (max-width: 767px) {
    /* Sidebar hidden on mobile (matches original) */
    .testing-left.dt-sidebar {
        display: none !important;
    }

    .testing-right.dt-main {
        width: 100% !important;
        padding: 14px 12px 100px !important;
    }

    .dt-answers.quest-answer {
        grid-template-columns: 1fr !important;
    }

    .dt-topbar__prog {
        display: none;
    }

    .dt-submit-btn.btn {
        height: 46px !important;
        line-height: 46px !important;
        padding: 0 24px !important;
        font-size: .84rem !important;
    }

    .dt-submit-fixed.sender-fixed {
        bottom: 92px !important;
        right: 12px !important;
    }
}

@media (max-width: 600px) {
    .dt-topbar {
        padding: 8px 12px !important;
        gap: 10px !important;
    }

    .dt-card.item-quest {
        padding: 16px 14px !important;
    }
}

.dt-wrap {
    display: flex;
}

/* SIDEBAR */
.dt-sidebar {
    width: 260px;
    position: relative;
    /* height: calc(100vh - 80px);*/
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #eee;
}

/* MAIN */
.dt-main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}


.dt-navbar {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    height: 60px;
}

.dt-navbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 100%;
    color: #fff;
}

.dt-navbar__left i {
    margin-right: 8px;
}

.dt-btn-logout {
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    transition: 0.2s;
}

    .dt-btn-logout:hover {
        background: rgba(255,255,255,0.15);
    }

/* phần sticky */
.dt-sidebar__inner {
    position: sticky;
    overflow-y: auto;
    padding-right: 6px;
    top: 0
}

.dt-legend-item {
    display: flex;
    align-items: center;
}

/* ── Page ── */
.pv-page {
    background: #f6f2f3;
    padding: 32px 0 72px;
    min-height: calc(100vh - 102px);
    font-family: var(--font);
}

/* ── Timeout banner ── */
.pv-timeout-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #ffe4e6, #fecdd3);
    border: 1.5px solid #fca5a5;
    border-left: 4px solid var(--wrong);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0 auto 20px;
    max-width: 100%;
    font-size: .92rem;
    font-weight: 600;
    color: #991b1b;
}

    .pv-timeout-banner i {
        font-size: 1.4rem;
        color: var(--wrong);
        flex-shrink: 0;
    }

    .pv-timeout-banner strong {
        display: block;
        font-size: 1rem;
    }

    .pv-timeout-banner span {
        font-size: .84rem;
        color: #b91c1c;
    }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.pv-hero {
    position: relative;
    background: linear-gradient(135deg, var(--red-dk) 0%, var(--red) 55%, #e8283f 100%);
    border-radius: 20px;
    padding: 36px 40px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 40px;
    overflow: hidden;
}
    /* Dot pattern */
    .pv-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E");
        pointer-events: none;
    }

/* Sparkles */
.pv-spark {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: pvSpark 3s ease-in-out infinite;
}

.pv-spark--1 {
    width: 12px;
    height: 12px;
    background: #ffd54f;
    top: 18%;
    left: 12%;
    animation-delay: 0s;
    opacity: .70;
}

.pv-spark--2 {
    width: 8px;
    height: 8px;
    background: #fff;
    top: 60%;
    left: 8%;
    animation-delay: .6s;
    opacity: .50;
}

.pv-spark--3 {
    width: 14px;
    height: 14px;
    background: #ffd54f;
    top: 25%;
    right: 15%;
    animation-delay: 1.2s;
    opacity: .65;
}

.pv-spark--4 {
    width: 6px;
    height: 6px;
    background: #fff;
    top: 70%;
    right: 20%;
    animation-delay: .3s;
    opacity: .45;
}

.pv-spark--5 {
    width: 10px;
    height: 10px;
    background: #ffd54f;
    top: 50%;
    left: 30%;
    animation-delay: 1.8s;
    opacity: .55;
}

@keyframes pvSpark {
    0%,100% {
        transform: translateY(0) scale(1);
        opacity: .7
    }

    50% {
        transform: translateY(-12px) scale(1.3);
        opacity: .2
    }
}

/* Left side */
.pv-hero__left {
    flex: 1;
    position: relative;
    z-index: 1;
}

.pv-hero__label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 14px rgba(255,213,79,.55);
    margin: 0 0 10px;
}

.pv-hero__title {
    font-size: clamp(1.4rem,3.5vw,2.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,.30);
}

.pv-hero__name {
    color: var(--gold);
    text-shadow: 0 0 24px rgba(255,213,79,.60);
}

.pv-hero__sub {
    font-size: .92rem;
    font-weight: 500;
    color: rgba(255,255,255,.80);
    margin: 0 0 20px;
}

/* Chips */
.pv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pv-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .80rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.pv-chip--green {
    background: rgba(22,163,74,.25);
    border: 1px solid rgba(22,163,74,.45);
    color: #bbf7d0;
}

.pv-chip--red {
    background: rgba(220,38,38,.25);
    border: 1px solid rgba(220,38,38,.45);
    color: #fecaca;
}

.pv-chip--gray {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.75);
}

.pv-chip i {
    font-size: .9rem;
}

/* Right side — Score ring */
.pv-hero__right {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pv-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
}

.pv-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pv-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,.15);
    stroke-width: 8;
}

.pv-ring-fill {
    fill: none;
    stroke: var(--gold);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 1.2s ease;
    filter: drop-shadow(0 0 6px rgba(255,213,79,.60));
}

.pv-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.pv-ring-pct {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.30);
}

    .pv-ring-pct small {
        font-size: 1rem;
    }

.pv-ring-lbl {
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.pv-ring-score {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--gold);
    margin-top: 2px;
    text-shadow: 0 0 16px rgba(255,213,79,.55);
}

@media (max-width: 767px) {
    .pv-hero {
        flex-direction: column;
        padding: 28px 20px;
        gap: 24px;
    }

    .pv-ring-wrap {
        width: 130px;
        height: 130px;
    }

    .pv-ring-pct {
        font-size: 1.6rem;
    }
}

/* ════════════════════════════════════════
   STATS GRID
════════════════════════════════════════ */
.pv-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.pv-stat-card--wide {
    grid-column: span 4;
}

.pv-stat-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0e8ea;
    box-shadow: 0 2px 12px rgba(200,16,46,.06);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow .2s, transform .2s;
}

    .pv-stat-card:hover {
        box-shadow: 0 4px 20px rgba(200,16,46,.12);
        transform: translateY(-2px);
    }

.pv-stat-card__ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    color: #fff;
}

.pv-stat-card__ico--red {
    background: linear-gradient(135deg,var(--red),var(--red-dk));
    box-shadow: 0 3px 12px rgba(200,16,46,.35);
}

.pv-stat-card__ico--blue {
    background: linear-gradient(135deg,#1d4ed8,#1e3a8a);
    box-shadow: 0 3px 12px rgba(29,78,216,.30);
}

.pv-stat-card__ico--purple {
    background: linear-gradient(135deg,#7c3aed,#5b21b6);
    box-shadow: 0 3px 12px rgba(124,58,237,.30);
}

.pv-stat-card__ico--amber {
    background: linear-gradient(135deg,#d97706,#92400e);
    box-shadow: 0 3px 12px rgba(217,119,6,.30);
}

.pv-stat-card__ico--teal {
    background: linear-gradient(135deg,#0d9488,#0f766e);
    box-shadow: 0 3px 12px rgba(13,148,136,.30);
}

.pv-stat-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pv-stat-card__val {
    font-size: 1.4rem;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1;
}

.pv-stat-card__val--sm {
    font-size: 1.05rem;
}

.pv-stat-card__lbl {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: #999;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .pv-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pv-stat-card--wide {
        grid-column: span 2;
    }
}

@media (max-width: 575px) {
    .pv-stats-grid {
        grid-template-columns: 1fr;
    }

    .pv-stat-card--wide {
        grid-column: span 1;
    }
}

/* ════════════════════════════════════════
   ACTION BUTTONS
════════════════════════════════════════ */
.pv-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 32px;
}

.pv-actions--bottom {
    margin-top: 32px;
    margin-bottom: 0;
}

.pv-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0 28px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

    .pv-btn::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 220%;
        height: 220%;
        background: linear-gradient(45deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 100%);
        animation: pvShine 3.5s linear infinite;
        pointer-events: none;
    }

@keyframes pvShine {
    0% {
        transform: translateX(-120%) rotate(45deg)
    }

    100% {
        transform: translateX(120%) rotate(45deg)
    }
}

.pv-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

.pv-btn--primary {
    background: linear-gradient(135deg, var(--red), var(--red-dk));
    box-shadow: 0 5px 20px rgba(200,16,46,.40);
}

    .pv-btn--primary:hover {
        box-shadow: 0 8px 28px rgba(200,16,46,.58);
    }

.pv-btn--green {
    background: linear-gradient(135deg, #16a34a, #14532d);
    box-shadow: 0 5px 20px rgba(22,163,74,.35);
}

    .pv-btn--green:hover {
        box-shadow: 0 8px 28px rgba(22,163,74,.50);
    }

/* ════════════════════════════════════════
   REVIEW SECTION HEADER
════════════════════════════════════════ */
.pv-review-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pv-review-header__badge {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--red),var(--red-dk));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 3px 12px rgba(200,16,46,.35);
}

.pv-review-header__title {
    font-size: 1.2rem;
    font-weight: 900;
    color: #1a1a2e;
    margin: 0 0 2px;
}

.pv-review-header__sub {
    font-size: .72rem;
    font-weight: 600;
    color: #999;
    letter-spacing: .5px;
    margin: 0;
}

/* Legend */
.pv-review-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.pv-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.pv-legend--correct {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.pv-legend--wrong {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.pv-legend--plain {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* ════════════════════════════════════════
   QUESTION REVIEW CARDS
════════════════════════════════════════ */
.pv-qcard {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0e8ea;
    border-left: 4px solid #d1d5db;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-bottom: 18px;
    padding: 22px 26px 24px;
    transition: box-shadow .2s;
}

    .pv-qcard:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,.10);
    }

.pv-qcard--correct {
    border-left-color: var(--green);
}

.pv-qcard--wrong {
    border-left-color: var(--wrong);
}

.pv-qcard--skip {
    border-left-color: #9ca3af;
}

/* Card head */
.pv-qcard__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.pv-q-badge {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.20);
}

.pv-q-badge--correct {
    background: linear-gradient(135deg, var(--green), #14532d);
}

.pv-q-badge--wrong {
    background: linear-gradient(135deg, var(--wrong), #991b1b);
}

.pv-q-badge--skip {
    background: linear-gradient(135deg, #6b7280, #374151);
}

.pv-q-text {
    flex: 1;
    font-size: .94rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.65;
}

/* Status pill */
.pv-qcard__status {
    flex-shrink: 0;
}

.pv-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 4px 12px;
    border-radius: 20px;
}

.pv-status--right {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.pv-status--wrong {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.pv-status--skip {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* Question image */
.pv-qcard__img {
    margin: 0 0 16px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

    .pv-qcard__img img {
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0,0,0,.10);
    }

/* ════════════════════════════════════════
   ANSWER OPTIONS (preview / disabled)
════════════════════════════════════════ */
.pv-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Base option */
.pv-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid;
    position: relative;
    transition: none;
    user-select: none;
    pointer-events: none;
}

.pv-opt__badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.pv-opt__txt {
    flex: 1;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.45;
}

.pv-opt__ico {
    flex-shrink: 0;
    font-size: 1.1rem;
}

/* ── Default colors per letter ── */
.pv-opt--a {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

    .pv-opt--a .pv-opt__badge {
        background: #2563eb;
    }

.pv-opt--b {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #4c1d95;
}

    .pv-opt--b .pv-opt__badge {
        background: #7c3aed;
    }

.pv-opt--c {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}

    .pv-opt--c .pv-opt__badge {
        background: #16a34a;
    }

.pv-opt--d {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}

    .pv-opt--d .pv-opt__badge {
        background: #d97706;
    }

/* ── Correct (student picked, right answer) ── */
.pv-opt--correct-picked {
    background: #dcfce7 !important;
    border-color: #4ade80 !important;
    color: #14532d !important;
    box-shadow: 0 3px 14px rgba(22,163,74,.22);
}

    .pv-opt--correct-picked .pv-opt__badge {
        background: var(--green) !important;
    }

    .pv-opt--correct-picked .pv-opt__ico {
        color: var(--green);
    }

/* ── Wrong (student picked, wrong answer) ── */
.pv-opt--wrong-picked {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #7f1d1d !important;
    box-shadow: 0 3px 14px rgba(220,38,38,.18);
}

    .pv-opt--wrong-picked .pv-opt__badge {
        background: var(--wrong) !important;
    }

    .pv-opt--wrong-picked .pv-opt__ico {
        color: var(--wrong);
    }

/* ── Correct reveal (student didn't pick, but it's the right answer) ── */
.pv-opt--correct-reveal {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    border-style: dashed !important;
    color: #15803d !important;
}

    .pv-opt--correct-reveal .pv-opt__badge {
        background: var(--green) !important;
    }

    .pv-opt--correct-reveal .pv-opt__ico {
        color: var(--green);
    }

/* ── Responsive ── */
@media (max-width: 767px) {
    .pv-opts {
        grid-template-columns: 1fr !important;
    }

    .pv-qcard {
        padding: 16px 14px;
    }

    .pv-review-legend {
        margin-left: 0;
    }

    .pv-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575px) {
    .pv-hero__title {
        font-size: 1.35rem;
    }

    .pv-stats-grid {
        grid-template-columns: 1fr;
    }
}
/* ── Org label ── */
.hc-org {
    font-family: var(--lc-font);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #67e8f9; /* cyan-300 */
    text-shadow: 0 0 16px rgba(103,232,249,.50);
    margin: 0 0 12px;
}

/* ── Title ── */
.hc-title-wrap {
    margin: 0 0 14px;
}

.hc-title {
    font-family: var(--lc-font);
    font-size: clamp(1.55rem, 4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.22;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 6px;
    text-shadow: 0 2px 10px rgba(0,0,0,.70), 0 0 40px rgba(0,0,0,.40);
}

.hc-year {
    color: #67e8f9; /* cyan */
    text-shadow: 0 0 28px rgba(103,232,249,.70), 0 2px 8px rgba(0,0,0,.55);
}

.hc-sub {
    font-family: var(--lc-font);
    font-size: clamp(.78rem, 1.8vw, .96rem);
    font-weight: 500;
    color: rgba(255,255,255,.72);
    margin: 0;
    letter-spacing: .4px;
}

/* ── Divider — cyan accent ── */
.hc-divider {
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #22d3ee, transparent);
    border-radius: 2px;
    margin: 0 auto 20px;
}

/* ── Content card — dark glass panel ── */
.hc-content-card {
    display: inline-block;
    max-width: 860px;
    width: 100%;
    /* Dark ink panel — cung cấp nền để chữ dễ đọc dù không có overlay */
    background: rgba(8, 20, 40, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(103,232,249,.18);
    border-top: 2px solid rgba(103,232,249,.35);
    border-radius: 14px;
    padding: 18px 24px 16px;
    text-align: left;
    box-shadow: 0 8px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Label */
.hc-content-card__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lc-font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #67e8f9;
    margin: 0 0 13px;
}

.hc-content-card__label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34,211,238,.80);
    flex-shrink: 0;
    animation: hcDotPulse 2s ease-in-out infinite;
}

@keyframes hcDotPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.7);
    }
}

/* Badges */
.hc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.hc-badge {
    background: rgba(103,232,249,.09);
    border: 1px solid rgba(103,232,249,.28);
    border-radius: 6px;
    padding: 5px 13px;
    color: rgba(255,255,255,.88);
    font-family: var(--lc-font);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0,0,0,.40);
    transition: background .2s, border-color .2s, color .2s;
}

    .hc-badge:hover {
        background: rgba(103,232,249,.18);
        border-color: rgba(103,232,249,.60);
        color: #fff;
    }

    .hc-badge strong {
        font-weight: 800;
        color: #67e8f9;
    }

/* Time row */
.hc-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lc-font);
    font-size: .86rem;
    font-weight: 500;
    color: rgba(255,255,255,.72);
}

    .hc-time i {
        color: #22d3ee;
        font-size: .9rem;
    }

    .hc-time strong {
        color: #67e8f9;
        font-weight: 800;
        text-shadow: 0 0 10px rgba(103,232,249,.40);
    }

/* ── Responsive ── */
@media (max-width: 767px) {
    .hc-title {
        font-size: 1.45rem;
    }

    .hc-content-card {
        padding: 14px 14px 12px;
        border-radius: 10px;
    }

    .hc-badge {
        font-size: .76rem;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .hc-org {
        font-size: .58rem;
        letter-spacing: 3px;
    }

    .hc-title {
        font-size: 1.25rem;
    }
}
/* ════════════════════════════════════════════════
   PRIZE SECTION
════════════════════════════════════════════════ */
.idx-prize {
    background: #f6f2f3;
    padding: 0 0 52px; /* top padding inherited from .idx-noti */
}

/* ── Card container ── */
.prz-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #c9c4c5;
    /*    box-shadow: 0 4px 24px rgba(200,16,46,.08);*/
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* ── Card Head ── */
.prz-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #c8102e 0%, #8f0b1f 100%);
}

.prz-card--team .prz-card__head {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

.prz-card__head-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.prz-card__head-title {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    margin-bottom: 3px;
}

.prz-card__head-sub {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
}

.prz-card__head-tag {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #c8102e;
    background: rgba(255,255,255,.92);
    border-radius: 20px;
    padding: 3px 12px;
    flex-shrink: 0;
}

.prz-card__head-tag--team {
    color: #7c3aed;
}

/* ── Card Body ── */
.prz-card__body {
    padding: 12px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Prize Row ── */
.prz-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid;
    transition: transform .18s, box-shadow .18s;
}

    .prz-row:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }

/* Gold tier */
.prz-row--gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9e7 100%);
    border-color: #fcd34d;
}
/* Silver tier */
.prz-row--silver {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #cbd5e1;
}
/* Bronze tier */
.prz-row--bronze {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fdba74;
}

/* ── Medal icon ── */
.prz-medal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    position: relative;
}

    .prz-medal::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 2px solid;
        opacity: .35;
    }

.prz-medal--gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 14px rgba(245,158,11,.45);
}

    .prz-medal--gold::after {
        border-color: #f59e0b;
    }

.prz-medal--silver {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
    box-shadow: 0 4px 14px rgba(100,116,139,.35);
}

    .prz-medal--silver::after {
        border-color: #94a3b8;
    }

.prz-medal--bronze {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 4px 14px rgba(249,115,22,.40);
}

    .prz-medal--bronze::after {
        border-color: #f97316;
    }

/* ── Prize info ── */
.prz-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prz-name {
    font-size: .92rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1;
}

.prz-qty {
    font-size: .70rem;
    font-weight: 600;
    color: #888;
    letter-spacing: .5px;
}

    .prz-qty i {
        margin-right: 3px;
    }

/* ── Amount ── */
.prz-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.prz-amount__val {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.5px;
}

.prz-amount__unit {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: .65;
}

.prz-amount--gold .prz-amount__val {
    color: #d97706;
}

.prz-amount--silver .prz-amount__val {
    color: #475569;
}

.prz-amount--bronze .prz-amount__val {
    color: #ea580c;
}

/* ── Card footer note ── */
.prz-card__foot {
    padding: 10px 22px 14px;
    font-size: .72rem;
    font-weight: 500;
    color: #999;
    line-height: 1.6;
    border-top: 1px solid #f5eef0;
}

    .prz-card__foot i {
        color: #c8102e;
        margin-right: 4px;
    }

.prz-card--team .prz-card__foot i {
    color: #7c3aed;
}

/* ── Total banner ── */
.prz-total-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 20px 28px;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #1e0a10 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    flex-wrap: wrap;
}

.prz-total-banner__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prz-total-banner__ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #c8102e, #8f0b1f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(200,16,46,.45);
}

.prz-total-banner__label {
    display: block;
    font-size: .80rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 3px;
}

.prz-total-banner__note {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: rgba(255,255,255,.35);
}

.prz-total-banner__val {
    font-family: var(--lc-font);
    font-size: clamp(1.6rem,3vw,2.4rem);
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 24px rgba(255,213,79,.55);
    white-space: nowrap;
    letter-spacing: -1px;
}

.prz-total-banner__unit {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,213,79,.65);
    margin-left: 6px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .prz-card__body {
        gap: 6px;
    }

    .prz-row {
        padding: 12px 12px;
        gap: 10px;
    }

    .prz-medal {
        width: 38px;
        height: 38px;
        font-size: .92rem;
    }

    .prz-amount__val {
        font-size: 1rem;
    }

    .prz-total-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 18px;
    }

    .prz-total-banner__val {
        font-size: 1.6rem;
    }
}
/* ══════════════════════════════════════════════════
   PRIZE SECTION — idx-prize
══════════════════════════════════════════════════ */
.idx-prize {
    background: #f6f2f3;
    padding: 0 0 56px;
}

/* ── Card shell ── */
.prz-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #f0e8ea;
    box-shadow: 0 4px 28px rgba(200,16,46,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.prz-card--team {
    border-color: #ede9fe;
    box-shadow: 0 4px 28px rgba(124,58,237,.07);
}

/* ── Card Header ── */
.prz-card__head,
.prz-card__head--team {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
}

.prz-card__head {
    background: linear-gradient(135deg, #b91c1c 0%, #c8102e 45%, #e02040 100%);
}

.prz-card__head--team {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #8b5cf6 100%);
}

/* Emblem ring */
.prz-emblem-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.prz-emblem-ring__ico {
    font-size: 1.3rem;
    color: #ffd54f;
    text-shadow: 0 0 12px rgba(255,213,79,.70);
}

.prz-emblem-ring--team .prz-emblem-ring__ico {
    color: #c4b5fd;
    text-shadow: 0 0 12px rgba(196,181,253,.60);
}

.prz-card__head-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prz-card__head-eyebrow {
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.prz-card__head-title {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: .3px;
}

.prz-card__head-count {
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #c8102e;
    background: rgba(255,255,255,.92);
    border-radius: 20px;
    padding: 4px 13px;
    flex-shrink: 0;
}

.prz-card__head-count--team {
    color: #7c3aed;
}

/* ── Card Body ── */
.prz-card__body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Prize Row ── */
.prz-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid;
    transition: transform .18s, box-shadow .18s;
}

    .prz-row:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }

.prz-row--gold {
    background: linear-gradient(135deg,#fffbeb,#fef9e7);
    border-color: #fcd34d;
}

.prz-row--silver {
    background: linear-gradient(135deg,#f8fafc,#f1f5f9);
    border-color: #cbd5e1;
}

.prz-row--bronze {
    background: linear-gradient(135deg,#fff7ed,#ffedd5);
    border-color: #fdba74;
}

/* Tier badge with emoji */
.prz-tier-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.prz-tier-badge--gold {
    background: linear-gradient(145deg,#fef3c7,#fde68a);
    box-shadow: 0 3px 12px rgba(245,158,11,.30);
}

.prz-tier-badge--silver {
    background: linear-gradient(145deg,#f1f5f9,#e2e8f0);
    box-shadow: 0 3px 12px rgba(100,116,139,.22);
}

.prz-tier-badge--bronze {
    background: linear-gradient(145deg,#ffedd5,#fed7aa);
    box-shadow: 0 3px 12px rgba(249,115,22,.28);
}

.prz-tier-badge__emoji {
    font-size: 1.6rem;
    line-height: 1;
}

/* Prize info */
.prz-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.prz-name {
    font-size: .92rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1;
}

.prz-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.prz-qty-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 2px 9px;
    border-radius: 20px;
}

    .prz-qty-tag i {
        font-size: .65rem;
    }

.prz-qty-tag--gold {
    background: rgba(245,158,11,.14);
    color: #b45309;
    border: 1px solid rgba(245,158,11,.30);
}

.prz-qty-tag--silver {
    background: rgba(100,116,139,.10);
    color: #475569;
    border: 1px solid rgba(100,116,139,.25);
}

.prz-qty-tag--bronze {
    background: rgba(249,115,22,.13);
    color: #c2410c;
    border: 1px solid rgba(249,115,22,.28);
}

.prz-unit-price {
    font-size: .65rem;
    font-weight: 600;
    color: #aaa;
    font-style: italic;
}

/* Amount column */
.prz-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.prz-amount__eq {
    font-size: .68rem;
    font-weight: 700;
    color: #bbb;
    white-space: nowrap;
}

.prz-amount__block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 6px 12px;
    border-radius: 8px;
    min-width: 110px;
}

.prz-amount__block--gold {
    background: linear-gradient(135deg,#fef3c7,#fde68a);
    border: 1px solid #fcd34d;
}

.prz-amount__block--silver {
    background: linear-gradient(135deg,#f1f5f9,#e2e8f0);
    border: 1px solid #cbd5e1;
}

.prz-amount__block--bronze {
    background: linear-gradient(135deg,#ffedd5,#fed7aa);
    border: 1px solid #fdba74;
}

.prz-amount__val {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.5px;
}

.prz-amount__block--gold .prz-amount__val {
    color: #92400e;
}

.prz-amount__block--silver .prz-amount__val {
    color: #334155;
}

.prz-amount__block--bronze .prz-amount__val {
    color: #9a3412;
}

.prz-amount__unit {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #212529;
    margin-top: 2px;
}

/* ── Subtotal bar ── */
.prz-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 12px;
    border-top: 1px solid #f5eef0;
}

.prz-subtotal--red {
    background: linear-gradient(90deg, rgba(200,16,46,.06), rgba(200,16,46,.02));
}

.prz-subtotal--purple {
    background: linear-gradient(90deg, rgba(124,58,237,.06), rgba(124,58,237,.02));
}

.prz-subtotal__left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.prz-subtotal--red .prz-subtotal__left {
    color: #c8102e;
}

.prz-subtotal--purple .prz-subtotal__left {
    color: #7c3aed;
}

.prz-subtotal__left i {
    font-size: .88rem;
}

.prz-subtotal__val {
    font-size: 1.05rem;
    font-weight: 900;
    white-space: nowrap;
}

.prz-subtotal--red .prz-subtotal__val {
    color: #c8102e;
}

.prz-subtotal--purple .prz-subtotal__val {
    color: #7c3aed;
}

.prz-subtotal__val small {
    font-size: .62rem;
    font-weight: 600;
    opacity: .65;
    margin-left: 3px;
}

/* ── Card footer note ── */
.prz-card__foot {
    padding: 10px 22px 14px;
    font-size: .72rem;
    font-weight: 500;
    color: #999;
    line-height: 1.6;
    border-top: 1px solid #f5eef0;
}

    .prz-card__foot i {
        color: #c8102e;
        margin-right: 4px;
    }

.prz-card--team .prz-card__foot i {
    color: #7c3aed;
}

.prz-card__foot strong {
    color: #555;
}

/* ══════════════════════════════════════════════════
   GRAND TOTAL BANNER
══════════════════════════════════════════════════ */
.prz-grand-banner {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 24px;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #1a0610 100%);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.28);
    position: relative;
}

/* Trophy decoration */
.prz-grand-banner__deco {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 6rem;
    line-height: 1;
    opacity: .06;
    pointer-events: none;
    user-select: none;
}

/* Breakdown section */
.prz-grand-banner__breakdown {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 28px;
    flex-wrap: wrap;
}

.prz-breakdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 160px;
    transition: background .2s;
}

    .prz-breakdown-item:hover {
        background: rgba(255,255,255,.09);
    }

.prz-breakdown-item__ico {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.prz-breakdown-item__label {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 3px;
}

.prz-breakdown-item__val {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 14px rgba(255,213,79,.45);
}

.prz-breakdown-plus {
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(255,255,255,.20);
    flex-shrink: 0;
}

/* Separator */
.prz-grand-banner__sep {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,.08);
    margin: 16px 0;
    flex-shrink: 0;
}

/* Total section */
.prz-grand-banner__total {
    padding: 22px 36px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.prz-grand-banner__total-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.40);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .prz-grand-banner__total-label i {
        color: #ffd54f;
        font-size: .75rem;
    }

.prz-grand-banner__total-val {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -1px;
    color: #ffd54f;
    text-shadow: 0 0 28px rgba(255,213,79,.60);
    line-height: 1;
    white-space: nowrap;
}

.prz-grand-banner__total-unit {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,213,79,.55);
    margin-left: 6px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .prz-grand-banner {
        flex-direction: column;
    }

    .prz-grand-banner__sep {
        width: 100%;
        height: 1px;
        margin: 0 16px;
        align-self: auto;
        width: auto;
    }

    .prz-grand-banner__total {
        padding: 16px 24px 22px;
        align-items: center;
    }

    .prz-grand-banner__breakdown {
        padding: 20px 20px 10px;
        justify-content: center;
    }

    .prz-grand-banner__deco {
        display: none;
    }
}

@media (max-width: 767px) {
    .prz-card__body {
        gap: 6px;
        padding: 10px 12px;
    }

    .prz-row {
        padding: 10px 12px;
        gap: 10px;
    }

    .prz-tier-badge {
        width: 40px;
        height: 40px;
    }

    .prz-tier-badge__emoji {
        font-size: 1.35rem;
    }

    .prz-amount__block {
        min-width: 90px;
        padding: 5px 9px;
    }

    .prz-amount__val {
        font-size: .88rem;
    }

    .prz-amount__eq {
        display: none;
    }

    .prz-breakdown-item {
        min-width: 130px;
    }
}
.dataTables_empty {
    display: none !important;
}
.error-wrap {
    min-height: calc(100vh - 300px);
}

/* ── PDF embed wrapper ── */
.modal-pdf-wrap {
    border: 1.5px solid rgba(200,16,46,.18);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(200,16,46,.08);
}

/* Header bar */
.modal-pdf-wrap__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: linear-gradient(135deg, #c8102e, #8f0b1f);
    color: #fff;
}

    .modal-pdf-wrap__header .fa-file-pdf-o {
        font-size: 1rem;
        flex-shrink: 0;
        color: #ffd54f;
    }

.modal-pdf-wrap__name {
    flex: 1;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.90);
}

.modal-pdf-wrap__dl {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    text-decoration: none;
    transition: background .18s;
}

    .modal-pdf-wrap__dl:hover {
        background: rgba(255,255,255,.28);
        color: #fff;
    }

/* iFrame PDF viewer */
.modal-pdf-wrap__embed {
    display: block;
    width: 100%;
    height: 720px;
    border: none;
    background: #f6f2f3;
}

@media (max-width: 767px) {
    .modal-pdf-wrap__embed {
        height: 320px;
    }
}
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 1200px;
    }
}