/* Da loc luat khong dung (08/10/2026). */

:root {
    color-scheme: light;
    --ink: #173b52;
    --muted: #617c8c;
    --purple-950: #123b59;
    --purple-800: #155f86;
    --purple-700: #087fae;
    --purple-100: #e4f4fb;
    --gold: #ffc768;
    --gold-dark: #a96916;
    --surface: #fff;
    --surface-soft: #f6fcff;
    --line: #d7eaf2;
    --shadow: 0 12px 34px rgba(22, 76, 105, .1);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body.modern-site {
    margin: 0;
    background:
        radial-gradient(ellipse at 12% 3%, rgba(103, 188, 222, .16), transparent 28rem),
        radial-gradient(ellipse at 91% 9%, rgba(107, 190, 222, .22), transparent 32rem),
        #eff8fc;
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

body.modern-site a {
    color: inherit;
    text-decoration: none;
}

body.modern-site button,
body.modern-site input,
body.modern-site select,
body.modern-site textarea {
    font: inherit;
}

body.modern-site img {
    max-width: 100%;
}

body.modern-site :where(a, button, summary, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
}

body.modern-site :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid rgba(8, 127, 174, .42);
    outline-offset: 3px;
}

@keyframes nro-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-shell {
    width: min(1080px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    transform: translateY(-150%);
    border-radius: 8px;
    background: #fff;
    color: var(--purple-950) !important;
}

.skip-link:focus {
    transform: translateY(0);
}

.age-notice {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 5px 12px;
    color: #5c7a8c;
    font-size: 10px;
    text-align: center;
}

.age-badge {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.site-header {
    position: relative;
    z-index: 20;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: linear-gradient(115deg, #123b59, #176b93 70%, #258bb2);
    box-shadow: 0 14px 35px rgba(18, 59, 89, .2);
    color: #fff;
}

.site-header-main {
    display: flex;
    min-height: 84px;
    align-items: center;
    gap: 24px;
    padding: 12px 22px;
}

.site-brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.site-brand img {
    display: block;
    width: 145px;
    max-height: 58px;
    object-fit: contain;
    transition: transform .24s ease, filter .24s ease;
}

.site-brand:hover img {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 5px 7px rgba(255, 255, 255, .24));
}

.site-navigation {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.site-navigation a {
    padding: 9px 11px;
    border-radius: 9px;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 13px;
    font-weight: 650;
    white-space: normal;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.site-navigation a:hover,
.site-navigation a[aria-current="page"] {
    background: rgba(255, 255, 255, .13);
    color: #fff !important;
}

.site-navigation a:hover {
    transform: translateY(-2px);
}

.site-account {
    flex: 0 0 auto;
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22, 76, 105, .16);
}

.button:active,
.quick-links a:active,
.home-section-link:active {
    transform: scale(.97);
}

.button-primary {
    background: linear-gradient(135deg, #ffd683, #ffbd59);
    box-shadow: 0 8px 20px rgba(229, 163, 62, .24);
    color: #173b52 !important;
}

.button-outline {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .09);
    color: #fff !important;
}

.button-glass {
    border-color: rgba(255, 255, 255, .48);
    background: rgba(255, 255, 255, .11);
    color: #fff !important;
}

.button-zalo {
    position: relative;
    overflow: hidden;
    border-color: rgba(175, 218, 255, .65);
    background: linear-gradient(135deg, #0068ff, #0052ce);
    box-shadow: 0 6px 18px rgba(0, 104, 255, .35);
    color: #fff !important;
    animation: zalo-glow 3s ease-in-out infinite;
}

.button-zalo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .3) 50%, transparent 75%);
    transform: translateX(-150%);
    pointer-events: none;
    animation: zalo-shine 4.5s ease-in-out infinite;
}

.button-zalo:hover,
.button-zalo:focus-visible {
    background: linear-gradient(135deg, #0062ef, #004bc4);
    box-shadow: 0 8px 28px rgba(0, 104, 255, .65), 0 0 0 4px rgba(95, 180, 255, .2);
    animation: none;
}

body.modern-site .button-zalo:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@keyframes zalo-glow {
    0%, 100% {
        box-shadow: 0 6px 18px rgba(0, 104, 255, .35), 0 0 0 0 rgba(95, 180, 255, 0);
    }

    50% {
        box-shadow: 0 6px 26px rgba(0, 104, 255, .6), 0 0 0 4px rgba(95, 180, 255, .18);
    }
}

@keyframes zalo-shine {
    0%, 55% {
        transform: translateX(-150%);
    }

    85%, 100% {
        transform: translateX(150%);
    }
}

.account-menu {
    position: relative;
}

.account-menu > summary {
    display: flex;
    max-width: 190px;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

.account-menu > summary::-webkit-details-marker,
.admin-menu > summary::-webkit-details-marker {
    display: none;
}

.account-menu > summary img {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    object-fit: cover;
    transition: transform .2s ease, box-shadow .2s ease;
}

.account-menu[open] > summary img,
.account-menu > summary:hover img {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}

.account-menu > summary span {
    overflow: hidden;
    max-width: 112px;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: grid;
    width: 238px;
    max-height: min(70vh, 560px);
    gap: 3px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--ink);
}

.account-menu-panel > a,
.admin-menu > a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.account-menu-panel > a:hover,
.admin-menu > a:hover {
    background: var(--purple-100);
}

.account-menu-panel > a,
.admin-menu > a {
    transition: background .16s ease, transform .16s ease;
}

.account-menu-panel > a:hover,
.admin-menu > a:hover {
    transform: translateX(3px);
}

.account-menu-balance {
    padding: 8px 10px;
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 700;
}

.admin-menu {
    border-top: 1px solid var(--line);
    padding-top: 6px;
}

.admin-menu > summary {
    padding: 9px 10px;
    color: var(--purple-700);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
}

.admin-menu > a {
    padding-left: 18px;
}

.account-menu-panel .account-logout {
    margin-top: 4px;
    background: #fff0ef;
    color: #a83737;
    font-weight: 700;
}

.quick-links {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.quick-links a {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .79) !important;
    font-size: 12px;
    font-weight: 650;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.quick-links a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
}

.quick-links .quick-play {
    background: rgba(255, 200, 104, .17);
    color: #ffda91 !important;
}

.site-main {
    min-height: 420px;
}

.site-page {
    padding: 25px 0 38px;
}

.site-footer {
    margin: 0 0 26px;
    padding: 30px 34px 16px;
    border-radius: var(--radius);
    background: linear-gradient(120deg, #123b59, #176b93);
    box-shadow: var(--shadow);
    color: #eee8f5;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 25px;
}

.footer-brand img {
    width: 130px;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
}

.footer-grid p {
    max-width: 320px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}

.footer-grid h2 {
    margin: 0 0 10px;
    color: #ffda91;
    font-size: 14px;
}

.footer-grid section > a:not(.footer-brand) {
    display: block;
    width: fit-content;
    margin: 5px 0;
    color: rgba(255, 255, 255, .76) !important;
    font-size: 13px;
}

.footer-grid section > a:hover {
    color: #fff !important;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
}

.home-hero {
    position: relative;
    display: flex;
    min-height: 390px;
    align-items: center;
    overflow: hidden;
    padding: 42px clamp(24px, 6vw, 78px);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 24px;
    background: #155f86;
    box-shadow: var(--shadow);
    color: #fff;
}

.home-hero-content {
    animation: nro-fade-up .6s ease-out both;
}

.home-hero-image,
.home-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero-image {
    object-fit: cover;
    object-position: center;
}

.home-hero-shade {
    background: linear-gradient(90deg, rgba(13, 48, 75, .94) 0%, rgba(19, 77, 108, .77) 43%, rgba(19, 77, 108, .12) 100%);
}

.home-hero-content {
    position: relative;
    z-index: 1;
    max-width: 570px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-hero .eyebrow {
    color: #ffdc9c;
}

.home-hero h1 {
    margin: 12px 0;
    font-size: clamp(32px, 4.5vw, 52px);
    letter-spacing: -.012em;
    line-height: 1.14;
}

.home-hero h1 span {
    color: #ffd17b;
}

.home-hero-content > p {
    max-width: 460px;
    margin: 0 0 23px;
    color: rgba(255, 255, 255, .84);
    font-size: 16px;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-hero-note {
    margin-top: 22px;
    color: rgba(255, 255, 255, .66);
    font-size: 11px;
}

.home-article-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    padding: 28px 0 14px;
}

.home-article-section {
    min-width: 0;
}

.home-article-heading {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 9px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--line);
}

.home-article-heading h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.home-section-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    color: var(--purple-700);
    font-size: 13px;
    font-weight: 700;
    transition: color .18s ease, transform .18s ease;
}

.home-section-link:hover {
    color: var(--purple-950);
}

.home-article-empty {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
}

.community-banner h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.012em;
    line-height: 1.2;
}

.about-article,
.giftcode-post,
.bxh-box,
.auth-container {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 7px 23px rgba(22, 76, 105, .06);
}

.modern-site .box_list_chuyenmuc > .box_midss,
.modern-site .box_list_chuyenmuc > .box_detai,
.modern-site .box_list_chuyenmuc > .box,
.modern-site .admin-box,
.modern-site .account-action-page > .box_detai,
.modern-site #box_forums > .box_list_chuyenmuc > .box_detai {
    padding: clamp(16px, 3vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 7px 23px rgba(22, 76, 105, .06);
}

.post-rich-content {
    color: #405f70;
}

.post-rich-content > :first-child {
    margin-top: 0;
}

.post-rich-content a {
    color: var(--purple-700) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-rich-content img {
    height: auto;
    border-radius: 10px;
}

.community-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 15px;
    padding: 22px 26px;
    border: 1px solid #d3eaf4;
    border-radius: 17px;
    background: linear-gradient(100deg, #eaf7fc, #f7fbfd);
}

.community-banner h2 {
    font-size: 21px;
}

.community-banner p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.page-section-title,
.ranking-heading .page-section-title,
.giftcode-title {
    margin: 0 0 18px;
    color: var(--ink);
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.012em;
}

.box_list_chuyenmuc {
    width: 100%;
}

.forum-feature-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 16px;
}

.forum-feature-links > a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.forum-feature-links img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.forum-feature-links span {
    display: grid;
}

.forum-feature-links strong {
    color: var(--ink);
    font-size: 14px;
}

.forum-feature-links small {
    color: var(--muted);
    font-size: 12px;
}

.forum-welcome {
    margin: 0 0 15px;
    padding: 12px 15px;
    border: 1px solid #eddfa9;
    border-radius: 12px;
    background: #fff9e8;
    color: #795919;
}


.forum-pagination-bar {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

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

.pagination-link {
    display: grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}

.pagination-current {
    background: var(--purple-700);
    transform: translateX(3px);
    color: #fff !important;
}

.footer-grid section > a:not(.footer-brand) {
    transition: color .16s ease, transform .16s ease;
}

.giftcode-panel {
    display: grid;
    gap: 14px;
}

.giftcode-post {
    padding: 18px;
}

.giftcode-post-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    border-bottom: 1px solid #f0ebf5;
}

.giftcode-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    object-fit: cover;
}

.giftcode-author-info {
    display: grid;
}

.giftcode-author {
    font-size: 13px;
    font-weight: 700;
}

.giftcode-meta {
    display: flex;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
}

.giftcode-code {
    margin-left: auto;
    padding: 7px 12px;
    border: 1px dashed #b9dce9;
    border-radius: 9px;
    background: #f0f9fc;
    color: var(--purple-700);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.giftcode-post-content {
    padding-top: 13px;
}

.giftcode-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.giftcode-item {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #d3eaf4;
    border-radius: 9px;
    background: #f4fbfe;
    color: #315d73;
    font-size: 12px;
}

.giftcode-item-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
    image-rendering: pixelated;
}

.ranking-heading {
    margin-bottom: 15px;
}

.bxh-box {
    overflow: hidden;
    margin: 0 0 17px;
}

.bxh-box h2 {
    margin: 0;
    padding: 13px 17px;
    background: linear-gradient(100deg, #155f86, #258bb2);
    color: #fff;
    font-size: 15px;
    text-align: left;
}

.ranking-table-wrap {
    overflow-x: auto;
}

.ranking-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    color: #36586b;
    font-size: 13px;
    text-align: center;
}

.ranking-table th {
    padding: 12px 10px;
    background: #e8f5fa;
    color: #155f86;
    font-weight: 700;
}

.ranking-table td {
    padding: 10px;
    border-bottom: 1px solid #eee9f3;
}

.ranking-table tbody tr:nth-child(even) {
    background: #f8fcfe;
}

.ranking-position {
    width: 56px;
    color: var(--purple-700);
    font-weight: 700;
}

.ranking-position-1 {
    color: #bd8117;
}

.ranking-position-2 {
    color: #737582;
}

.ranking-position-3 {
    color: #a5663f;
}

.ranking-avatar {
    width: 62px;
}

.ranking-avatar img {
    display: block;
    width: 42px;
    height: 42px;
    margin: auto;
    border: 1px solid #cce6f0;
    border-radius: 9px;
    object-fit: cover;
}

.ranking-contribution-table {
    table-layout: fixed;
}

.ranking-contribution-table th:nth-child(1),
.ranking-contribution-table td:nth-child(1) { width: 8%;
}

.ranking-contribution-table th:nth-child(2),
.ranking-contribution-table td:nth-child(2) { width: 12%;
}

.ranking-contribution-table th:nth-child(3),
.ranking-contribution-table td:nth-child(3) { width: 25%;
}

.ranking-contribution-table th:nth-child(4),
.ranking-contribution-table td:nth-child(4) { width: 55%;
}

.ranking-contribution-table .ranking-character-name { white-space: nowrap;
}

/* Bang top co them cot "Số điểm" (5 cot: TOP, Avatar, Ten, Diem, Phan thuong). */
.ranking-score-table th:nth-child(1),
.ranking-score-table td:nth-child(1) { width: 7%;
}

.ranking-score-table th:nth-child(2),
.ranking-score-table td:nth-child(2) { width: 10%;
}

.ranking-score-table th:nth-child(3),
.ranking-score-table td:nth-child(3) { width: 20%;
}

.ranking-score-table th:nth-child(4),
.ranking-score-table td:nth-child(4) { width: 11%;
}

.ranking-score-table th:nth-child(5),
.ranking-score-table td:nth-child(5) { width: 52%;
}

.ranking-score {
    color: #155f86;
    font-weight: 700;
}

/* Tieu de cot ten: may tinh "Tên nhân vật", dien thoai (<=640px) chi "Tên". */
.ranking-th-gon {
    display: none;
}

.ranking-reward-cell { text-align: left; line-height: 1.7;
}

.ranking-reward-item {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    margin: 3px 6px 3px 0;
    padding: 5px 9px;
    border: 1px solid #d3eaf4;
    border-radius: 9px;
    background: #f4fbfe;
    color: #315d73;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

/* Qua xep luoi: so cot (--cot) do PHP tinh de chia deu 2 hang, cac cot thang hang. */
.ranking-reward-grid {
    display: grid;
    grid-template-columns: repeat(var(--cot, 3), max-content);
    justify-content: center;
    gap: 6px;
}

/* O qua gian het be rong cot: cac o cung cot bang nhau, khong con o "x1" nho le loi. */
.ranking-reward-grid .ranking-reward-item {
    width: auto;
    margin: 0;
}

.ranking-reward-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
    image-rendering: pixelated;
}

.ranking-reward-empty {
    color: var(--muted);
    font-size: 12px;
}

/* Ghi chu tren bang top khi dang hien ket qua dot truoc. */
.ranking-note {
    margin: 0;
    padding: 9px 17px;
    border-bottom: 1px solid #e3f0f6;
    background: #f3fafd;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.about-article {
    padding: clamp(18px, 4vw, 32px);
}

.about-article-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.about-article-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.post-rich-content {
    color: #4f485a;
    overflow-wrap: anywhere;
}

.post-rich-content h1,
.post-rich-content h2,
.post-rich-content h3 {
    color: var(--ink);
    line-height: 1.3;
}

.return-bar {
    margin: 0 0 12px;
}

.return-bar a {
    color: var(--purple-700) !important;
    font-weight: 700;
}

.auth-container {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(18px, 4vw, 32px);
}

.auth-container h3 {
    margin-top: 0;
    color: var(--ink);
}

.auth-container {
    max-width: 510px;
}

.auth-container h1 {
    margin: 5px 0;
    font-size: 27px;
    letter-spacing: -.012em;
}

.auth-description,
.auth-note {
    color: var(--muted);
    font-size: 13px;
}

.auth-note {
    margin: 17px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.auth-note i {
    color: #43866c;
}

.auth-container form {
    display: grid;
    gap: 13px;
}

.modern-site .form-control,
.modern-site input.form-control,
.modern-site textarea.form-control,
.modern-site select.form-control,
.modern-site input[type="text"],
.modern-site input[type="password"],
.modern-site input[type="email"],
.modern-site input[type="number"],
.modern-site input[type="date"],
.modern-site input[type="file"],
.modern-site select,
.modern-site textarea {
    max-width: 100%;
    padding: 9px 11px;
    border: 1px solid #ddd5e8;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
}

.modern-site textarea {
    min-height: 110px;
}

.auth-container table {
    width: 100%;
    border-collapse: collapse;
}

.auth-container td {
    padding: 7px;
    vertical-align: top;
}

.auth-container input {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #ddd5e8;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--ink);
}

.auth-container input:focus {
    border-color: #278bb4;
    box-shadow: 0 0 0 3px rgba(39, 139, 180, .14);
}

.form-field {
    display: grid;
    gap: 6px;
    color: #554a65;
    font-size: 13px;
    font-weight: 700;
}

.password-field {
    position: relative;
    display: flex;
}

.password-field input {
    padding-right: 48px !important;
}

.password-field .toggle-password {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    width: 36px;
    min-height: 34px;
    place-items: center;
    padding: 5px;
    transform: translateY(-50%);
    background: transparent;
    color: var(--muted);
}

.password-field .toggle-password:hover {
    background: var(--purple-100);
    color: var(--purple-700);
}

.auth-container .password-field .toggle-password:hover,
.auth-container .password-field .toggle-password:active {
    transform: translateY(-50%);
    box-shadow: none;
}

.eye-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.eye-icon-closed {
    display: none;
}

.toggle-password.is-visible .eye-icon-open {
    display: none;
}

.toggle-password.is-visible .eye-icon-closed {
    display: block;
}

.auth-container button,
.modern-site .w3-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    background: var(--purple-700);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.auth-container button:hover,
.modern-site .w3-button:hover {
    background: var(--purple-800);
    box-shadow: 0 6px 16px rgba(22, 76, 105, .17);
    transform: translateY(-1px);
}

.auth-container button:active,
.modern-site .w3-button:active {
    transform: scale(.98);
}

.modern-site .w3-red { background: #a9454e;
}

.modern-site .box_midss,
.modern-site .box_detai {
    color: var(--ink);
}

.vps-page .post-rich-content,
.vps-page .about-article {
    min-height: 220px;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

:root {
    --minimum-text-size: 15px;
}

body.modern-site :where(*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.bi):not(svg):not(path)) {
    font-size: max(var(--minimum-text-size), 1em) !important;
}

body.modern-site .age-notice,
body.modern-site .age-notice * {
    font-size: 10px !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
            scroll-behavior: auto;
        }
    
    body.modern-site *,
    body.modern-site *::before,
    body.modern-site *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: .01ms !important;
        }
}

