@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root {
    --bg-1: #0b1220;
    --bg-2: #0f172a;
    --bg-3: #080e1c;
    --panel: rgba(15, 23, 42, .82);
    --line: #1a2a44;
    --teal: #0ac8b9;
    --teal-deep: #0050d8;
    --gold: #c8aa6e;
    --gold-soft: #f0e6d2;
    --text: #f0e6d2;
    --text-dim: rgba(240, 230, 210, .62);
    --text-faint: rgba(240, 230, 210, .38);
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-pill: 999px;
    --shadow-soft: 0 18px 50px rgba(0, 0, 0, .45);
    --shadow-hard: 0 30px 80px rgba(0, 0, 0, .55);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
}

body, .mainbg {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-3);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

    /* ===== NỀN GAME: lÆ°á»›i lục giĂ¡c mờ + quầng sĂ¡ng vĂ ng/ngọc (tÄ©nh -> mượt) ===== */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
    }

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: radial-gradient(42% 38% at 16% 12%, rgba(200,170,110,.12), transparent 60%), radial-gradient(46% 42% at 86% 84%, rgba(10,200,185,.10), transparent 60%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2749%27%20viewBox%3D%270%200%2028%2049%27%3E%3Cpath%20fill%3D%27%23c8aa6e%27%20fill-opacity%3D%270.06%27%20fill-rule%3D%27evenodd%27%20d%3D%27M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z%27%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat, no-repeat, repeat;
        background-size: auto, auto, 48px 84px;
    }

@keyframes auroraDrift {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1);
    }

    50% {
        transform: translate3d(3%, 2%, 0) scale(1.12);
    }

    100% {
        transform: translate3d(-2%, 3%, 0) scale(1.06);
    }
}

::selection {
    background: rgba(10, 200, 185, .35);
    color: #fff;
}

/* Thanh cuá»™n chung */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

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

    *::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 8px;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: #24395c;
        }

/* ---------- Particles nền ---------- */
#particles {
    display: none;
}
/* tắt hiệu ứng đốm cũ, thay bằng nền aurora động */

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    opacity: .3;
    animation: float 15s linear infinite;
    will-change: transform;
}

@keyframes float {
    from {
        transform: translateY(100vh);
    }

    to {
        transform: translateY(-100px);
    }
}

/* ---------- Container chĂ­nh ---------- */
.main-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 18px;
}

/* ---------- Khung Hero ---------- */
.hero {
    width: 100%;
    max-width: 820px;
    position: relative;
    padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 48px);
    background: linear-gradient(180deg, var(--panel), rgba(8, 14, 28, .94));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(26, 42, 68, .9);
    box-shadow: var(--shadow-hard);
    /* (ÄĂ£ bỏ backdrop-filter: nĂ³ tạo "containing block" lĂ m popup position:fixed
     khĂ´ng nổi Ä‘Ăºng theo mĂ n hình khi cuá»™n) */
}

    .hero h1 {
        margin: 0 0 22px;
        font-size: clamp(28px, 5.2vw, 46px);
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -.5px;
        background: linear-gradient(100deg, #fff 0%, var(--gold-soft) 55%, var(--gold) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    }

    /* Alert (override nhẹ Bootstrap để hợp tĂ´ng) */
    .hero .alert {
        border: 1px solid rgba(255, 200, 61, .35);
        background: linear-gradient(135deg, rgba(255, 200, 61, .14), rgba(255, 200, 61, .05));
        color: #ffe9b0;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 15px;
        padding: 14px 18px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    /* ---------- Viền sĂ¡ng chạy quanh hero ---------- */
    .hero::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: var(--radius-lg);
        border: 2px solid transparent;
        background: linear-gradient(90deg, var(--teal), var(--gold-soft), var(--gold), var(--teal)) border-box;
        background-size: 300% 100%;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        animation: slideLight 4.2s linear infinite;
        will-change: background-position;
        filter: drop-shadow(0 0 5px rgba(10, 200, 185, .7)) drop-shadow(0 0 12px rgba(240, 230, 210, .35));
        opacity: .9;
    }

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

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

/* ---------- Countdown / subscribe ---------- */
.countdown {
    font-size: 40px;
    font-weight: 700;
    margin: 20px 0;
}

.subscribe {
    display: flex;
    gap: 10px;
}

/* ---------- NhĂ£n gợi Ă½ phĂ­a trĂªn nĂºt liĂªn hệ ---------- */
.contact-hint {
    position: relative;
    margin: 30px auto 0;
    color: var(--gold-soft);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    animation: bounceHint 1.8s ease-in-out infinite;
}

@keyframes bounceHint {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ---------- NĂºt Zalo / Messenger ---------- */
.floating-contact {
    position: relative;
    margin: 16px auto 0;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

    .floating-contact a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 220px;
        padding: 15px 20px;
        border-radius: var(--radius-pill);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        box-shadow: var(--shadow-soft);
        animation: pulse 2s infinite, bob 2.6s ease-in-out infinite;
        transition: transform .18s var(--ease), box-shadow .18s var(--ease);
        border: 1px solid rgba(255, 255, 255, .28);
        overflow: hidden;
    }

        /* Lá»›p sĂ¡ng lÆ°á»›t qua nĂºt khi hover */
        .floating-contact a::after {
            content: '';
            position: absolute;
            top: 0;
            left: -60%;
            width: 50%;
            height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
            transform: skewX(-20deg);
            transition: left .6s var(--ease);
        }

        .floating-contact a:hover::after {
            left: 120%;
        }

        .floating-contact a:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 22px 50px rgba(0, 0, 0, .6);
        }

        .floating-contact a:active {
            transform: scale(.97);
        }

.btn-main-line {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-sub-line {
    font-size: 11.5px;
    font-weight: 500;
    opacity: .92;
    letter-spacing: .2px;
    white-space: nowrap;
}

.floating-contact a img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, .12);
}

.floating-contact a .online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 7px rgba(74, 222, 128, .9);
    flex-shrink: 0;
    animation: blink 1.8s ease-in-out infinite;
}

