/* ============================================================
   NRO Theme — giao diện hiện đại cho cổng game Ngọc Rồng.
   Bảng màu: cam #ff9933 · cam nhạt #ffcc99 · nâu #663300 · đỏ #ff4d4d
   Bo góc mềm, đổ bóng ấm, tiêu đề font tròn "Baloo 2", nút dạng viên thuốc.
   ============================================================ */

:root {
    --nro-orange: #ff9933;
    --nro-dark-orange: #ff6600;
    --nro-brown: #663300;
    --nro-light-orange: #ffcc99;
    --nro-red: #ff4d4d;
    --nro-border: #e67e22;

    --cream: #fff4e8;
    --cream-2: #ffe6cc;
    --brown-d: #4d2600;
    --brown-l: #8a4b14;

    --bg: var(--nro-orange);
    --panel: var(--nro-light-orange);
    --panel-2: var(--cream-2);
    --line: rgba(230, 126, 34, .35);
    --line-2: var(--nro-border);

    --tx: var(--nro-brown);
    --tx-2: #331a00;
    --tx-3: rgba(102, 51, 0, .66);

    --orange: var(--nro-dark-orange);
    --gold: #b35900;
    --red: var(--nro-red);
    --fire: linear-gradient(135deg, var(--nro-red), var(--nro-dark-orange));
    --kigrad: linear-gradient(135deg, var(--brown-l), var(--nro-brown));

    --wrap: 1080px;
    --side: 310px;
    --r: 14px;
    --r-sm: 10px;
    --pill: 999px;

    --f-head: "Baloo 2", "Inter", system-ui, "Segoe UI", sans-serif;
    --f-body: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

    --sh-sm: 0 2px 0 rgba(102, 51, 0, .08), 0 8px 20px -12px rgba(102, 51, 0, .45);
    --sh-md: 0 2px 0 rgba(102, 51, 0, .08), 0 16px 34px -14px rgba(102, 51, 0, .55);
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Biến cũ cho các trang còn dùng class kia */
    --brown: var(--nro-brown);
    --brown-2: var(--brown-l);
    --card: var(--panel);
    --card-bd: var(--line-2);
    --dark-orange: var(--nro-dark-orange);
    --muted: var(--tx-3);

    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--tx-2);
    font-family: var(--f-body);
    font-size: 14.5px;
    line-height: 1.6;
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 480px at 12% -8%, rgba(255, 204, 153, .75), transparent 65%),
        radial-gradient(760px 520px at 100% 12%, rgba(255, 102, 0, .28), transparent 62%),
        radial-gradient(rgba(102, 51, 0, .07) 1.2px, transparent 1.3px);
    background-size: auto, auto, 22px 22px;
    background-attachment: fixed;
}

::selection {
    background: rgba(102, 51, 0, .22);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    border: 0;
}

button {
    font-family: inherit;
    cursor: pointer;
}

h1,
h2,
h3,
h4 {
    font-family: var(--f-head);
    color: var(--tx);
    line-height: 1.25;
}

b,
strong {
    color: var(--tx);
}

:focus-visible {
    outline: 3px solid rgba(102, 51, 0, .45);
    outline-offset: 2px;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

main {
    flex: 1 0 auto;
    width: 100%;
}

/* Nội dung các trang cũ (Trang Chủ, Giới Thiệu, Bài viết, Nạp tiền…) vẫn nằm trong .body */
main>.body,
main>.bg-content {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* ---------------- Ô nhập ---------------- */
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
input[type=search],
select,
textarea {
    background: rgba(255, 255, 255, .78);
    border: 1.5px solid rgba(230, 126, 34, .55);
    border-radius: var(--r-sm);
    color: var(--tx-2);
    padding: 10px 13px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--nro-brown);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 51, 0, .12)
}

input::placeholder,
textarea::placeholder {
    color: rgba(102, 51, 0, .45)
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--tx-2);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s
}