@media (max-width: 980px) {
    .site-header-main {
            flex-wrap: wrap;
            gap: 12px;
        }
    
    .site-navigation {
            display: none;
            order: 5;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            flex-basis: 100%;
            justify-content: initial;
            padding-top: 9px;
            border-top: 1px solid rgba(255, 255, 255, .13);
        }
    
    .site-navigation.is-open {
            display: grid;
        }
    
    .site-account {
            margin-left: auto;
        }
}

@media (max-width: 640px) {
    :root {
            --minimum-text-size: 13px;
        }
    
    body.modern-site {
            font-size: 13px;
        }
    
    body.modern-site .age-notice,
    body.modern-site .age-notice * {
            font-size: 8px !important;
        }
    
    .site-shell {
            width: min(100% - 18px, 1080px);
        }
    
    .age-notice {
            justify-content: flex-start;
            font-size: 8px;
            text-align: left;
        }
    
    .age-badge {
            width: 18px;
            height: 18px;
            font-size: 8px;
        }
    
    .site-header {
            border-radius: 14px;
        }
    
    .site-header-main {
            min-height: 66px;
            gap: 8px;
            padding: 10px 9px;
        }
    
    .site-brand img {
            width: 90px;
            max-height: 45px;
        }
    
    .site-account {
            margin-left: 0;
        }
    
    .account-login {
            min-height: 34px;
            padding: 6px 8px;
            font-size: 11px;
        }
    
    .account-menu > summary {
            gap: 5px;
        }
    
    .account-menu > summary img {
            width: 30px;
            height: 30px;
        }
    
    .account-menu > summary span {
            max-width: 75px;
            font-size: 11px;
        }
    
    .site-navigation {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
    .site-navigation a {
            padding: 9px;
            font-size: 12px;
        }
    
    .home-article-heading {
            min-height: 46px;
            margin-bottom: 8px;
        }
    
    .home-article-heading h2 {
            font-size: 18px;
        }
    
    .quick-links {
            justify-content: flex-start;
            overflow-x: auto;
            padding: 7px 9px 9px;
            white-space: nowrap;
        }
    
    .quick-links a {
            flex: 0 0 auto;
            padding: 5px 8px;
            font-size: 11px;
        }
    
    .site-page {
            padding: 14px 0 25px;
        }
    
    .home-hero {
            min-height: 380px;
            align-items: flex-end;
            padding: 27px 20px;
            border-radius: 17px;
        }
    
    .home-hero-image {
            object-position: 62% center;
        }
    
    .home-hero-shade {
            background: linear-gradient(0deg, rgba(13, 48, 75, .96) 0%, rgba(19, 77, 108, .68) 72%, rgba(19, 77, 108, .1) 100%);
        }
    
    .home-hero h1 {
            font-size: 34px;
            line-height: 1.14;
        }
    
    .home-hero-content > p {
            font-size: 14px;
        }
    
    .button {
            min-height: 39px;
            padding: 8px 12px;
            font-size: 13px;
        }
    
    .forum-feature-links {
            grid-template-columns: 1fr;
        }
    
    .home-article-sections {
            grid-template-columns: 1fr;
            gap: 20px;
            padding-top: 22px;
        }
    
    .community-banner {
            align-items: flex-start;
            flex-direction: column;
            padding: 19px;
        }
    
    .giftcode-post {
            padding: 13px;
        }
    
    .giftcode-code {
            max-width: 46%;
            font-size: 11px;
        }
    
    /* Bang co phan thuong vua man hinh dien thoai (truoc ep 640px nen phai keo ngang, qua bi cat mep). */
    .ranking-contribution-table {
            min-width: 0;
        }

    .ranking-contribution-table th:nth-child(1),
    .ranking-contribution-table td:nth-child(1) { width: 9%; }
    .ranking-contribution-table th:nth-child(2),
    .ranking-contribution-table td:nth-child(2) { width: 12%; }
    .ranking-contribution-table th:nth-child(3),
    .ranking-contribution-table td:nth-child(3) { width: 21%; }
    .ranking-contribution-table th:nth-child(4),
    .ranking-contribution-table td:nth-child(4) { width: 58%; }

    .ranking-score-table th:nth-child(1),
    .ranking-score-table td:nth-child(1) { width: 7%; }
    .ranking-score-table th:nth-child(2),
    .ranking-score-table td:nth-child(2) { width: 11%; }
    .ranking-score-table th:nth-child(3),
    .ranking-score-table td:nth-child(3) { width: 17%; }
    .ranking-score-table th:nth-child(4),
    .ranking-score-table td:nth-child(4) { width: 11%; }
    .ranking-score-table th:nth-child(5),
    .ranking-score-table td:nth-child(5) { width: 54%; }

    .ranking-contribution-table .ranking-avatar img {
            width: 30px;
            height: 30px;
        }

    .ranking-th-day-du {
            display: none;
        }

    .ranking-th-gon {
            display: inline;
        }

    .ranking-contribution-table .ranking-character-name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .ranking-reward-grid {
            gap: 3px;
        }

    .ranking-reward-grid .ranking-reward-item {
            gap: 3px;
            padding: 3px 4px;
            font-size: 11px;
        }

    .ranking-reward-grid .ranking-reward-icon {
            width: 16px;
            height: 16px;
            flex-basis: 16px;
        }
    
    .ranking-table th,
    .ranking-table td {
            padding: 8px 6px;
        }
    
    .footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }
    
    .footer-grid section:first-child {
            grid-column: 1 / -1;
        }
    
    .site-footer {
            padding: 22px 18px 14px;
        }
    
    .footer-bottom {
            flex-direction: column;
            gap: 4px;
        }
    
    .auth-container table {
            display: block;
            overflow-x: auto;
        }
}