.zalo-btn {
    background: linear-gradient(180deg, #2b8bff, #0050d8);
}

.messenger-btn {
    background: linear-gradient(180deg, #3aa0ff, #0062d6);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .5), var(--shadow-soft);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(255, 255, 255, 0), var(--shadow-soft);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), var(--shadow-soft);
    }
}

@keyframes bob {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -4px;
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

/* ---------- Responsive (liĂªn hệ / hero) ---------- */
@media (max-width: 768px) {
    .hero .alert {
        font-size: 14px;
        padding: 12px 14px;
    }

    .subscribe {
        flex-direction: column;
    }

    .floating-contact {
        width: 100%;
        gap: 10px;
    }

        .floating-contact a {
            flex: 1;
            width: auto;
            min-width: 150px;
            justify-content: center;
            padding: 14px;
        }

    .btn-main-line {
        font-size: 15px;
    }

    .btn-sub-line {
        font-size: 10.5px;
    }

    .contact-hint {
        font-size: 13.5px;
    }
}

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

/* ===== KHỐI GIỚI THIỆU (SEO) ===== */
.about-seo {
    margin: 30px auto 0;
    max-width: none;
    text-align: left;
    padding: 22px 24px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(200, 170, 110, .18);
    border-radius: var(--radius-md);
}

    .about-seo h2 {
        margin: 0 0 12px;
        font-size: 20px;
        font-weight: 700;
        color: var(--gold-soft);
        letter-spacing: .2px;
    }

    .about-seo p {
        margin: 0 0 12px;
        font-size: 14.5px;
        line-height: 1.75;
        color: var(--text-dim);
    }

        .about-seo p:last-child {
            margin-bottom: 0;
        }

    .about-seo strong {
        color: var(--gold-soft);
        font-weight: 600;
    }

@media (max-width: 768px) {
    .about-seo {
        padding: 18px 16px;
    }

        .about-seo h2 {
            font-size: 18px;
        }

        .about-seo p {
            font-size: 13.5px;
        }
}

/* ===== KHUNG CHAT AI (giữ nguyĂªn, tinh chỉnh nhẹ) ===== */
.chat-section {
    margin-top: 32px;
    text-align: left;
}

.chat-hint {
    text-align: center;
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: .3px;
}

.chat-name-wrap {
    display: flex;
    gap: 10px;
}

    .chat-name-wrap input {
        flex: 1;
        padding: 12px 16px;
        border-radius: var(--radius-pill);
        border: 1.5px solid var(--line);
        background: rgba(255, 255, 255, .06);
        color: var(--text);
        font-family: var(--font);
        font-size: 15px;
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }

        .chat-name-wrap input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(10, 200, 185, .18);
        }

        .chat-name-wrap input::placeholder {
            color: var(--text-faint);
        }

    .chat-name-wrap button {
        padding: 12px 24px;
        border-radius: var(--radius-pill);
        border: none;
        background: linear-gradient(135deg, var(--teal), var(--teal-deep));
        color: #fff;
        font-family: var(--font);
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        white-space: nowrap;
        transition: filter .2s, transform .15s;
    }

        .chat-name-wrap button:hover {
            filter: brightness(1.08);
        }

        .chat-name-wrap button:active {
            transform: scale(.96);
        }

#chatBox {
    flex-direction: column;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(90deg, var(--teal), var(--teal-deep));
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.chat-reset-btn {
    background: rgba(255, 255, 255, .2);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .15s;
}

    .chat-reset-btn:hover {
        background: rgba(255, 255, 255, .35);
    }

.chat-messages {
    height: 260px;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.chat-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--teal-deep), var(--teal));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg-bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, .09);
    color: var(--text);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(200, 170, 110, .2);
}

.typing-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    margin: 0 2px;
    animation: typingBounce .9s ease-in-out infinite;
}

    .typing-dot:nth-child(2) {
        animation-delay: .15s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: .30s;
    }

@keyframes typingBounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }
}

.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .15);
}

    .chat-input-row input {
        flex: 1;
        padding: 10px 14px;
        border-radius: var(--radius-pill);
        border: 1.5px solid var(--line);
        background: rgba(255, 255, 255, .07);
        color: var(--text);
        font-family: var(--font);
        font-size: 14px;
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }

        .chat-input-row input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(10, 200, 185, .15);
        }

        .chat-input-row input::placeholder {
            color: var(--text-faint);
        }

    .chat-input-row button {
        padding: 10px 20px;
        border-radius: var(--radius-pill);
        border: none;
        background: linear-gradient(135deg, var(--teal), var(--teal-deep));
        color: #fff;
        font-family: var(--font);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: filter .2s;
    }

        .chat-input-row button:hover {
            filter: brightness(1.08);
        }

        .chat-input-row button:disabled {
            opacity: .4;
            cursor: default;
        }