/* ---------------- Header ---------------- */
.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, var(--nro-brown), var(--brown-d));
    box-shadow: 0 10px 24px -14px rgba(51, 26, 0, .8)
}

.site-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, var(--nro-light-orange), var(--nro-orange) 35%, var(--nro-red) 70%, var(--nro-dark-orange))
}

.site-head .bar {
    max-width: var(--wrap);
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 66px;
    padding: 0 16px;
    gap: 26px;
}

.site-head .logo {
    flex: 0 0 auto;
    transition: transform .2s var(--ease)
}

.site-head .logo:hover {
    transform: scale(1.04) rotate(-1deg)
}

.site-head .logo img {
    height: 44px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35))
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none
}

.site-nav::-webkit-scrollbar {
    display: none
}

.site-nav a {
    padding: 8px 15px;
    border-radius: var(--pill);
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 236, 214, .86);
    transition: background-color .15s, color .15s
}

.site-nav a:hover {
    background: rgba(255, 204, 153, .14);
    color: #fff
}

.site-nav a.on {
    background: var(--nro-light-orange);
    color: var(--nro-brown);
    box-shadow: inset 0 -2px 0 rgba(102, 51, 0, .18)
}

.head-acct {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.head-acct a,
.head-acct .acct {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--pill);
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nro-light-orange);
    border: 1.5px solid rgba(255, 204, 153, .55);
    transition: all .15s
}

.head-acct a:hover {
    background: rgba(255, 204, 153, .14);
    color: #fff;
    border-color: var(--nro-light-orange)
}

.head-acct a.fire {
    background: var(--fire);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(255, 77, 77, .9)
}

.head-acct a.fire:hover {
    filter: brightness(1.06);
    transform: translateY(-1px)
}

.head-acct img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nro-light-orange);
    border: 2px solid var(--nro-light-orange);
    image-rendering: pixelated;
    margin-left: -6px
}

.head-acct .acct {
    padding: 4px 14px 4px 4px;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 204, 153, .35)
}

.head-acct .acct b {
    color: #fff
}

.head-acct .acct span {
    color: rgba(255, 236, 214, .8);
    font-weight: 600;
    font-size: 13px
}

/* Nút tài khoản (avatar + tên tài khoản) */
.head-acct a.acct-user {
    padding: 4px 16px 4px 4px;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 204, 153, .35);
    max-width: 230px
}

.head-acct a.acct-user img {
    margin-left: 0
}

.head-acct a.acct-user .nm {
    color: #fff;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* ---------------- Icon ---------------- */
.ic {
    width: 16px;
    height: 16px;
    flex: 0 0 auto
}

.ic-sm {
    width: 12px;
    height: 12px;
    flex: 0 0 auto
}

/* ---------------- Hero ---------------- */
.hero-wrap {
    max-width: var(--wrap);
    margin: 22px auto 26px;
    padding: 0 16px
}

.hero {
    position: relative;
    width: 100%;
    height: 370px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--brown-d);
    border: 3px solid var(--nro-light-orange);
    box-shadow: 0 24px 50px -22px rgba(51, 26, 0, .75)
}

.hero .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1s ease, transform 7s ease
}

.hero .slide.on {
    opacity: 1;
    transform: scale(1)
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(51, 26, 0, .88) 0%, rgba(102, 51, 0, .6) 38%, rgba(102, 51, 0, 0) 72%),
        linear-gradient(0deg, rgba(51, 26, 0, .55), transparent 45%)
}

.hero-body {
    position: absolute;
    left: 44px;
    bottom: 40px;
    z-index: 3;
    max-width: 540px;
    color: #fff
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--nro-light-orange);
    background: rgba(255, 204, 153, .14);
    border: 1px solid rgba(255, 204, 153, .45);
    backdrop-filter: blur(6px)
}

.hero-kicker i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
    animation: blink 1.8s infinite
}