.home-article-sections {
    grid-template-columns: 1fr;
    gap: 26px;
}

/* =====================================================================
   Trang chu: Tin tuc moi + Gioi thieu thu gon, xep 2 cot canh nhau (08/10/2026).
   The nho hon the o trang Dien dan: anh 230x140, chu nho lai.
   ===================================================================== */

.home-article-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

/* Man hep: xep doc 1 cot, the van gon; dien thoai: anh nho ben trai, khong tran ngang. */

@media (max-width: 980px) {
    .home-article-sections {
            grid-template-columns: 1fr;
            gap: 20px;
        }
}

/* "Xem tat ca": co hieu ung khi re chuot / bam (nen nhat hien ra, mui ten truot sang phai). */

.home-section-link {
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--purple-800);
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.home-section-link .bi {
    display: inline-block;
    transition: transform .18s ease;
}

.home-section-link:hover,
.home-section-link:focus-visible {
    color: #08749f;
    background: rgba(8, 116, 159, .12);
    box-shadow: 0 0 0 1px rgba(8, 116, 159, .18);
    outline: none;
}

.home-section-link:hover .bi,
.home-section-link:focus-visible .bi {
    transform: translateX(4px);
}

.home-section-link:active {
    transform: scale(.96);
}

/* Bo thanh ngang duoi tieu de "Tin tuc moi" / "Gioi thieu" (08/10/2026). */

.home-article-heading {
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Trang chu: "Tin tuc moi" va "Gioi thieu" la 2 muc rieng, xep doc (yeu cau 08/10/2026). */

.home-article-sections {
    grid-template-columns: 1fr;
    gap: 26px;
}

/* =====================================================================
   Header tren dien thoai / man hep (08/10/2026):
   - Hang tren (logo, Danh muc, Admin): giu nguyen nhu cu.
   - Hang link (Choi ngay, Android...): hien du 2 hang x 3 cot, khong con cuon ngang.
   ===================================================================== */

@media (max-width: 640px) {
    .quick-links {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            overflow: visible;
            padding: 8px 9px 10px;
            white-space: normal;
        }
    
    .quick-links a {
            flex: none;
            justify-content: center;
            min-width: 0;
            padding: 6px 4px;
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
        }
}

/* =====================================================================
   Trang bai viet: khung binh luan (08/10/2026). Truoc day nam trong nro-bang.css (da bo)
   nen o nhap, nut emoji va bang emoji hien tran lan khong co kieu.
   ===================================================================== */

.post-comments {
    margin-top: 14px;
}

.post-comment-list {
    display: grid;
    gap: 8px;
}

.post-comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    color: var(--ink);
    background: #eafaff;
    border: 1px solid #c2e3ee;
    border-radius: 10px;
}

.post-comment-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.post-comment-main {
    flex: 1 1 auto;
    min-width: 0;
}

.post-comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 1px 0 6px;
}

.post-comment-author {
    color: #075d83;
    font-size: 14px;
}

.post-comment-time {
    color: #6794a5;
    font-size: 12px;
}

.post-comment-content {
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.box_comment_new {
    position: relative;
    margin-top: 14px;
}

.comment-error {
    margin-bottom: 6px;
    color: #b3261e;
    font-size: 13px;
}

.comment-error:empty {
    display: none;
}

.comment-composer {
    display: flex;
    position: relative;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;
    background: #f5fdff;
    border: 1px solid #c2e3ee;
    border-radius: 12px;
}

.comment-composer:focus-within {
    border-color: #087da8;
    box-shadow: 0 0 0 3px rgba(8, 125, 168, .15);
}

.comment-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 160px;
    padding: 9px 10px;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    background: transparent;
    border: 0;
    outline: none;
    resize: vertical;
}

.emoji-button {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 20px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.emoji-button:hover {
    background: rgba(8, 125, 168, .1);
}

.comment-submit {
    flex: 0 0 auto;
    padding: 9px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: #087da8;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .16s ease, transform .16s ease;
}

.comment-submit:hover {
    background: #066a8f;
}

.comment-submit:active {
    transform: scale(.97);
}

.emoji-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 20;
    max-width: min(340px, 100%);
    max-height: 200px;
    padding: 6px;
    overflow: auto;
    background: #fff;
    border: 1px solid #c2e3ee;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(16, 83, 111, .18);
}

.emoji-picker span {
    display: inline-block;
    margin: 3px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker span:hover {
    transform: scale(1.2);
}

/* Bo nut "Danh muc": tren man hinh hep menu hien san, 3 cot x 2 hang (08/10/2026). */

@media (max-width: 980px) {
    .site-navigation {
            display: grid;
        }
    
    .site-account {
            margin-left: auto;
        }
}

/* =====================================================================
   QUAN TRI WEBSITE (08/10/2026): bo cuc co danh sach ben trai + kieu chung cho cac
   trang /users/* va /invite (truoc day khong co kieu nao, chi con chu tran).
   ===================================================================== */

.site-page--admin {
    padding-top: 18px;
}

.admin-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.admin-sidebar {
    position: sticky;
    top: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(22, 76, 105, .06);
}

.admin-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 4px 8px;
    padding: 4px 6px 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    border-bottom: 1px solid #e1eef4;
}

.admin-sidebar nav {
    display: grid;
    gap: 2px;
}

.admin-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: #355d73;
    font-size: 14px;
    font-weight: 600;
    border-radius: 9px;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.admin-sidebar nav a .bi {
    width: 18px;
    color: #6794a5;
    text-align: center;
    transition: color .15s ease;
}