@media (max-width: 768px) {
    .chat-name-wrap input {
        font-size: 14px;
        padding: 10px 14px;
    }

    .chat-name-wrap button {
        padding: 10px 18px;
        font-size: 14px;
    }

    .chat-messages {
        height: 200px;
    }
}
/* ===== END CHAT ===== */

/* ===== PHĂ’NG CHAT CỘNG ĐỒNG ===== */
.community-chat-section {
    margin-top: 34px;
    text-align: left;
}

.community-chat-label {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
    margin-bottom: 16px;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    animation: commLabelPulse 2.2s ease-in-out infinite;
}

.comm-label-text {
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

/* NhĂ³m LIVE + lời mời */
.comm-label-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* HĂ ng nhập tĂªn + VĂ o phĂ²ng: chỉ hiện trong popup mobile */
.comm-label-join {
    display: none;
}
/* NĂºt "VĂ o phĂ²ng" trong popup mời (chỉ hiện trĂªn mobile) */
.comm-label-cta {
    display: none;
}

/* NĂºt Ä‘Ă³ng popup — chỉ hiện trĂªn mobile */
.comm-label-close {
    display: none;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

    .comm-label-close:hover {
        background: rgba(255, 255, 255, .3);
    }

@keyframes commLabelPulse {
    0%, 100% {
        box-shadow: 0 0 16px rgba(124, 58, 237, .35);
    }

    50% {
        box-shadow: 0 0 30px rgba(219, 39, 119, .5);
    }
}

/* NhĂ£n LIVE mĂ u đỏ nhấp nhĂ¡y để hĂºt mắt */
.comm-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 10px rgba(225, 29, 72, .65);
    flex-shrink: 0;
}

.comm-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: commBlink 1.2s ease-in-out infinite;
}

@media (max-width: 768px) {
    /* TrĂªn mobile: banner phĂ²ng chat thĂ nh POPUP nổi ở ĐÁY mĂ n hình (vì trang dĂ i),
     cĂ³ sẵn Ă´ nhập tĂªn + nĂºt VĂ o phĂ²ng; bấm ✕ để Ä‘Ă³ng. */
    .community-chat-label {
        position: fixed;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)); /* chừa khoảng cho tai thỏ / thanh gesture iPhone */
        top: auto;
        left: 12px;
        right: 12px;
        z-index: 1000;
        margin: 0;
        flex-direction: column;
        gap: 8px;
        font-size: 13px;
        padding: 12px 14px;
        cursor: pointer;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .28);
        background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%);
        box-shadow: 0 14px 36px rgba(124, 58, 237, .5), 0 6px 18px rgba(0, 0, 0, .4);
        animation: commLabelPopUp .5s var(--ease) both, commLabelFloat 2.6s ease-in-out infinite .5s;
    }

    .comm-label-text {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .comm-label-head {
        width: 100%;
        padding: 0 22px;
    }

    .comm-label-close {
        display: flex;
        top: 8px;
        right: 8px;
        transform: none;
    }

    /* NĂºt VĂ o phĂ²ng trong popup mời */
    .comm-label-cta {
        display: flex;
        width: 100%;
    }

        .comm-label-cta button {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            border: none;
            background: #fff;
            color: #7c2bd1;
            font-family: var(--font);
            font-weight: 800;
            font-size: 13.5px;
            cursor: pointer;
        }

            .comm-label-cta button:active {
                transform: scale(.97);
            }

    /* Ă” nhập tĂªn + nĂºt VĂ o phĂ²ng trong popup */
    .comm-label-join {
        display: flex;
        width: 100%;
        gap: 8px;
    }

        .comm-label-join input {
            flex: 1;
            min-width: 0;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, .4);
            background: rgba(0, 0, 0, .28);
            color: #fff;
            font-family: var(--font);
            font-size: 12.5px;
            font-weight: 600;
            outline: none;
        }

            .comm-label-join input::placeholder {
                color: rgba(255, 255, 255, .7);
                font-weight: 400;
            }

        .comm-label-join button {
            flex-shrink: 0;
            padding: 10px 16px;
            border-radius: 10px;
            border: none;
            background: #fff;
            color: #7c2bd1;
            font-family: var(--font);
            font-weight: 800;
            font-size: 12.5px;
            cursor: pointer;
        }

            .comm-label-join button:active {
                transform: scale(.96);
            }

    .community-chat-label.comm-label-hidden {
        display: none;
    }
}

@keyframes commLabelPopUp {
    0% {
        transform: translateY(140%);
        opacity: 0;
    }

    60% {
        transform: translateY(-5px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes commLabelFloat {
    0%, 100% {
        box-shadow: 0 14px 36px rgba(124, 58, 237, .5), 0 6px 18px rgba(0, 0, 0, .4);
    }

    50% {
        box-shadow: 0 16px 46px rgba(219, 39, 119, .62), 0 6px 18px rgba(0, 0, 0, .4);
    }
}

.community-name-wrap {
    display: flex;
    gap: 8px;
}

    .community-name-wrap input {
        flex: 1;
        min-width: 0;
        padding: 12px 16px;
        border-radius: var(--radius-pill);
        border: 1.5px solid var(--line);
        background: rgba(255, 255, 255, .07);
        color: var(--text);
        font-family: var(--font);
        font-size: 14px;
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }

        .community-name-wrap input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(10, 200, 185, .15);
        }

        .community-name-wrap input::placeholder {
            color: var(--text-faint);
        }

    .community-name-wrap button {
        padding: 12px 22px;
        border-radius: var(--radius-pill);
        border: none;
        background: linear-gradient(135deg, var(--teal), var(--teal-deep));
        color: #fff;
        font-family: var(--font);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        white-space: nowrap;
        transition: filter .2s, transform .15s;
    }

        .community-name-wrap button:hover {
            filter: brightness(1.08);
        }

        .community-name-wrap button:active {
            transform: scale(.96);
        }

#communityRoom {
    flex-direction: column;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(0, 0, 0, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--shadow-soft);
}

.community-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 15px;
    background: linear-gradient(90deg, var(--teal), var(--teal-deep));
}