.hero-title {
    margin: 12px 0 6px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 4px 0 rgba(51, 26, 0, .45), 0 10px 30px rgba(0, 0, 0, .35)
}

.hero-title span {
    color: var(--nro-light-orange)
}

.hero-sub {
    margin: 0 0 20px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 244, 232, .9);
    max-width: 440px
}

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

.hero-dots {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--pill);
    background: rgba(51, 26, 0, .45);
    backdrop-filter: blur(6px)
}

.hero-dots b {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--pill);
    cursor: pointer;
    background: rgba(255, 236, 214, .5);
    transition: all .25s var(--ease)
}

.hero-dots b.on {
    width: 22px;
    background: var(--nro-light-orange)
}

@keyframes blink {
    50% {
        opacity: .35
    }
}

/* ---------------- Thẻ ---------------- */
.card {
    position: relative;
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--cream-2), var(--nro-light-orange) 140px);
    border: 1px solid rgba(230, 126, 34, .55);
    box-shadow: var(--sh-sm)
}

.card.p {
    padding: 18px
}

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px dashed rgba(230, 126, 34, .55);
    color: var(--nro-brown)
}

.card-head::before {
    content: "★";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--nro-light-orange);
    background: var(--kigrad);
    box-shadow: 0 4px 10px -4px rgba(102, 51, 0, .7)
}

.card-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--nro-brown)
}

.card-head .more {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--nro-red);
    padding: 4px 10px;
    border-radius: var(--pill);
    transition: background-color .15s
}

.card-head .more:hover {
    background: rgba(255, 77, 77, .12)
}

/* ---------------- Tabs ---------------- */
.tabs {
    display: flex;
    gap: 4px;
    padding: 5px;
    margin: 6px;
    border-radius: var(--pill);
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(102, 51, 0, .09);
    box-shadow: inset 0 1px 3px rgba(102, 51, 0, .18)
}

.tabs::-webkit-scrollbar {
    display: none
}

.tabs a {
    flex: 1 0 auto;
    text-align: center;
    padding: 9px 18px;
    border-radius: var(--pill);
    white-space: nowrap;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    color: rgba(102, 51, 0, .72);
    transition: background-color .15s, color .15s
}

.tabs a:hover {
    background: rgba(255, 255, 255, .45);
    color: var(--nro-brown)
}

.tabs a.on {
    background: var(--kigrad);
    color: var(--nro-light-orange);
    box-shadow: 0 6px 14px -8px rgba(102, 51, 0, .9)
}

/* ---------------- Nút ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--pill);
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    border: 1.5px solid transparent;
    transition: transform .15s var(--ease), box-shadow .2s, filter .15s, background-color .15s;
    cursor: pointer
}

.btn:hover {
    transform: translateY(-1px)
}

.btn-red {
    background: var(--fire);
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(255, 77, 77, .95)
}

.btn-red:hover {
    filter: brightness(1.06);
    color: #fff
}

.btn-soft {
    background: rgba(255, 255, 255, .55);
    color: var(--nro-brown);
    border-color: rgba(230, 126, 34, .5);
    font-size: 14px
}

.btn-soft:hover {
    background: #fff;
    border-color: var(--nro-border)
}

.btn-glass {
    background: rgba(255, 244, 232, .14);
    color: #fff;
    border-color: rgba(255, 236, 214, .55);
    backdrop-filter: blur(6px)
}

.btn-glass:hover {
    background: rgba(255, 244, 232, .26);
    color: #fff
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16.5px
}

.btn-lg .ic {
    width: 18px;
    height: 18px
}

.btn-sm {
    font-size: 13px;
    padding: 6px 12px
}

.btn-block {
    width: 100%
}

a.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 7px 16px 7px 12px;
    border-radius: var(--pill);
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nro-brown);
    background: rgba(255, 236, 214, .7);
    border: 1px solid rgba(102, 51, 0, .15);
    transition: background-color .15s, transform .15s
}

a.back-link:hover {
    background: #fff;
    border-color: rgba(102, 51, 0, .25);
    transform: translateX(-2px)
}

/* ---------------- Nút sidebar ---------------- */
.side-btn {
    --c: #334155;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px 9px 9px;
    border-radius: 12px;
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 72%, #000));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 16px -10px color-mix(in srgb, var(--c) 80%, #000);
    transition: transform .15s var(--ease), filter .15s
}