.admin-sidebar nav a:hover {
    color: #08749f;
    background: rgba(8, 116, 159, .09);
    transform: translateX(2px);
}

.admin-sidebar nav a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, #0a7aa6, #1e90b8);
    box-shadow: 0 4px 12px rgba(8, 116, 159, .28);
}

.admin-sidebar nav a[aria-current="page"] .bi {
    color: #fff;
}

.admin-content {
    min-width: 0;
}

.admin-menu-link {
    color: #08749f !important;
    font-weight: 700;
}

/* ---- Kieu chung cho trang quan ly / tai khoan ---- */

.site-page--manage h2,
.site-page--manage .title,
.site-page--manage .upload-title,
.site-page--manage .checkdata-title,
.site-page--manage .page-section-title,
.site-page--manage .account-action-title {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.site-page--manage h3,
.site-page--manage .upload-list-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 750;
}

.site-page--manage h4 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.site-page--manage .box,
.site-page--manage .admin-box,
.site-page--manage .upload-post,
.site-page--manage .post-list,
.site-page--manage .data-check,
.site-page--manage .bg-content,
.site-page--manage .box_list_chuyenmuc,
.site-page--manage .ls-box {
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 18px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(22, 76, 105, .05);
}

.site-page--manage .box > :last-child {
    margin-bottom: 0;
}

.site-page--manage .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.site-page--manage .msg {
    margin: 0 0 14px;
    padding: 11px 14px;
    color: #0d5c3a;
    font-weight: 600;
    background: #e6f7ee;
    border: 1px solid #b6e3c9;
    border-radius: 10px;
}

.site-page--manage .return-bar {
    margin: 0 0 12px;
}

.site-page--manage .section-divider {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid #dcebf2;
}

/* Khoi thong ke */