.community-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.community-room-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.community-online-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #d7fff0;
    font-size: 12px;
    font-weight: 600;
}

.community-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, .8);
    animation: commBlink 1.4s ease-in-out infinite;
}

@keyframes commBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .2;
    }
}

.community-exit-btn {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    color: #fff;
    font-size: 11px;
    padding: 4px 11px;
    cursor: pointer;
    transition: background .15s;
}

    .community-exit-btn:hover {
        background: rgba(255, 255, 255, .3);
    }

/* NhĂ³m nĂºt bĂªn phải tiĂªu đề (XoĂ¡ tất cả + ThoĂ¡t) */
.community-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* NĂºt "XoĂ¡ tất cả" — chỉ admin thấy */
.community-resetall-btn {
    background: rgba(220, 38, 38, .85);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    color: #fff;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

    .community-resetall-btn:hover {
        background: rgba(220, 38, 38, 1);
    }

/* NĂºt "XoĂ¡" trĂªn từng tin nhắn — chỉ admin thấy */
.comm-admin-del {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(220, 38, 38, .4);
    background: rgba(220, 38, 38, .14);
    color: #fca5a5;
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .comm-admin-del:hover {
        background: rgba(220, 38, 38, .32);
        color: #fff;
    }

.community-messages {
    height: 460px;
    overflow-y: auto;
    overscroll-behavior: contain; /* cuá»™n trong khung chat khĂ´ng kĂ©o trĂ´i cả trang */
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    transition: height .25s ease;
}

.community-messages-expanded {
    height: 600px;
}

.community-loading,
.community-empty {
    color: var(--text-faint);
    font-size: 13px;
    text-align: center;
    margin: auto;
    font-style: italic;
}

/* Tin nhắn */
.comm-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 86%;
}

.comm-msg-me {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.comm-msg-other {
    align-self: flex-start;
}

.comm-msg-system {
    align-self: center;
    max-width: 100%;
}

/* Cá»™t ná»™i dung (tĂªn, bong bĂ³ng, cảm xĂºc, giờ) */
.comm-msg-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.comm-msg-me .comm-msg-content {
    align-items: flex-end;
}

.comm-msg-other .comm-msg-content {
    align-items: flex-start;
}

/* Avatar người chat (chỉ hiện cho người khĂ¡c, bĂªn trĂ¡i) */
.comm-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    user-select: none;
}

.comm-avatar-owner {
    background: linear-gradient(135deg, #ffe187, #eab308 45%, #b8860b);
    box-shadow: 0 0 10px rgba(234, 179, 8, .6);
    font-size: 16px;
}

.comm-name {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
    opacity: .78;
    padding: 0 2px;
}

.comm-msg-me .comm-name {
    color: var(--teal);
}

.comm-msg-other .comm-name {
    color: var(--gold);
}

.comm-bubble {
    padding: 9px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.comm-msg-me .comm-bubble {
    background: linear-gradient(135deg, var(--teal-deep), var(--teal));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.comm-msg-other .comm-bubble {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(200, 170, 110, .18);
    border-bottom-left-radius: 4px;
}

.comm-msg-system .comm-bubble {
    background: rgba(200, 170, 110, .1);
    border: 1px solid rgba(200, 170, 110, .2);
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    border-radius: 20px;
    padding: 5px 14px;
    box-shadow: none;
}

.comm-time {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 3px;
    padding: 0 4px;
}

/* Link trong tin nhắn */
.comm-link {
    color: #7dd3fc;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
    transition: color .15s;
}

    .comm-link:hover {
        color: #38bdf8;
    }
/* Trong bong bĂ³ng của chĂ­nh mình (nền xanh) link sĂ¡ng hÆ¡n cho dá»… đọc */
.comm-msg-me .comm-link {
    color: #e0f2fe;
}

    .comm-msg-me .comm-link:hover {
        color: #fff;
    }

/* ===== Ảnh trong tin nhắn ===== */
.comm-img-link {
    display: inline-block;
    margin-top: 2px;
    line-height: 0;
}

.comm-img {
    max-width: 230px;
    max-height: 250px;
    width: auto;
    height: auto;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .15s var(--ease);
}

    .comm-img:hover {
        transform: scale(1.02);
    }
/* Bong bĂ³ng chỉ chứa ảnh: bỏ nền cho gọn */
.comm-bubble-img {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Icon ná»™i tuyến (nĂºt trả lời kiểu Facebook) */
.comm-ico {
    vertical-align: -2px;
}

/* ===== NĂºt gá»­i ảnh ===== */
.community-input-row {
    align-items: center;
}

.community-image-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: rgba(255, 255, 255, .06);
    color: #4da8ff;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}

    .community-image-btn:hover {
        background: rgba(77, 168, 255, .16);
        border-color: #4da8ff;
    }

    .community-image-btn:active {
        transform: scale(.92);
    }

    .community-image-btn:disabled {
        opacity: .4;
        cursor: default;
    }

/* ===== Cảm xĂºc + Trả lời (kiểu Facebook) ===== */

/* TĂ³m tắt cảm xĂºc Ä‘Ă£ thả, hiển thị ngay dÆ°á»›i tin nhắn */
.comm-react-summary {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    width: fit-content;
}

.comm-sum-emoji {
    font-size: 12px;
    line-height: 1;
    margin-right: -2px;
}

.comm-sum-count {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
}

/* HĂ ng hĂ nh Ä‘á»™ng: chỉ cĂ²n nĂºt ThĂ­ch + Trả lời */
.comm-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.comm-react-wrap {
    position: relative;
    display: inline-flex;
}

/* NĂºt ThĂ­ch chĂ­nh + nĂºt Trả lời */
.comm-react-trigger,
.comm-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(200, 170, 110, .2);
    background: rgba(255, 255, 255, .06);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s var(--ease);
}

    .comm-react-trigger:hover,
    .comm-reply-btn:hover {
        background: rgba(255, 255, 255, .12);
        color: var(--text);
    }

    .comm-react-trigger:active {
        transform: scale(.94);
    }

.comm-trig-emoji {
    font-size: 13px;
    line-height: 1;
}

/* Đổi mĂ u nĂºt ThĂ­ch theo cảm xĂºc Ä‘Ă£ chọn */
.comm-react-trigger.active-like {
    color: #93c5fd;
    border-color: rgba(59,130,246,.5);
    background: rgba(59,130,246,.16);
}

.comm-react-trigger.active-heart {
    color: #fda4af;
    border-color: rgba(244,63,94,.5);
    background: rgba(244,63,94,.16);
}

.comm-react-trigger.active-haha {
    color: #fcd34d;
    border-color: rgba(245,158,11,.5);
    background: rgba(245,158,11,.16);
}

.comm-react-trigger.active-sad {
    color: #fde68a;
    border-color: rgba(234,179,8,.5);
    background: rgba(234,179,8,.16);
}

/* Bảng cảm xĂºc bung ra khi rĂª chuá»™t vĂ o nĂºt ThĂ­ch */
.comm-react-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    gap: 1px;
    padding: 5px 7px;
    background: #141d30;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.85);
    transform-origin: bottom left;
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
    z-index: 30;
    white-space: nowrap;
}
    /* Cầu nối vĂ´ hình: rĂª từ nĂºt lĂªn bảng khĂ´ng bị mất hover */
    .comm-react-popup::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 10px;
    }

.comm-react-wrap:hover .comm-react-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
/* Tin của mình canh phải -> bảng canh mĂ©p phải */
.comm-msg-me .comm-react-popup {
    left: auto;
    right: 0;
    transform-origin: bottom right;
}

.comm-react-opt {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 50%;
    transition: transform .14s var(--ease);
}

    .comm-react-opt:hover {
        transform: scale(1.3) translateY(-5px);
    }

    .comm-react-opt.active {
        background: rgba(255, 255, 255, .14);
    }

    /* NhĂ£n nhỏ trĂªn má»—i emoji khi rĂª chuá»™t */
    .comm-react-opt::before {
        content: attr(data-label);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        background: #000;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 10px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s;
    }

    .comm-react-opt:hover::before {
        opacity: .92;
    }

/* NĂºt trả lời — tĂ´ng vĂ ng kim nhẹ */
.comm-reply-btn {
    color: rgba(200, 170, 110, .85);
}

    .comm-reply-btn:hover {
        border-color: rgba(200, 170, 110, .5);
        color: var(--gold-soft);
    }

.comm-reply-quote {
    font-size: 11.5px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .05);
    border-left: 2px solid var(--teal);
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    max-width: 100%;
    word-break: break-word;
}

.comm-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(10, 200, 185, .09);
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
    color: var(--text);
}