.side-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    color: #fff
}

.side-btn>.ic {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18)
}

.side-btn .chev {
    margin-left: auto;
    opacity: .75;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transform: rotate(-90deg);
    transition: transform .15s
}

.side-btn:hover .chev {
    transform: rotate(-90deg) translateY(2px)
}

.side-btn.pc {
    --c: var(--nro-brown)
}

.side-btn.apk {
    --c: #16a34a
}

.side-btn.ios {
    --c: #364153
}

.side-btn.java {
    --c: var(--nro-dark-orange)
}

.side-btn.play {
    --c: #4f39f6
}

.side-btn.red {
    --c: var(--nro-red)
}

.side-btn.nap {
    --c: var(--nro-dark-orange)
}

.side-btn.zalo {
    --c: #0068ff
}

.side-btn.center {
    justify-content: center;
    padding: 11px 12px
}

.side-btn.center>.ic {
    padding: 0;
    background: none
}

.side-soft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 12px;
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nro-brown);
    background: rgba(255, 255, 255, .55);
    border: 1.5px solid rgba(230, 126, 34, .45);
    transition: background-color .15s, border-color .15s
}

.side-soft:hover {
    background: #fff;
    border-color: var(--nro-border)
}

.side-soft .ic {
    width: 14px;
    height: 14px
}

.side-btn[href="#"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.6)
}

/* ---------------- Khung đăng nhập / đăng ký ---------------- */
.auth-box {
    scroll-margin-top: 90px
}

.ab-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: -4px -4px 14px;
    border-radius: var(--pill);
    background: rgba(102, 51, 0, .09);
    box-shadow: inset 0 1px 3px rgba(102, 51, 0, .18)
}

.ab-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 6px;
    border: 0;
    border-radius: var(--pill);
    background: none;
    font-family: var(--f-head);
    font-size: 15.5px;
    font-weight: 800;
    color: rgba(102, 51, 0, .7);
    transition: background-color .15s, color .15s
}

.ab-tabs button:hover {
    background: rgba(255, 255, 255, .45);
    color: var(--nro-brown)
}

.ab-tabs button.on {
    background: var(--kigrad);
    color: var(--nro-light-orange);
    box-shadow: 0 6px 14px -8px rgba(102, 51, 0, .9)
}

.ab-form {
    display: grid;
    gap: 10px
}

.ab-form[hidden] {
    display: none
}

.ab-fld {
    position: relative;
    display: flex;
    align-items: center
}

.ab-fld>.ic {
    position: absolute;
    left: 13px;
    color: rgba(102, 51, 0, .55);
    pointer-events: none;
    transition: color .15s
}

.ab-fld:focus-within>.ic {
    color: var(--nro-brown)
}

.ab-fld input {
    width: 100%;
    height: 44px;
    padding: 0 42px 0 38px;
    border-radius: 12px;
    font-size: 14.5px
}

.ab-eye {
    position: absolute;
    right: 6px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: rgba(102, 51, 0, .55)
}

.ab-eye:hover {
    color: var(--nro-brown);
    background: rgba(102, 51, 0, .08)
}

.ab-cap {
    display: flex;
    gap: 8px;
    align-items: center
}

.ab-cap .ab-fld {
    flex: 1
}

.ab-cap img {
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid rgba(230, 126, 34, .55);
    cursor: pointer;
    background: #fff
}