.site-page--manage .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.site-page--manage .stat-box,
.site-page--manage .stat {
    padding: 16px 18px;
    background: linear-gradient(135deg, #f1fbff, #e3f5fb);
    border: 1px solid #cfe3ee;
    border-radius: 14px;
}

.site-page--manage .stat-box p {
    margin: 0;
    color: #0d6389;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

/* Keep the admin dashboard styled even if a cached header omits management wrappers. */

.site-page > .admin-dashboard,
.admin-content > .admin-dashboard {
    width: 100%;
    max-width: none;
    padding: 0;
}

.site-page > .admin-dashboard > h2,
.admin-content > .admin-dashboard > h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.25;
}

.site-page > .admin-dashboard > .box,
.admin-content > .admin-dashboard > .box {
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 18px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(22, 76, 105, .05);
}

.site-page > .admin-dashboard .stat-grid,
.admin-content > .admin-dashboard .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.site-page > .admin-dashboard .stat-box,
.admin-content > .admin-dashboard .stat-box {
    min-width: 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f1fbff, #e3f5fb);
    border: 1px solid #cfe3ee;
    border-radius: 14px;
}

.site-page > .admin-dashboard .stat-box h4,
.admin-content > .admin-dashboard .stat-box h4 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.site-page > .admin-dashboard .stat-box p,
.admin-content > .admin-dashboard .stat-box p {
    margin: 0;
    color: #0d6389;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.site-page > .admin-dashboard .box h3,
.admin-content > .admin-dashboard .box h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 18px;
}

.site-page > .admin-dashboard .admin-revenue-filter,
.admin-content > .admin-dashboard .admin-revenue-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.site-page > .admin-dashboard select,
.site-page > .admin-dashboard input,
.admin-content > .admin-dashboard select,
.admin-content > .admin-dashboard input {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
}

.site-page > .admin-dashboard button,
.site-page > .admin-dashboard input[type="submit"],
.admin-content > .admin-dashboard button,
.admin-content > .admin-dashboard input[type="submit"] {
    min-height: 40px;
    padding: 8px 14px;
    color: #fff;
    font: inherit;
    background: linear-gradient(135deg, #0a7aa6, #1e90b8);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.site-page > .admin-dashboard table,
.admin-content > .admin-dashboard table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.site-page > .admin-dashboard table th,
.admin-content > .admin-dashboard table th {
    padding: 10px 12px;
    color: #355d73;
    text-align: left;
    white-space: nowrap;
    background: #eaf6fb;
    border-bottom: 1px solid #cfe3ee;
}

.site-page > .admin-dashboard table td,
.admin-content > .admin-dashboard table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e3eff5;
}

/* Bang */

.site-page--manage table,
.site-page--manage .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.site-page--manage table th {
    padding: 10px 12px;
    color: #355d73;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    background: #eaf6fb;
    border-bottom: 1px solid #cfe3ee;
}

.site-page--manage table th:first-child {
    border-top-left-radius: 10px;
}

.site-page--manage table th:last-child {
    border-top-right-radius: 10px;
}

.site-page--manage table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #e3eff5;
}

.site-page--manage table tbody tr:hover td {
    background: #f6fbfd;
}

.site-page--manage .ls-table-scroll,
.site-page--manage .feedback-admin-table-wrap {
    overflow-x: hidden;
}

.feedback-admin-page .feedback-admin-table-wrap {
    overflow-x: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.feedback-admin-page table.table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.feedback-admin-page .feedback-admin-col-time { width: 14%; }

.feedback-admin-page .feedback-admin-col-account { width: 12%; }

.feedback-admin-page .feedback-admin-col-content { width: 36%; }

.feedback-admin-page .feedback-admin-col-image { width: 8%; }

.feedback-admin-page .feedback-admin-col-status { width: 15%; }

.feedback-admin-page .feedback-admin-col-actions { width: 15%; }

.feedback-admin-page table.table th {
    padding: 12px 10px;
    color: #355d73;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    background: #eaf6fb;
    border-bottom: 1px solid #cfe3ee;
}

.feedback-admin-page table.table th:first-child {
    border-top-left-radius: 10px;
}

.feedback-admin-page table.table th:last-child {
    border-top-right-radius: 10px;
}

.feedback-admin-page table.table td {
    padding: 12px 10px;
    vertical-align: top;
    line-height: 1.55;
    border-bottom: 1px solid #e3eff5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.feedback-admin-page table.table tbody tr:last-child td {
    border-bottom: 0;
}

.feedback-admin-page table.table tbody tr:hover td {
    background: #f6fbfd;
}

.feedback-admin-page .feedback-admin-preview {
    margin-top: 4px;
    color: var(--muted);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

/* Phan hoi da gui (01/11/2026): 1 dong ngan duoi noi dung gop y. */
.feedback-admin-page .feedback-admin-reply-preview {
    margin-top: 6px;
    padding: 4px 8px;
    color: #0a6d93;
    font-size: 13px;
    background: #eaf5fb;
    border-left: 3px solid #1e90b8;
    border-radius: 0 6px 6px 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.feedback-admin-page .feedback-admin-reply-preview[hidden] {
    display: none;
}

.feedback-admin-page .feedback-admin-reply-label {
    font-weight: 600;
}

.feedback-admin-page .feedback-admin-notice {
    margin: 0 0 12px;
    padding: 10px 12px;
    color: #8a5a00;
    background: #fdf3dc;
    border: 1px solid #f1d9a3;
    border-radius: 10px;
}

.feedback-admin-popup-reply-title {
    margin-top: 14px;
}

.feedback-admin-popup-content {
    text-align: left;
}

.feedback-admin-popup-details {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.feedback-admin-popup-title {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
}

.feedback-admin-popup-message {
    max-height: min(55vh, 520px);
    overflow: auto;
    padding: 12px 14px;
    color: var(--ink);
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #f6fbfd;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.feedback-admin-popup-image {
    display: block;
    max-width: 100%;
    max-height: 360px;
    margin: 14px auto 0;
    object-fit: contain;
    border-radius: 10px;
}

.feedback-admin-page .feedback-admin-status {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #cbdde7;
    border-radius: 9px;
}

.feedback-admin-page .feedback-admin-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feedback-admin-page .feedback-admin-actions button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 10px;
    color: #fff;
    font: inherit;
    font-size: 13px;
    background: linear-gradient(135deg, #0a7aa6, #1e90b8);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

@media (max-width: 640px) {
    .feedback-admin-page table.table,
    .feedback-admin-page table.table tbody,
    .feedback-admin-page table.table tr,
    .feedback-admin-page table.table td {
            display: block;
            width: 100%;
        }
    
    .feedback-admin-page table.table colgroup,
    .feedback-admin-page table.table thead {
            display: none;
        }
    
    .feedback-admin-page table.table tbody tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            border-bottom: 1px solid #cfe3ee;
        }
    
    .feedback-admin-page table.table td {
            display: block;
            width: auto;
            min-width: 0;
            padding: 10px;
        }
    
    .feedback-admin-page table.table td:nth-child(3),
    .feedback-admin-page table.table td:nth-child(6) {
            grid-column: 1 / -1;
        }
    
    .feedback-admin-page table.table td::before {
            display: block;
            margin-bottom: 4px;
            color: #355d73;
            font-size: 12px;
            font-weight: 700;
        }
    
    .feedback-admin-page table.table td:nth-child(1)::before { content: "Thời gian"; }
    
    .feedback-admin-page table.table td:nth-child(2)::before { content: "Tài khoản"; }
    
    .feedback-admin-page table.table td:nth-child(3)::before { content: "Tiêu đề và nội dung"; }
    
    .feedback-admin-page table.table td:nth-child(4)::before { content: "Ảnh"; }
    
    .feedback-admin-page table.table td:nth-child(5)::before { content: "Trạng thái"; }
    
    .feedback-admin-page table.table td:nth-child(6)::before { content: "Hành động"; }
    
    .feedback-admin-page .feedback-admin-actions {
            flex-direction: row;
        }
}

.feedback-admin-page .feedback-admin-actions button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.feedback-admin-page .feedback-admin-actions .feedback-admin-delete {
    background: #c93a3a;
}

.site-page--manage .empty-cell,
.site-page--manage .muted-value {
    color: var(--muted);
}

/* Form */

.site-page--manage label {
    display: inline-block;
    margin-bottom: 5px;
    color: #355d73;
    font-size: 14px;
    font-weight: 650;
}

.site-page--manage input[type="text"],
.site-page--manage input[type="password"],
.site-page--manage input[type="number"],
.site-page--manage input[type="search"],
.site-page--manage input[type="email"],
.site-page--manage input[type="url"],
.site-page--manage input[type="file"],
.site-page--manage input:not([type]),
.site-page--manage select,
.site-page--manage textarea,
.site-page--manage .form-control {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.site-page--manage input:focus,
.site-page--manage select:focus,
.site-page--manage textarea:focus {
    border-color: #087da8;
    box-shadow: 0 0 0 3px rgba(8, 125, 168, .15);
}

.site-page--manage textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

.site-page--manage .form-group,
.site-page--manage .upload-field {
    margin: 0 0 14px;
}

.site-page--manage .form-group .form-control,
.site-page--manage .upload-field input,
.site-page--manage .upload-field select {
    width: 100%;
}

/* Nut bam */

.site-page--manage button,
.site-page--manage input[type="submit"],
.site-page--manage .btn,
.site-page--manage .btn-submit,
.site-page--manage .btn-preview,
.site-page--manage .qltk-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 16px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: #087da8;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.site-page--manage button:hover,
.site-page--manage input[type="submit"]:hover,
.site-page--manage .btn:hover,
.site-page--manage .btn-submit:hover {
    background: #066a8f;
    box-shadow: 0 4px 12px rgba(8, 116, 159, .25);
}

.site-page--manage button:active,
.site-page--manage .btn:active {
    transform: scale(.97);
}

.site-page--manage button:disabled {
    color: #8aa9b8;
    background: #e0ecf2;
    box-shadow: none;
    cursor: not-allowed;
}

.site-page--manage .btn-preview,
.site-page--manage .qltk-btn-light {
    color: #08749f;
    background: #e3f3f9;
}

.site-page--manage .btn-preview:hover {
    color: #fff;
}

.site-page--manage .btn-danger,
.site-page--manage .post-action--delete,
.site-page--manage .about-action--delete,
.site-page--manage .feedback-admin-delete {
    color: #fff;
    background: #c93a3a;
}

.site-page--manage .btn-danger:hover,
.site-page--manage .post-action--delete:hover,
.site-page--manage .about-action--delete:hover,
.site-page--manage .feedback-admin-delete:hover {
    background: #a82e2e;
}

.site-page--manage .post-action,
.site-page--manage .about-action {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    color: #08749f;
    font-size: 13px;
    font-weight: 700;
    background: #e3f3f9;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

.site-page--manage .post-action:hover,
.site-page--manage .about-action:hover {
    color: #fff;
    background: #087da8;
}

.site-page--manage .post-action--delete,
.site-page--manage .about-action--delete {
    color: #fff;
}

.site-page--manage .about-actions,
.site-page--manage .feedback-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bg-content > section {
    box-sizing: border-box;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(22, 76, 105, .05);
}

.vps-content-editor {
    width: 100%;
    max-width: 1000px;
    margin: 24px auto;
    padding: 20px;
}

.vps-content-editor .title {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.vps-content-editor > p {
    color: var(--muted);
    line-height: 1.6;
}

.vps-content-editor label {
    display: inline-block;
    margin: 0 0 5px;
    color: #355d73;
    font-size: 14px;
    font-weight: 700;
}

.vps-content-editor input:not([type="hidden"]),
.vps-content-editor textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 9px 12px;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
}

.vps-content-editor textarea {
    min-height: 180px;
}

.vps-content-editor .cke {
    box-sizing: border-box;
    max-width: 100%;
    border-color: #bcd9e6;
    border-radius: 9px;
    overflow: hidden;
}

.vps-content-editor .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: #087da8;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.vps-content-editor .btn-submit:hover {
    background: #066a8f;
    transform: translateY(-1px);
}

.bg-content > section > .title,
.bg-content > section > h2 {
    color: var(--ink);
    line-height: 1.3;
}

.bg-content > section > p {
    color: var(--muted);
    line-height: 1.6;
}

.bg-content > section label {
    display: inline-block;
    margin: 0 0 5px;
    color: #355d73;
    font-size: 14px;
    font-weight: 700;
}

.bg-content > section input:not([type="hidden"]),
.bg-content > section textarea {
    box-sizing: border-box;
    max-width: 100%;
    padding: 9px 12px;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
}

.bg-content > section textarea {
    width: 100%;
    min-height: 180px;
}

.bg-content > section .cke {
    box-sizing: border-box;
    max-width: 100%;
    border-color: #bcd9e6;
    border-radius: 9px;
    overflow: hidden;
}

.bg-content > section .btn-submit,
.bg-content > section .btn-preview,
.bg-content > section .about-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    color: #08749f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: #e3f3f9;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}

.bg-content > section .btn-submit {
    color: #fff;
    background: #087da8;
}

.bg-content > section .about-action--delete {
    color: #fff;
    background: #c93a3a;
}

.bg-content > section .btn-submit:hover,
.bg-content > section .btn-preview:hover,
.bg-content > section .about-action:hover {
    color: #fff;
    background: #066a8f;
    transform: translateY(-1px);
}

.bg-content > section .about-action--delete:hover {
    background: #a82e2e;
}

.bg-content > section table.table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    font-size: 14px;
    text-align: left;
}

.bg-content > section table.table th {
    padding: 12px;
    color: #355d73;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    background: #eaf6fb;
    border-bottom: 1px solid #cfe3ee;
}

.bg-content > section table.table th:first-child {
    border-top-left-radius: 10px;
}

.bg-content > section table.table th:last-child {
    border-top-right-radius: 10px;
}

.bg-content > section table.table td {
    padding: 12px;
    vertical-align: middle;
    line-height: 1.5;
    border-bottom: 1px solid #e3eff5;
}

.bg-content > section table.table tbody tr:last-child td {
    border-bottom: 0;
}

.bg-content > section table.table tbody tr:hover td {
    background: #f6fbfd;
}

.bg-content > section .about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.bg-content > section .about-actions form {
    margin: 0;
}

.bg-content > section .about-actions button {
    font: inherit;
}

.body > .admin-box,
.ls-wrap > .ls-box,
.data-check,
.qltk-page #box_forums {
    box-sizing: border-box;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 7px 23px rgba(22, 76, 105, .06);
}

.body > .admin-box {
    margin: 20px auto;
    padding: 20px;
}

.body > .admin-box h2,
.ls-box > h2,
.data-check > .checkdata-title,
.qltk-page .page-section-title {
    color: var(--ink);
    font-weight: 700;
    line-height: 1.3;
}

.body > .admin-box h2,
.ls-box > h2,
.data-check > .checkdata-title,
.qltk-page .page-section-title {
    margin: 0 0 16px;
    font-size: 22px;
}

.body > .admin-box .search,
.body > .admin-box .select,
.ls-search input,
.data-check input,
.qltk-page input:not([type="hidden"]),
.qltk-page select {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
}

.body > .admin-box .search {
    width: 100%;
    margin: 8px 0 12px;
}

.body > .admin-box .select {
    width: 100%;
    margin-bottom: 10px;
}

.body > .admin-box button,
.ls-search button,
.data-check button,
.qltk-page button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: #087da8;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.body > .admin-box button:hover,
.ls-search button:hover,
.data-check button:hover,
.qltk-page button:hover {
    background: #066a8f;
    box-shadow: 0 4px 12px rgba(8, 116, 159, .2);
    transform: translateY(-1px);
}

.body > .admin-box .btn-danger,
.qltk-page .qltk-btn-danger {
    color: #fff;
    background: #c93a3a;
}

.body > .admin-box .btn-all {
    width: 100%;
    margin: 10px 0;
    background: #bd3030;
}

.body > .admin-box .stat {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 14px 0;
    padding: 14px 16px;
    background: #f1fbff;
    border: 1px solid #cfe3ee;
    border-radius: 10px;
}

.body > .admin-box table.table,
.ls-box table.ls-table,
.data-check table.checkdata-table,
.qltk-page table.qltk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    font-size: 14px;
    text-align: left;
}

.body > .admin-box table.table th,
.ls-box table.ls-table th,
.data-check table.checkdata-table th,
.qltk-page table.qltk-table th {
    padding: 10px 12px;
    color: #355d73;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    background: #eaf6fb;
    border-bottom: 1px solid #cfe3ee;
}

.body > .admin-box table.table th:first-child,
.ls-box table.ls-table th:first-child,
.data-check table.checkdata-table th:first-child,
.qltk-page table.qltk-table th:first-child {
    border-top-left-radius: 10px;
}

.body > .admin-box table.table th:last-child,
.ls-box table.ls-table th:last-child,
.data-check table.checkdata-table th:last-child,
.qltk-page table.qltk-table th:last-child {
    border-top-right-radius: 10px;
}

.body > .admin-box table.table td,
.ls-box table.ls-table td,
.data-check table.checkdata-table td,
.qltk-page table.qltk-table td {
    padding: 10px 12px;
    vertical-align: top;
    line-height: 1.5;
    border-bottom: 1px solid #e3eff5;
}

.body > .admin-box table.table tbody tr:hover td,
.ls-box table.ls-table tbody tr:hover td,
.data-check table.checkdata-table tbody tr:hover td,
.qltk-page table.qltk-table tbody tr:hover td {
    background: #f6fbfd;
}

.body > .admin-box table.table .highlight td {
    background: #fff6d6;
}

.ls-wrap {
    box-sizing: border-box;
    width: min(1200px, 100%);
    margin: 20px auto;
    padding: 0 12px;
}

.ls-wrap > .ls-box {
    padding: 20px;
}

.ls-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.ls-search input {
    flex: 1 1 240px;
}

.ls-table-scroll,
.checkdata-table-scroll,
.qltk-table-wrap {
    overflow-x: auto;
}

.ls-box table.ls-table {
    min-width: 760px;
}

.ls-box .item-list {
    margin: 0;
    padding-left: 18px;
}

.ls-box .item-list li {
    margin: 0 0 4px;
    color: #496c7c;
}

.ls-box .player {
    color: #08749f;
    font-weight: 700;
}

.ls-box .time,
.ls-box .muted-value {
    color: var(--muted);
}

.data-check {
    margin: 0 0 18px;
    padding: 20px;
    text-align: left !important;
}

.data-check > div[style*="max-width:700px"] {
    max-width: none !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0 0 18px !important;
}

.data-check > div[style*="max-width:700px"] p {
    margin: 0;
    padding: 10px 12px;
    color: #355d73;
    background: #f1fbff;
    border: 1px solid #d6eaf2;
    border-radius: 9px;
}

.data-check .checkdata-ranking {
    min-width: 0;
    margin: 12px 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #d6eaf2;
    border-radius: 12px;
}

.data-check .checkdata-ranking h6 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 15px;
}

.data-check table.checkdata-table {
    min-width: 360px;
}

.qltk-page #box_forums {
    padding: 16px;
}

.qltk-page #box_forums > .box {
    margin: 0 0 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 12px;
}