.comm-reply-preview-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .comm-reply-preview-text b {
        color: var(--teal);
    }

.comm-reply-cancel {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 15px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

    .comm-reply-cancel:hover {
        color: var(--text);
    }

/* Input gửi tin nhắn */
.community-input-row {
    display: flex;
    gap: 8px;
    padding: 11px 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .18);
}

    .community-input-row input {
        flex: 1;
        min-width: 0;
        padding: 11px 16px;
        border-radius: var(--radius-pill);
        border: 1.5px solid var(--line);
        background: rgba(255, 255, 255, .07);
        color: var(--text);
        font-family: var(--font);
        font-size: 14px;
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }

        .community-input-row input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(10, 200, 185, .15);
        }

        .community-input-row input::placeholder {
            color: var(--text-faint);
        }

    .community-input-row button:not(.community-image-btn) {
        padding: 11px 22px;
        border-radius: var(--radius-pill);
        border: none;
        background: linear-gradient(135deg, var(--teal), var(--teal-deep));
        color: #fff;
        font-family: var(--font);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: filter .2s, transform .12s;
        white-space: nowrap;
    }

        .community-input-row button:not(.community-image-btn):hover {
            filter: brightness(1.08);
        }

        .community-input-row button:not(.community-image-btn):active {
            transform: scale(.96);
        }

        .community-input-row button:not(.community-image-btn):disabled {
            opacity: .35;
            cursor: default;
        }