.ab-go {
    margin-top: 2px;
    padding: 11px 18px;
    font-size: 16.5px
}

.ab-go.busy {
    opacity: .7;
    pointer-events: none
}

.ab-links {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600
}

.ab-links a {
    color: var(--nro-brown);
    opacity: .8
}

.ab-links a:hover {
    opacity: 1;
    color: #d93636;
    text-decoration: underline
}

.ab-note {
    margin: 0;
    font-size: 12px;
    color: var(--tx-3);
    text-align: center
}

.ab-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.ab-msg {
    margin: -4px 0 12px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45
}

.ab-msg.err {
    color: #b91c1c;
    background: #ffe9e9;
    border: 1px solid rgba(255, 77, 77, .5)
}

.ab-msg.ok {
    color: #166534;
    background: #e8fbe9;
    border: 1px solid rgba(22, 163, 74, .45)
}

/* ---------------- Thẻ bài viết ---------------- */
.post {
    display: block;
    padding: 18px 20px;
    transition: transform .18s var(--ease), box-shadow .18s
}

.post:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md)
}

.post.pinned {
    border: 1.5px solid rgba(255, 77, 77, .6);
    background: linear-gradient(180deg, #ffe2cc, var(--nro-light-orange) 160px);
    box-shadow: var(--sh-sm), inset 4px 0 0 var(--nro-red)
}

.post .pin {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #fff;
    background: var(--fire);
    padding: 4px 10px;
    border-radius: var(--pill);
    box-shadow: 0 6px 12px -6px rgba(255, 77, 77, .9)
}

.post-head {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center
}

.post-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex: 0 0 auto;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 2px var(--nro-border), 0 4px 10px -4px rgba(102, 51, 0, .6);
    image-rendering: pixelated
}

.post-author {
    font-family: var(--f-head);
    font-size: 16px;
    font-weight: 800;
    color: var(--nro-brown);
    line-height: 1.2
}

.post.pinned .post-author {
    color: #d93636
}

.post-time {
    font-size: 12px;
    color: var(--tx-3)
}

.post-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    color: var(--nro-brown);
    line-height: 1.3
}

.post:hover .post-title {
    color: #a34100
}

.post-snip {
    margin: 0 0 14px;
    font-size: 14.5px;
    color: var(--tx-2)
}

.post-img {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 8px 20px -12px rgba(51, 26, 0, .7)
}

.post-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .4s var(--ease)
}

.post:hover .post-img img {
    transform: scale(1.02)
}

.post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1.5px dashed rgba(230, 126, 34, .45)
}

.post-acts {
    display: flex;
    gap: 8px
}

.post-acts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--nro-brown);
    background: rgba(255, 255, 255, .5);
    transition: background-color .15s, color .15s
}

.post-acts span:hover {
    background: #fff;
    color: var(--nro-red)
}

.post-foot .cmt {
    font-size: 12.5px;
    color: var(--tx-3);
    font-weight: 600
}

/* ---------------- Hàng lọc ---------------- */
.filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px
}

.filters a {
    padding: 6px 14px;
    border-radius: var(--pill);
    font-weight: 600;
    color: var(--nro-brown);
    background: rgba(255, 236, 214, .55);
    border: 1px solid rgba(102, 51, 0, .12);
    transition: all .15s
}

.filters a:hover {
    background: #fff
}

.filters a.on {
    background: var(--nro-brown);
    color: var(--nro-light-orange);
    border-color: var(--nro-brown)
}

.sortby {
    font-size: 13px;
    font-weight: 600;
    color: var(--nro-brown);
    padding: 6px 12px;
    border-radius: var(--pill);
    background: rgba(255, 236, 214, .55)
}

.sortby span {
    color: var(--nro-red)
}

.empty {
    text-align: center;
    color: var(--tx-3);
    padding: 32px 18px
}