.qltk-page #box_forums > .box h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 18px;
}

.qltk-page .qltk-create {
    display: grid;
    grid-template-columns: 110px 170px minmax(180px, 1fr) auto;
    gap: 10px 12px;
    align-items: end;
}

.qltk-page .qltk-search,
.qltk-page .qltk-list-head,
.qltk-page .qltk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.qltk-page .qltk-table {
    min-width: 900px;
    table-layout: fixed;
}

.qltk-page .qltk-table input:not([type="hidden"]),
.qltk-page .qltk-table button {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
}

@media (max-width: 760px) {
    .body > .admin-box,
    .ls-wrap > .ls-box,
    .data-check {
            padding: 14px;
        }
    
    .qltk-page #box_forums {
            padding: 12px;
        }
    
    .qltk-page .qltk-create {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    
    .qltk-page .qltk-create label:nth-of-type(3) {
            grid-column: 1 / -1;
        }
    
    .qltk-page .qltk-create button {
            grid-column: 1 / -1;
            transform: none !important;
        }
}

.site-page--manage .post-list-thumbnail {
    width: 96px;
    height: auto;
    aspect-ratio: 500 / 269;
    border-radius: 8px;
    object-fit: cover;
}

.upload-post,
.post-list {
    box-sizing: border-box;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(22, 76, 105, .05);
}

.upload-post {
    margin: 0 0 16px;
    padding: 20px;
}

.upload-post .upload-title,
.post-list .upload-list-title {
    color: var(--ink);
    line-height: 1.3;
}

.upload-post #postForm {
    width: 100%;
    max-width: 700px;
}

.admin-content .upload-post #postForm {
    max-width: none !important;
    margin: 0 !important;
}

.admin-credit-page .admin-credit-amounts {
    display: grid;
    gap: 4px;
}

.admin-credit-page .admin-credit-amount-group {
    width: min(100%, 420px);
}

.admin-credit-page .admin-credit-amount-group input {
    width: 100%;
}

.admin-credit-page #admin-credit-submit {
    margin-top: 10px;
}

.upload-post .form-group {
    margin-bottom: 15px;
}

.upload-post .form-group label {
    display: block;
    margin-bottom: 6px;
    color: #355d73;
    font-size: 14px;
    font-weight: 700;
}

.upload-post input.upload-field,
.upload-post select.upload-field {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
}

.upload-post input.upload-field {
    width: 100%;
}

.upload-post select.upload-field {
    min-width: 150px;
}

.upload-post .cke {
    width: 100% !important;
    max-width: 100%;
    border-color: #bcd9e6;
    border-radius: 9px;
    overflow: hidden;
}

.upload-post .btn-submit,
.upload-post .btn-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: #087da8;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.upload-post .btn-preview {
    color: #08749f;
    background: #e3f3f9;
}

.upload-post .btn-submit:hover,
.upload-post .btn-preview:hover {
    transform: translateY(-1px);
    filter: brightness(.96);
}

.post-list {
    margin: 24px auto 20px !important;
    padding: 20px;
    text-align: left !important;
}

.post-list table.table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.post-list table.table th {
    padding: 12px;
    color: #355d73;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    background: #eaf6fb;
    border-bottom: 1px solid #cfe3ee;
}

.post-list table.table th:first-child {
    width: 180px;
    border-top-left-radius: 10px;
}

/* Cot Hanh dong: 3 nut (An/Hien, Chinh sua, Xoa) tren 1 hang; truoc 150px chi vua 2 nut nen tran khung. */
.post-list table.table th:last-child {
    width: 270px;
    border-top-right-radius: 10px;
}

/* Cot hep hon thi nut xuong dong trong o, khong tran ra ngoai. */
.post-list .post-actions {
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .post-list table.table th:last-child {
        width: 200px;
    }
}

.post-list table.table td {
    padding: 12px;
    vertical-align: middle;
    overflow-wrap: anywhere;
    border-bottom: 1px solid #e3eff5;
}

.post-list-thumbnail {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 500 / 269;
    border: 1px solid #dcebf2;
    border-radius: 9px;
    object-fit: cover;
}

.post-list .post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 2px;
    padding: 6px 10px;
    color: #08749f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    background: #e3f3f9;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.post-list .post-action--delete {
    color: #fff;
    background: #c93a3a;
}

.post-list .post-action:hover {
    filter: brightness(.94);
}

@media (max-width: 640px) {
    .upload-post,
    .post-list {
            padding: 14px !important;
        }
    
    .post-list {
            overflow-x: auto;
        }
    
    .post-list table.table {
            min-width: 560px;
        }
    
    .post-list table.table th:first-child {
            width: 130px;
        }
    
    .post-list table.table th:last-child {
            width: 130px;
        }
    
    .post-list-thumbnail {
            width: 110px;
        }
    
    .bg-content > section {
            padding: 14px !important;
        }
    
    .vps-content-editor {
            margin: 16px auto;
            padding: 14px;
        }
    
    .bg-content > section > div[style*="overflow-x"] {
            overflow-x: auto;
        }
}

/* Tim kiem / loc ngang */

.site-page--manage .admin-revenue-filter,
.site-page--manage .ls-search,
.site-page--manage .search,
.site-page--manage .admin-credit-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.site-page--manage .admin-credit-search-group,
.site-page--manage .admin-credit-amount-group {
    display: grid;
    flex: 1 1 260px;
    gap: 4px;
}

.site-page--manage .admin-revenue-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Man hep: danh sach quan tri thanh thanh ngang cuon, noi dung xuong duoi */

@media (max-width: 860px) {
    .admin-layout {
            grid-template-columns: 1fr;
        }
    
    .admin-sidebar {
            position: static;
            padding: 8px;
        }
    
    .admin-sidebar-title {
            display: none;
        }
    
    .admin-sidebar nav {
            display: flex;
            gap: 6px;
            padding-bottom: 2px;
            overflow-x: auto;
        }
    
    .admin-sidebar nav a {
            flex: 0 0 auto;
            white-space: nowrap;
        }
    
    .site-page--manage .stat-grid,
    .site-page--manage .admin-revenue-stats {
            grid-template-columns: 1fr;
        }
    
    .site-page > .admin-dashboard .stat-grid,
    .admin-content > .admin-dashboard .stat-grid {
            grid-template-columns: 1fr;
        }
}

/* =====================================================================
   Tieu de muc Trang chu "Tin tuc moi" / "Gioi thieu" noi bat hon (08/10/2026):
   thanh mau doc ben trai, nhan nho dang vien thuoc, tieu de to co chuyen mau,
   gach nhan vang-xanh ngan ben duoi.
   ===================================================================== */

.home-article-heading {
    position: relative;
    min-height: 0;
    align-items: flex-end;
    margin: 6px 0 14px;
    padding: 2px 0 0 18px;
}

.home-article-heading::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 0;
    width: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffc857 0%, #35c0e8 55%, #087da8 100%);
    box-shadow: 0 2px 8px rgba(8, 125, 168, .3);
}

.home-article-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    color: #0a6e96;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(8, 125, 168, .1);
    border: 1px solid rgba(8, 125, 168, .22);
    border-radius: 999px;
}

.home-article-heading .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffb400;
    box-shadow: 0 0 0 3px rgba(255, 180, 0, .25);
}

.home-article-heading h2 {
    position: relative;
    margin: 8px 0 0;
    padding-bottom: 10px;
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #123a52;
    background: linear-gradient(90deg, #123a52 0%, #087da8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-article-heading h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffb400, #35c0e8);
}

@media (max-width: 640px) {
    .home-article-heading {
            padding-left: 14px;
        }
    
    .home-article-heading h2 {
            font-size: 26px;
        }
}

/* Bo thanh mau doc va nhan nho (vien thuoc) o tieu de muc Trang chu (08/10/2026). */

.home-article-heading::before,
.home-article-heading .eyebrow {
    display: none;
}

.home-article-heading {
    align-items: center;
    padding-left: 2px;
}

.home-article-heading h2 {
    margin-top: 0;
}

@media (max-width: 640px) {
    .home-article-heading {
            padding-left: 2px;
        }
}

/* =====================================================================
   Khoi keu goi "Cung nhau phieu luu" (08/10/2026): truoc day nen nhat gan nhu trong suot.
   Nay: nen xanh dam co anh banner mo, chu trang, nhan vang, nut vang to co hieu ung.
   ===================================================================== */

.community-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 26px 0 8px;
    padding: 34px 38px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(8, 40, 66, .96) 0%, rgba(10, 82, 120, .9) 55%, rgba(20, 130, 170, .78) 100%),
        url("/images/banner_2.png") center / cover no-repeat;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(8, 60, 92, .32);
}

.community-banner::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -50px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 87, .38) 0%, rgba(255, 200, 87, 0) 70%);
    pointer-events: none;
}

.community-banner > * {
    position: relative;
}

.community-banner .eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: #ffc857;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.community-banner h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.community-banner p {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 16px;
}

.community-banner .button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 28px;
    color: #4a2d00;
    font-size: 17px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd978, #ffb400);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(255, 180, 0, .4);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.community-banner .button .bi {
    transition: transform .18s ease;
}

.community-banner .button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px rgba(255, 180, 0, .5);
}

.community-banner .button:hover .bi {
    transform: translateX(5px);
}

.community-banner .button:active {
    transform: scale(.97);
}

@media (max-width: 640px) {
    .community-banner {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            padding: 24px 20px;
        }
    
    .community-banner h2 {
            font-size: 25px;
        }
    
    .community-banner .button {
            width: 100%;
            justify-content: center;
        }
}