@media (max-width: 768px) {
    .community-name-wrap input {
        font-size: 16px;
        padding: 11px 13px;
    }
        /* >=16px: chống iOS tá»± phĂ³ng to khi focus */
        .community-name-wrap input::placeholder {
            font-size: 12.5px;
        }

    .community-name-wrap button {
        padding: 11px 15px;
        font-size: 12.5px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .community-messages {
        height: 58vh;
        max-height: 440px;
        min-height: 300px;
    }

    .community-messages-expanded {
        height: 64vh;
        max-height: 520px;
    }

    .comm-bubble {
        font-size: 13.5px;
    }

    .comm-react-trigger, .comm-reply-btn {
        font-size: 10.5px;
        padding: 3px 9px;
    }

    .comm-react-opt {
        font-size: 19px;
    }

    /* --- HĂ ng nhập tin nhắn: gọn lại để khĂ´ng trĂ n / mất nĂºt Gá»­i --- */
    .community-input-row {
        gap: 6px;
        padding: 9px 9px;
    }

        .community-input-row input {
            font-size: 16px;
            padding: 10px 13px;
        }
        /* >=16px: chống iOS tá»± phĂ³ng to khi focus */
        .community-input-row button:not(.community-image-btn) {
            padding: 10px 15px;
            font-size: 13px;
        }

    .community-image-btn {
        width: 38px;
        height: 38px;
    }

        .community-image-btn svg {
            width: 20px;
            height: 20px;
        }

    /* --- TiĂªu đề phĂ²ng gọn hÆ¡n, khĂ´ng xuống dĂ²ng --- */
    .community-header {
        padding: 10px 12px;
    }

    .community-header-left {
        gap: 7px;
        min-width: 0;
    }

    .community-room-title {
        font-size: 13px;
        white-space: nowrap;
    }

    .community-online-badge {
        font-size: 11px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .community-exit-btn {
        font-size: 11px;
        padding: 5px 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Nền aurora: tắt chuyển Ä‘á»™ng trĂªn mobile cho mượt, trĂ¡nh "vỡ hình" khi cuá»™n/gõ phĂ­m */
    body::after {
        filter: none;
    }
}
/* ===== END PHĂ’NG CHAT CỘNG ĐỒNG ===== */

.comm-error {
    color: #fca5a5;
    font-size: 12.5px;
    text-align: center;
    margin: auto;
    padding: 11px 14px;
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 10px;
    line-height: 1.6;
}

/* ===== TIN NHẮN GHIM ===== */
.comm-pinned-collapse {
    flex-shrink: 0;
}

    .comm-pinned-collapse.is-open {
        max-height: none;
        overflow: visible;
    }

.comm-pinned-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(10, 200, 185, .1), rgba(200, 170, 110, .08));
    border-top: 2px solid rgba(10, 200, 185, .35);
    border-bottom: 1px solid rgba(200, 170, 110, .2);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background .15s;
}

    .comm-pinned-bar:hover {
        background: linear-gradient(135deg, rgba(10, 200, 185, .15), rgba(200, 170, 110, .13));
    }

.comm-pinned-bar-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.comm-pinned-bar-text {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text);
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-pinned-bar-chevron {
    font-size: 11px;
    color: var(--teal);
    white-space: nowrap;
    flex-shrink: 0;
}

.comm-pinned-close {
    margin-top: 8px;
    font-size: 11px;
    color: var(--teal);
    cursor: pointer;
    display: inline-block;
}

    .comm-pinned-close:hover {
        text-decoration: underline;
    }

.comm-pinned {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    background: rgba(10, 200, 185, .05);
    border-bottom: 1px solid rgba(200, 170, 110, .15);
    flex-shrink: 0;
}

.comm-pinned-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: .85;
}

.comm-pinned-body {
    flex: 1;
    min-width: 0;
}

.comm-pinned-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 7px;
    padding: 3px 12px 3px 10px;
    border-radius: 20px;
    color: #2a1d04;
    background: linear-gradient(135deg, #ffe187 0%, #eab308 30%, #b8860b 62%, #7c5510 100%);
    border: 1px solid rgba(255, 235, 175, .9);
    box-shadow: 0 0 8px rgba(234, 179, 8, .6), 0 0 16px rgba(184, 134, 11, .35), inset 0 1px 0 rgba(255, 255, 255, .75);
}

    .comm-pinned-name::before {
        content: "đŸ’Ž";
        font-size: 11px;
    }

.comm-pinned-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    opacity: .92;
}

@media (max-width: 768px) {
    .comm-pinned {
        padding: 11px 12px;
    }

    .comm-pinned-text {
        font-size: 12.5px;
    }

    .comm-pinned-bar {
        padding: 10px 12px;
    }

    .comm-pinned-bar-text {
        font-size: 11.5px;
    }
}
/* ===== END TIN NHẮN GHIM ===== */


/* ===== Polish nhỏ (mobile/desktop): bỏ Ă´ xĂ¡m khi chạm, con trỏ tay ===== */
.community-chat-section button,
.community-chat-label,
.comm-link,
.floating-contact a {
    -webkit-tap-highlight-color: transparent;
}

/* ===== Tối Æ°u mượt cho Ä‘iện thoại: GIá»® hiệu ứng Ă¡nh sĂ¡ng, chỉ lĂ m nhẹ quầng nền aurora ===== */
@media (max-width: 768px) {
    /* Quầng sĂ¡ng nền: vẫn hiển thị nhÆ°ng giảm Ä‘á»™ mờ (blur) để cuá»™n/gõ phĂ­m mượt hÆ¡n; khĂ´ng chạy Ä‘á»™ng */
    body::after {
        filter: none !important;
    }
}