/* ---------------- Phân trang ---------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 12px 0;
    flex-wrap: wrap
}

.pager a,
.pager span {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pill);
    font-family: var(--f-head);
    font-size: 16px;
    font-weight: 700;
    background: rgba(255, 236, 214, .7);
    color: var(--nro-brown);
    border: 1px solid rgba(102, 51, 0, .12);
    transition: all .15s
}

.pager a:hover {
    background: #fff;
    transform: translateY(-1px)
}

.pager .cur {
    background: var(--fire);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 16px -8px rgba(255, 77, 77, .9)
}

/* ---------------- Bố cục chính ---------------- */
.grid-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side);
    gap: 24px;
    align-items: start
}

.col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0
}

.page-pad {
    padding-bottom: 56px
}

/* ---------------- Trang bài viết (Pages/Post.php) — bù style cho class cũ ---------------- */
main>.body {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 18px 16px 40px;
    box-sizing: border-box
}

main .body div.box_forums,
main .body #box_forums {
    float: none !important;
    width: 100% !important
}

main .body .box_list_parent,
main .body .box_list_parent_next {
    float: none !important;
    width: 100% !important;
    background: none !important
}

main .body .box_parent_list_next {
    float: none !important;
    width: 100% !important;
    background: none !important;
    border-bottom: none !important
}

main .body .box_phantrang {
    text-align: left;
    padding: 0 0 14px
}

main .body .backlink a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px 7px 12px;
    border-radius: var(--pill);
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nro-brown) !important;
    background: rgba(255, 236, 214, .7);
    border: 1px solid rgba(102, 51, 0, .15);
    transition: background-color .15s, transform .15s
}

main .body .backlink a:hover {
    background: #fff;
    transform: translateX(-2px)
}

main .body table[cellpadding="0"] {
    background: linear-gradient(180deg, var(--cream-2), var(--nro-light-orange) 160px);
    border: 1px solid rgba(230, 126, 34, .55);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    overflow: hidden
}

main .body .box_list_c_s {
    background: rgba(255, 255, 255, .45) !important;
    background-image: none !important;
    border-right: 1px solid rgba(230, 126, 34, .35);
    vertical-align: top !important;
    padding: 18px 8px !important
}

main .body .box_list_c_s img.avatar {
    width: 46px !important;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 2px var(--nro-border)
}

main .body .comment-box-custom {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 18px 20px !important;
    vertical-align: top !important
}

main .body .box_list_b_s {
    background: none !important;
    border: none !important
}

main .body .box_list_ads {
    float: none !important;
    width: 100% !important;
    color: var(--tx-2);
    font-size: 13px
}

main .body .box_oxx_member {
    float: none !important;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    color: var(--tx-3);
    font-size: 12.5px;
    border-bottom: 1px dashed rgba(230, 126, 34, .45) !important;
    padding-bottom: 8px;
    margin-bottom: 12px
}

main .body .box_oxx_member span,
main .body .box_oxx_member i {
    color: var(--tx-3) !important;
    font-style: normal
}

main .body .post-title-custom {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 22px;
    color: var(--nro-brown);
    margin-bottom: 12px
}

main .body .post-content-custom {
    color: var(--tx-2);
    line-height: 1.7;
    font-size: 14.5px
}

main .body .post-admin-tag {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 0 0 !important
}

main .body .box_oxx_admin a {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--pill);
    background: var(--fire);
    color: #fff !important;
    font-weight: 800;
    font-size: 10.5px !important;
    text-decoration: none
}

main .body .post-content-custom img {
    max-width: 100%;
    height: auto;
    border-radius: 10px
}

main .body .post-content-custom table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden
}

main .body .post-content-custom table th,
main .body .post-content-custom table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(230, 126, 34, .3);
    font-size: 13px
}

main .body .post-content-custom table th {
    background: rgba(255, 204, 153, .45);
    font-family: var(--f-head);
    color: var(--nro-brown)
}