/* Header dien thoai: menu chinh va hang nut game cung luoi 3 cot x 2 hang, chu can giua,
   moi o la mot nut nen nhat -> hai khoi thang hang, doi xung (08/10/2026). */

@media (max-width: 980px) {
    .site-navigation {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            padding: 10px 0 8px;
        }
    
    .site-navigation a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 6px 4px;
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
            background: rgba(255, 255, 255, .07);
            border-radius: 9px;
        }
    
    .site-navigation a[aria-current="page"] {
            background: rgba(255, 255, 255, .2);
        }
}

@media (max-width: 640px) {
    .quick-links a {
            min-height: 36px;
            background: rgba(255, 255, 255, .07);
            border-radius: 9px;
        }
    
    .quick-links .quick-play {
            background: rgba(255, 200, 87, .22);
        }
}

/* Tieu de trang cong khai (Bang xep hang, Giftcode, VPS) can giua (08/10/2026).
   Trang quan tri / tai khoan (.site-page--manage) giu can trai. */

.site-page:not(.site-page--manage) .page-section-title {
    text-align: center;
}

/* Nut "Quay lai" o trang bai viet / gioi thieu (08/10/2026): dang vien thuoc co mui ten,
   hover to xanh va mui ten lui sang trai. Trang quan tri giu kieu link thuong. */

.site-page:not(.site-page--manage) .return-bar {
    margin: 4px 0 14px;
}

.site-page:not(.site-page--manage) .return-bar a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px 10px 16px;
    color: #087da8 !important;
    font-size: 15px;
    font-weight: 800;
    background: #fff;
    border: 1px solid #b9dceb;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(16, 83, 111, .1);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.site-page:not(.site-page--manage) .return-bar a::before {
    content: "\f12f";
    display: inline-block;
    font-family: "bootstrap-icons";
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: transform .18s ease;
}

.site-page:not(.site-page--manage) .return-bar a:hover,
.site-page:not(.site-page--manage) .return-bar a:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #0a7aa6, #1e90b8);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(8, 116, 159, .32);
    transform: translateY(-1px);
    outline: none;
}

.site-page:not(.site-page--manage) .return-bar a:hover::before,
.site-page:not(.site-page--manage) .return-bar a:focus-visible::before {
    transform: translateX(-4px);
}

.site-page:not(.site-page--manage) .return-bar a:active {
    transform: scale(.97);
}

/* Trang Tin tuc: 2 muc "Giftcode" / "Bang Xep Hang" noi va to hon (08/10/2026):
   the cao hon, nen chuyen mau, avatar 72px, tieu de 21px, mui ten + hieu ung khi re chuot. */

.forum-feature-links {
    gap: 16px;
    margin-bottom: 16px;
}

.forum-feature-links > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 112px;
    padding: 18px 56px 18px 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #eaf8fd 100%);
    border: 1px solid #b9dceb;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(16, 83, 111, .14);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Thanh mau ben trai: vang cho Giftcode, xanh cho Bang xep hang. */

.forum-feature-links > a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: linear-gradient(180deg, #ffd978, #ffb400);
}

.forum-feature-links > a:nth-child(2)::before {
    background: linear-gradient(180deg, #35c0e8, #087da8);
}

/* Mui ten ben phai. */

.forum-feature-links > a::after {
    content: "\f138";
    position: absolute;
    top: 50%;
    right: 20px;
    color: #087da8;
    font-family: "bootstrap-icons";
    font-size: 22px;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform .2s ease;
}

.forum-feature-links > a:hover {
    transform: translateY(-3px);
    border-color: #6fb9d4;
    box-shadow: 0 14px 30px rgba(8, 116, 159, .24);
}

.forum-feature-links > a:hover::after {
    transform: translateY(-50%) translateX(5px);
}

.forum-feature-links img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    padding: 4px;
    object-fit: cover;
    background: #fff;
    border: 2px solid #cfe9f4;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(16, 83, 111, .15);
}

.forum-feature-links span {
    gap: 4px;
}

.forum-feature-links strong {
    color: #0d6389;
    font-size: 21px;
    font-weight: 850;
    line-height: 1.2;
}

.forum-feature-links small {
    color: #5e8a9b;
    font-size: 15px;
}

@media (max-width: 640px) {
    .forum-feature-links > a {
            min-height: 92px;
            padding: 14px 48px 14px 18px;
        }
    
    .forum-feature-links img {
            flex-basis: 56px;
            width: 56px;
            height: 56px;
        }
    
    .forum-feature-links strong {
            font-size: 18px;
        }
}

/* 2 muc Giftcode / Bang Xep Hang: tieu de lon, mo ta nho hon. */

body.modern-site .forum-feature-links strong {
    font-size: 22px !important;
}

body.modern-site .forum-feature-links small {
    font-size: 14px !important;
}

body.modern-site .home-section-link {
    font-size: 14px !important;
}

/* Shared canvas and typography for every page rendered inside the admin sidebar. */

.admin-content {
    box-sizing: border-box;
    min-width: 0;
    padding: 20px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    background: #fff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    box-shadow: 0 7px 23px rgba(22, 76, 105, .06);
}