/* ===== Khối giá»›i thiệu (H3) + CĂ¢u hỏi thường gặp (FAQ) ===== */
.about-seo h3 {
    margin: 18px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold-soft);
}

.seo-faq {
    margin: 18px auto 0;
    max-width: none;
    text-align: left;
    padding: 22px 24px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(200, 170, 110, .18);
    border-radius: var(--radius-md);
}

    .seo-faq h2 {
        margin: 0 0 14px;
        font-size: 20px;
        font-weight: 700;
        color: var(--gold-soft);
        letter-spacing: .2px;
    }

.faq-item {
    padding: 12px 0;
    border-top: 1px solid rgba(200, 170, 110, .14);
}

    .faq-item:first-of-type {
        border-top: none;
        padding-top: 0;
    }

.faq-q {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.faq-a {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dim);
}

@media (max-width: 768px) {
    .seo-faq {
        padding: 18px 16px;
    }

        .seo-faq h2 {
            font-size: 18px;
        }

    .faq-q {
        font-size: 14px;
    }

    .faq-a {
        font-size: 13.5px;
    }
}


/* ===== Huy hiệu kĂªnh chĂ­nh thức ===== */
.lms-official {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 14px auto 0;
    max-width: none;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(200, 170, 110, .08));
    border: 1px solid rgba(16, 185, 129, .35);
    border-radius: var(--radius-md);
}

.lms-official-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 800;
    font-size: 12.5px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(16, 185, 129, .45);
}

.lms-official-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold-soft);
}

@media (max-width: 768px) {
    .lms-official {
        font-size: 12px;
        padding: 9px 13px;
    }

    .lms-official-text {
        font-size: 12px;
    }
}


/* ===== NĂºt nổi 2 gĂ³c (mobile + PC): trĂ¡i = VĂ o phĂ²ng, phải = liĂªn hệ Zalo/Messenger ===== */
.community-chat-label {
    display: none !important;
}

@keyframes lmsCycleA {
    0%,42% {
        opacity: 1
    }

    54%,96% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes lmsCycleB {
    0%,42% {
        opacity: 0
    }

    54%,96% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.lms-dock {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    height: 56px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    animation: lmsDockIn .45s ease both;
}

@keyframes lmsDockIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.lms-dock-left {
    left: 14px;
}

.lms-dock-right {
    right: 14px;
}

body.lms-in-room .lms-dock-left {
    display: none !important;
}

.lms-contact {
    position: relative;
}

.lms-contact-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.3);
    background: linear-gradient(180deg, #2b8bff, #0050d8);
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    cursor: pointer;
}

.lms-ic {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 50%;
}

.lms-ic-zalo {
    animation: lmsCycleA 4.5s ease-in-out infinite;
}

.lms-ic-mess {
    animation: lmsCycleB 4.5s ease-in-out infinite;
}

.lms-contact-close {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    opacity: 0;
}

.lms-contact.lms-open .lms-ic {
    opacity: 0 !important;
    animation: none;
}

.lms-contact.lms-open .lms-contact-close {
    opacity: 1;
}

.lms-contact-options {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.lms-contact.lms-open .lms-contact-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lms-opt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2b8bff, #0050d8);
    color: #fff;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

    .lms-opt img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: contain;
        background: rgba(255,255,255,.14);
    }

    .lms-opt:nth-child(2) {
        background: linear-gradient(180deg, #3aa0ff, #0062d6);
    }

.lms-room {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%);
    color: #fff;
    font-family: var(--font);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(124,58,237,.5);
}

.lms-room-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 0 7px #4ade80;
}

.lms-room, .lms-contact-toggle, .lms-opt {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .lms-room:hover, .lms-contact-toggle:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow: 0 12px 26px rgba(0,0,0,.5);
    }

    .lms-room:active, .lms-contact-toggle:active {
        transform: scale(.95);
    }

    .lms-opt:hover {
        transform: translateX(-3px);
        filter: brightness(1.06);
    }
/* VĂ o phĂ²ng xong: ẩn nĂºt "VĂ o phĂ²ng", giữ nĂºt Zalo; trĂªn mobile dời lĂªn gĂ³c trĂªn-phải để khĂ´ng che Ă´ gá»­i tin */
@media (max-width: 768px) {
    body.lms-in-room .lms-dock-right {
        bottom: auto;
        top: calc(12px + env(safe-area-inset-top, 0px));
    }

    body.lms-in-room .lms-contact-options {
        bottom: auto;
        top: calc(100% + 10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lms-ic-zalo, .lms-ic-mess {
        animation: none;
    }

    .lms-ic-mess {
        opacity: 0;
    }
}

/* ===== Thanh Ä‘iều hÆ°á»›ng trĂªn cĂ¹ng: Trang Chủ / Lịch Sá»­ Mua HĂ ng ===== */
.lms-topnav {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch; /* 2 nĂºt cao bằng nhau */
    justify-content: center;
    gap: 12px;
    max-width: 480px; /* gom giữa, cĂ¢n đối */
    margin: 0 auto;
    padding: 18px 14px 4px;
}

.lms-topbtn {
    flex: 1 1 0; /* chia đều -> 2 nĂºt RỘNG BẰNG NHAU */
    min-width: 0;
    max-width: 230px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* nội dung canh giữa */
    gap: 8px;
    height: 46px; /* cĂ¹ng chiều cao chĂ­nh xĂ¡c */
    padding: 0 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1.5px solid transparent; /* cĂ¹ng Ä‘á»™ dĂ y viền 2 nĂºt */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), filter .18s var(--ease);
}

    .lms-topbtn:active {
        transform: scale(.97);
    }

/* Trang Chủ — vĂ ng kim đặc */
.lms-topbtn-primary {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    color: #2a1d04;
    box-shadow: 0 10px 28px rgba(200, 170, 110, .35);
}

    .lms-topbtn-primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
        color: #2a1d04;
        box-shadow: 0 14px 34px rgba(200, 170, 110, .5);
    }