/* ---------------- Footer ---------------- */
.site-foot {
    margin-top: 34px;
    background: linear-gradient(180deg, var(--nro-brown), var(--brown-d));
    color: rgba(255, 236, 214, .88);
    border-top: 3px solid var(--nro-orange)
}

.site-foot .in {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 34px 16px 22px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 26px
}

.site-foot h4 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--nro-light-orange)
}

.site-foot p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.65
}

.site-foot ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.site-foot li {
    margin-bottom: 7px
}

.site-foot li a {
    font-size: 13.5px;
    color: rgba(255, 236, 214, .82);
    transition: color .15s
}

.site-foot li a:hover {
    color: #fff;
    text-decoration: underline
}

.foot-brand img {
    height: 46px;
    object-fit: contain;
    margin-bottom: 10px
}

.foot-bottom {
    border-top: 1px solid rgba(255, 204, 153, .2);
    padding: 14px 16px;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255, 236, 214, .7)
}

/* ---------------- Nút lên đầu ---------------- */
#backTop {
    position: fixed;
    bottom: 22px;
    right: 14px;
    z-index: 9999;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s ease-out;
    opacity: 0;
    border: none;
    background: none
}

#backTop.show {
    opacity: 1
}

#backTopimg:hover {
    opacity: .8 !important
}

/* ---------------- Thông báo nhỏ ---------------- */
.toast-mini {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 99999;
    min-width: 260px;
    max-width: 380px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    animation: toastIn .25s ease;
    font-size: 14px;
    line-height: 1.45
}

.toast-mini.ok {
    background: linear-gradient(135deg, #18b76a, #0c8f52)
}

.toast-mini.err {
    background: linear-gradient(135deg, #f04438, #d92d20)
}

.toast-mini .content {
    flex: 1
}

.toast-mini .close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: .9;
    padding: 0;
    line-height: 1
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px)
    }

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

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
    .grid-main {
        grid-template-columns: minmax(0, 1fr)
    }

    .site-foot .in {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .foot-brand {
        grid-column: 1/-1
    }
}

@media (max-width: 767px) {
    .site-head .bar {
        gap: 12px;
        height: 60px
    }

    .site-head .logo img {
        height: 36px
    }

    .site-nav {
        gap: 2px
    }

    .site-nav a {
        padding: 7px 11px;
        font-size: 14px
    }

    .head-acct a {
        padding: 6px 12px;
        font-size: 13.5px
    }

    .head-acct a.acct-user .nm {
        max-width: 110px
    }

    .hero {
        height: 330px;
        border-radius: 18px
    }

    .hero-body {
        left: 22px;
        right: 22px;
        bottom: 26px
    }

    .hero-title {
        font-size: 34px
    }

    .hero-sub {
        font-size: 14px
    }

    .hero-veil {
        background: linear-gradient(0deg, rgba(51, 26, 0, .9) 0%, rgba(102, 51, 0, .55) 55%, rgba(102, 51, 0, .15) 100%)
    }

    .hero-dots {
        top: 16px;
        bottom: auto;
        right: 16px
    }

    .post {
        padding: 16px
    }

    .post-title {
        font-size: 17px
    }
}

@media (max-width: 520px) {
    .site-head .bar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px 6px;
        row-gap: 6px
    }

    .site-nav {
        order: 3;
        width: 100%;
        padding-bottom: 2px
    }

    .hero-wrap {
        margin-top: 14px
    }

    .hero {
        height: 360px
    }

    .hero-title {
        font-size: 30px
    }

    .hero-cta .btn-lg {
        flex: 1 1 auto;
        padding: 11px 16px;
        font-size: 15px
    }

    .tabs a {
        padding: 8px 12px;
        font-size: 14px
    }

    .post-acts span {
        padding: 5px 9px
    }

    .site-foot .in {
        grid-template-columns: 1fr 1fr;
        gap: 22px
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }

    html {
        scroll-behavior: auto
    }
}