.admin-content > .body,
.admin-content > .bg-content,
.admin-content > .ls-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-content > .bg-content > section {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-content > .ls-wrap > .ls-box,
.admin-content .qltk-page #box_forums {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-content h1,
.admin-content h1.title,
.admin-content h2.page-section-title,
.admin-content h2.account-action-title,
.admin-content .admin-dashboard > h2,
.admin-content .feedback-admin-page > h2 {
    margin: 0 0 16px !important;
    color: var(--ink);
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    text-align: left;
}

.admin-content h2:not(.page-section-title):not(.account-action-title):not(.title) {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.admin-content h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.admin-content h4 {
    font-weight: 700;
}

.admin-content .box,
.admin-content .admin-box,
.admin-content .upload-post,
.admin-content .post-list,
.admin-content .data-check,
.admin-content .ls-box,
.admin-content .box_detai,
.admin-content .feedback-admin-table-wrap {
    border-radius: 14px;
}

.admin-content .box,
.admin-content .admin-box,
.admin-content .upload-post,
.admin-content .post-list,
.admin-content .data-check,
.admin-content .ls-box,
.admin-content .box_detai {
    padding: 18px;
}

.admin-content .section-divider {
    margin: 16px 0;
    border-color: #dcebf2;
}

.admin-content .upload-post > .section-divider,
.admin-content .data-check > .section-divider {
    display: none;
}

.admin-content label {
    font-weight: 700;
}

.admin-content .feedback-admin-page #box_forums,
.admin-content .feedback-admin-page .box_list_chuyenmuc,
.admin-content .feedback-admin-page .box_midss,
.admin-content .feedback-admin-page .box_detai,
.admin-content .feedback-admin-page .feedback-content {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-content > .body > .admin-box,
.admin-content > .body > .upload-post,
.admin-content > .body > .post-list,
.admin-content > .body > .data-check,
.admin-content > .ls-wrap > .ls-box {
    margin: 0;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-content > .body > .upload-post,
.admin-content > .body > .post-list,
.admin-content > .body > .data-check {
    margin-bottom: 18px;
}

.admin-content > .body > .admin-box > .stat,
.admin-content > .body > .data-check .checkdata-ranking {
    border-radius: 10px;
}

@media (max-width: 640px) {
    .admin-content {
            padding: 14px;
        }
    
    .admin-content .box,
    .admin-content .admin-box,
    .admin-content .upload-post,
    .admin-content .post-list,
    .admin-content .data-check,
    .admin-content .ls-box,
    .admin-content .box_detai {
            padding: 14px;
        }
}

.password-change-page .password-change-content {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.password-change-page .password-change-form {
    display: grid;
    gap: 14px;
}

.password-change-page .password-change-row {
    display: grid;
    gap: 5px;
}

.password-change-page .password-change-row > label {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

.password-change-page .password-change-input {
    position: relative;
    width: 100%;
}

.password-change-page .password-change-input input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 9px 48px 9px 12px;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #bcd9e6;
    border-radius: 9px;
}

.password-change-page .password-change-input input:focus {
    border-color: #087da8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 125, 168, .15);
}

.password-change-page .password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    width: 38px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    place-items: center;
    color: #648092;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease, background-color .15s ease;
}

.password-change-page .password-visibility-toggle:hover,
.password-change-page .password-visibility-toggle:focus-visible {
    color: #087da8;
    background: #eaf6fb;
    outline: none;
}

.password-change-page .password-visibility-toggle:hover,
.password-change-page .password-visibility-toggle:active {
    transform: translateY(-50%);
    box-shadow: none;
}

.password-change-page .password-visibility-toggle .eye-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.password-change-page .password-visibility-toggle .eye-icon-closed {
    display: none;
}

.password-change-page .password-visibility-toggle.is-visible .eye-icon-open {
    display: none;
}

.password-change-page .password-visibility-toggle.is-visible .eye-icon-closed {
    display: block;
}

.password-change-page .password-change-submit-row .w3-button {
    width: 100%;
    min-height: 42px;
    color: #fff;
    background: linear-gradient(135deg, #0a7aa6, #1e90b8);
}

.password-change-page .password-change-submit-row .w3-button:hover {
    color: #fff;
    background: linear-gradient(135deg, #08698f, #177da0);
    transform: none;
}

.password-change-page .password-change-submit-row .w3-button:active {
    transform: none;
}

.password-change-page > .page-section-title {
    margin-bottom: 18px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -.012em;
    text-align: center;
    text-transform: uppercase;
}

img[src$="/avatar/6101.gif"] {
    border-radius: 8px !important;
    object-fit: contain !important;
}

.password-change-page #box_forums {
    box-sizing: border-box;
    margin: 0;
    padding: clamp(16px, 3vw, 26px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 7px 23px rgba(22, 76, 105, .06);
}

.site-page--manage .password-change-page .box_list_chuyenmuc,
.site-page--manage .password-change-page .box_midss,
.site-page--manage .password-change-page .box_detai {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* =====================================================================
   THANH PHAN DUNG CHUNG (09/10/2026)
   Moi the bai viet (Trang chu, Tin tuc, Gioi thieu) dung CHUNG mot bo class .article-*
   do ham renderArticleCard() trong controllers/helpers.php tao ra. Truoc day moi trang
   mot bo class rieng (home-article-*, forum-post-*) va chong len nhau hang tram dong.
   Luu y co chu: luat toan cuc "body.modern-site :where(...) { font-size: max(..) !important }"
   ep moi chu khong phai tieu de ve co cua phan tu cha, nen cac co chu nho ben duoi phai
   khai bao !important voi do uu tien cao hon.
   ===================================================================== */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
    background: #eafaff;
    border: 1px solid rgba(30, 111, 150, .16);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(16, 83, 111, .1);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.article-card:hover {
    transform: translateY(-2px);
    background: #e2f5fb;
    border-color: #77bdd4;
    box-shadow: 0 8px 20px rgba(16, 83, 111, .14);
}

.article-card:active {
    transform: scale(.99);
}

.article-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 640 / 344;
    margin: 0 0 12px;
    overflow: hidden;
    background: #d9f2fa;
    border-radius: 10px;
}

.article-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.article-card:hover .article-card-image img {
    transform: scale(1.045);
}

.article-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 0 4px 4px;
}

.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    color: #6794a5;
}

.article-card-meta strong {
    color: #0d6389;
    font-weight: 700;
}

.article-card-title {
    display: -webkit-box;
    overflow: hidden;
    margin: 6px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article-card-title a {
    color: #16445b;
}

/* Lien ket tieu de phu kin the: bam o dau trong the cung mo bai viet. */
.article-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.article-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 10px;
    color: #416e80;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.article-card-read {
    align-self: flex-start;
    margin-top: auto;
    color: #08749f !important;
    font-weight: 700;
}

body.modern-site .article-card-meta span {
    font-size: 13px !important;
}

body.modern-site .article-card-meta strong,
body.modern-site .article-card-excerpt,
body.modern-site .article-card-read {
    font-size: 14px !important;
}

@media (max-width: 860px) {
    .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

/* Dong chu chay "Chao mung..." (thay the the <marquee> da bi bo khoi chuan HTML). */
.forum-welcome[role="note"] {
    overflow: hidden;
    white-space: nowrap;
    animation: ticker 16s linear infinite;
}

@keyframes ticker {
    from {
        text-indent: 100%;
    }

    to {
        text-indent: -100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forum-welcome[role="note"] {
        animation: none;
        text-align: center;
        text-indent: 0;
    }
}

.pagination {
    justify-content: center;
}

.emoji-picker.is-open {
    display: block;
}

/* Khung tieu de bai chi tiet: "NRO Bang  •  x phut truoc • 08/10/2026" + tieu de h1. */
.about-article-heading .article-card-meta {
    margin-bottom: 4px;
}

.about-article-heading h1 {
    margin: 0;
}

/* Trang 404 */
.not-found {
    padding: 56px 20px;
    text-align: center;
}

.not-found h1 {
    margin: 0;
    color: #08749f;
    font-size: 72px;
    line-height: 1;
}

.not-found p {
    margin: 12px 0 22px;
    color: var(--muted);
}

/* Tieu de tung bang xep hang can giua (h2 trong .bxh-box). */
.bxh-box h2 {
    text-align: center;
}

/* Chu hero Trang chu de doc hon (09/10/2026): bo gian chu qua chat, them bong chu tren anh nen. */
.home-hero h1 {
    font-weight: 800;
    line-height: 1.18;
    text-shadow: 0 2px 14px rgba(5, 30, 50, .45);
}

.home-hero-content > p {
    max-width: 520px;
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(5, 30, 50, .5);
}

body.modern-site .home-hero-content > p {
    font-size: 17px !important;
}

/* =====================================================================
   TIEU DE TRANG DONG BO (09/10/2026): moi trang cong khai / tai khoan / quan tri dung CUNG
   mot kieu (co chu, do dam, in hoa, can giua), truoc day moi trang mot class va mot co chu.
   ===================================================================== */
body.modern-site .page-section-title,
body.modern-site .site-page--manage h1.title,
body.modern-site .admin-dashboard > h1,
body.modern-site .admin-box > h1,
body.modern-site .ls-box > h1 {
    margin: 0 0 18px;
    color: var(--ink);
    font-family: inherit;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    body.modern-site .page-section-title,
    body.modern-site .site-page--manage h1.title,
    body.modern-site .admin-dashboard > h1,
    body.modern-site .admin-box > h1,
    body.modern-site .ls-box > h1 {
        font-size: 24px !important;
    }
}

/* =====================================================================
   HIEU UNG DONG NHE O HERO TRANG CHU (09/10/2026): anh nen zoom cham, bui sao lap lanh,
   chu vang "lung linh" chay anh sang, nut "Choi ngay" toa sang nhe. Tat het khi nguoi dung
   bat "giam chuyen dong" trong he dieu hanh.
   ===================================================================== */
.home-hero-image {
    animation: hero-zoom 26s ease-in-out infinite alternate;
}

/* Hai lop sao: lop 1 nhap nhay tai cho, lop 2 troi cham xuong nhu tuyet roi. */
.home-hero::before,
.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.home-hero::before {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.6px, transparent 2.6px),
        radial-gradient(circle, rgba(255, 224, 150, .9) 0 1.4px, transparent 2.4px),
        radial-gradient(circle, rgba(190, 235, 255, .95) 0 1.8px, transparent 3px),
        radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.2px, transparent 2.2px);
    background-size: 210px 170px, 260px 220px, 340px 260px, 180px 240px;
    background-position: 20px 30px, 120px 90px, 60px 150px, 150px 10px;
    animation: hero-twinkle 3.6s ease-in-out infinite;
}

.home-hero::after {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .85) 0 2.2px, transparent 3.4px),
        radial-gradient(circle, rgba(220, 244, 255, .8) 0 1.6px, transparent 2.8px),
        radial-gradient(circle, rgba(255, 255, 255, .75) 0 1.2px, transparent 2.2px);
    background-size: 300px 260px, 230px 200px, 170px 150px;
    background-position: 40px 0, 150px 60px, 90px 110px;
    animation: hero-snow 22s linear infinite, hero-twinkle 5.2s ease-in-out infinite reverse;
}

.home-hero h1 span {
    background: linear-gradient(100deg, #ffd17b 0%, #ffe9b0 35%, #fff6d8 50%, #ffe9b0 65%, #ffd17b 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-shine 5.5s ease-in-out infinite;
}

.home-hero .eyebrow .bi {
    animation: hero-pulse 2.4s ease-in-out infinite;
}

.home-hero .button-primary {
    animation: hero-glow 2.8s ease-in-out infinite;
}

@keyframes hero-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

@keyframes hero-twinkle {
    0%, 100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }
}

@keyframes hero-snow {
    from {
        background-position: 40px 0, 150px 60px, 90px 110px;
    }

    to {
        background-position: 20px 260px, 120px 260px, 70px 260px;
    }
}

@keyframes hero-shine {
    0%, 100% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0 0;
    }
}

@keyframes hero-pulse {
    0%, 100% {
        opacity: .65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.25) rotate(12deg);
    }
}

@keyframes hero-glow {
    0%, 100% {
        box-shadow: 0 6px 16px rgba(255, 180, 0, .25);
    }

    50% {
        box-shadow: 0 6px 26px rgba(255, 200, 70, .7), 0 0 0 4px rgba(255, 214, 120, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-image,
    .home-hero::before,
    .home-hero::after,
    .home-hero h1 span,
    .home-hero .eyebrow .bi,
    .home-hero .button-primary,
    .button-zalo,
    .button-zalo::before {
        animation: none;
    }

    .button-zalo,
    .button-zalo:hover,
    .button-zalo:active {
        transition: none;
        transform: none;
    }

    .home-hero::before {
        opacity: .5;
    }
}

/* Chu gradient trong suot: text-shadow xuyen qua lam chu bi xin mau -> dung drop-shadow, cho sao to va sang hon. */
.home-hero h1 span {
    text-shadow: none;
    filter: drop-shadow(0 2px 8px rgba(5, 30, 50, .5));
}

.home-hero::before {
    background-size: 150px 130px, 190px 160px, 250px 190px, 130px 170px;
}

.home-hero::after {
    background-size: 210px 190px, 170px 150px, 120px 110px;
}

/* Bai dang ghim: icon "new" canh tieu de (Trang chu, Tin tuc). */
.article-card-new {
    display: inline-block;
    width: auto;
    height: 14px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Giftcode tren dien thoai: ma giftcode xuong dong rieng, khong de len ten / thoi gian. */
@media (max-width: 640px) {
    .giftcode-post-header {
        flex-wrap: wrap;
    }

    .giftcode-author-info {
        flex: 1 1 0;
        min-width: 0;
    }

    .giftcode-code {
        flex: 1 0 100%;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

/* Bang xep hang tren dien thoai hep (<=430px, co iPhone): an cot Avatar de nhuong cho cot phan thuong
   (qua chia 2 hang), icon qua nho lai. Dat cuoi file de de len do rong cot cua khoi 640px. */
@media (max-width: 430px) {
    .ranking-contribution-table th:nth-child(2),
    .ranking-contribution-table td.ranking-avatar {
        display: none;
    }

    .ranking-contribution-table th:nth-child(1),
    .ranking-contribution-table td:nth-child(1) { width: 10%; }
    .ranking-contribution-table th:nth-child(3),
    .ranking-contribution-table td:nth-child(3) { width: 22%; }
    .ranking-contribution-table th:nth-child(4),
    .ranking-contribution-table td:nth-child(4) { width: 68%; }

    .ranking-score-table th:nth-child(1),
    .ranking-score-table td:nth-child(1) { width: 9%; }
    .ranking-score-table th:nth-child(3),
    .ranking-score-table td:nth-child(3) { width: 21%; }
    .ranking-score-table th:nth-child(4),
    .ranking-score-table td:nth-child(4) { width: 12%; }
    .ranking-score-table th:nth-child(5),
    .ranking-score-table td:nth-child(5) { width: 58%; }

    .ranking-contribution-table td.ranking-reward-cell {
        padding: 6px 4px;
    }

    .ranking-reward-grid {
        gap: 3px;
    }

    .ranking-reward-grid .ranking-reward-item {
        gap: 2px;
        padding: 2px 3px;
        font-size: 10px;
    }

    .ranking-reward-grid .ranking-reward-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}