/* Lịch Sử Mua Hà ng — viền và ng, hover đổ nền và ng */
.lms-topbtn-ghost {
    background: rgba(255, 255, 255, .04);
    color: var(--gold-soft);
    border: 1.5px solid rgba(200, 170, 110, .42);
}

    .lms-topbtn-ghost:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, var(--gold-soft), var(--gold));
        color: #2a1d04;
        border-color: transparent;
        box-shadow: 0 14px 34px rgba(200, 170, 110, .5);
    }

@media (max-width: 480px) {
    .lms-topnav {
        gap: 8px;
        padding: 14px 10px 2px;
    }

    .lms-topbtn {
        height: 44px;
        padding: 0 12px;
        font-size: 13.5px;
    }
}


/* ===== HEADER MENU (trang bảo trì) — tĂ´ng vĂ ng kim đồng bá»™ site chĂ­nh ===== */
.lms-maint-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: #000;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .6);
}

.lms-maint-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* Logo + tĂªn thÆ°Æ¡ng hiệu */
.lms-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.lms-brand-logo {
    height: 42px;
    width: auto;
    border-radius: 8px;
    transition: filter .3s ease;
}

.lms-brand:hover .lms-brand-logo {
    filter: drop-shadow(0 0 8px rgba(250, 189, 3, .55));
}

.lms-brand-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1;
    background: linear-gradient(100deg, #fff7e0 0%, #ffd24a 55%, #fabd03 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .lms-brand-name b {
        -webkit-text-fill-color: #fabd03;
        color: #fabd03;
    }

/* Menu Ä‘iều hÆ°á»›ng bĂªn phải */
.lms-maint-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .lms-maint-nav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: var(--radius-pill);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        color: var(--gold-soft);
        border: 1.5px solid rgba(200, 170, 110, .42);
        background: rgba(255, 255, 255, .04);
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    }

        .lms-maint-nav a:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
            color: #2a1d04;
            border-color: transparent;
            box-shadow: 0 10px 24px rgba(200, 170, 110, .45);
        }

        .lms-maint-nav a:active {
            transform: scale(.97);
        }
        /* NĂºt nổi bật (CTA Zalo) — vĂ ng kim đặc */
        .lms-maint-nav a.is-primary {
            background: linear-gradient(180deg, #ffd24a, #f0a800);
            color: #1a1205;
            border-color: transparent;
            box-shadow: 0 6px 16px rgba(250, 189, 3, .4);
        }

            .lms-maint-nav a.is-primary:hover {
                filter: brightness(1.06);
                box-shadow: 0 10px 22px rgba(250, 189, 3, .55);
            }

        /* NĂºt "Lịch Sá»­ Mua HĂ ng": vĂ ng kim đặc -> hover đổ mĂ u XANH ngọc + vệt sĂ¡ng lÆ°á»›t (đồng bá»™ trang chĂ­nh) */
        .lms-maint-nav a.is-history {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #ffd24a, #f0a800);
            color: #1a1205;
            border-color: transparent;
            box-shadow: 0 6px 16px rgba(250, 189, 3, .4);
        }
            /* Vệt sĂ¡ng trắng lÆ°á»›t qua khi rĂª chuá»™t */
            .lms-maint-nav a.is-history::before {
                content: '';
                position: absolute;
                top: 0;
                left: -85%;
                width: 55%;
                height: 100%;
                background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
                transform: skewX(-22deg);
                transition: left .6s ease;
                pointer-events: none;
                z-index: 2;
            }

            .lms-maint-nav a.is-history:hover::before {
                left: 135%;
            }
            /* Hover: đổ mĂ u XANH ngọc + glow xanh đồng tĂ´ng */
            .lms-maint-nav a.is-history:hover {
                transform: translateY(-2px);
                background: linear-gradient(180deg, #44dba8, #1fb389);
                color: #06291e;
                border-color: transparent;
                box-shadow: 0 10px 24px rgba(56, 211, 159, .5);
            }

@media (max-width: 768px) {
    .lms-maint-header-inner {
        padding: 8px 12px;
    }

    .lms-brand-logo {
        height: 34px;
    }

    .lms-brand-name {
        font-size: 16px;
    }

    .lms-maint-nav {
        gap: 6px;
    }

        .lms-maint-nav a {
            padding: 7px 12px;
            font-size: 12.5px;
        }
}

@media (max-width: 480px) {
    .lms-brand-name {
        display: none;
    }
    /* mĂ n nhỏ: chỉ giữ logo, nhường chá»— cho 2 nĂºt Ä‘iều hÆ°á»›ng */
    .lms-maint-header-inner {
        gap: 8px;
    }

    .lms-maint-nav a {
        padding: 7px 11px;
        font-size: 12px;
    }
}
/* ===== END HEADER MENU (trang bảo trì) ===== */