/*
 * Nam Quoc Son Ha - Organic Wuxia UI V2
 * 2026-09-24
 * Muc tieu: loai bo cam giac "khung vuong xep hop", giu tong mau charcoal / antique gold.
 * File nay chi override giao dien, khong thay doi logic PHP / API / JS.
 */

:root{
    --nq-gold:#d9b66f;
    --nq-gold-soft:rgba(217,182,111,.20);
    --nq-gold-faint:rgba(217,182,111,.08);
    --nq-ink:#0c1215;
    --nq-ink-2:#11191c;
    --nq-ink-3:#182124;
    --nq-line:rgba(223,190,129,.16);
    --nq-line-soft:rgba(223,190,129,.095);
    --nq-shadow:0 22px 55px rgba(0,0,0,.34);
    --nq-cut:12px;
}

/* ===== 1. Ba khoi lon: doi tu hop vuong sang "phien da / cuon thu" bat doi xung ===== */
.dashboard-shell{
    gap:24px;
    max-width:1600px;
    padding:0 30px;
}

.panel-frame,
.auth-card{
    border:0 !important;
    background:
        radial-gradient(circle at 8% 0%,rgba(225,188,121,.065),transparent 26%),
        linear-gradient(145deg,rgba(24,31,33,.975),rgba(8,14,17,.975)) !important;
    box-shadow:var(--nq-shadow),inset 0 1px 0 rgba(255,244,219,.045),inset 0 0 0 1px rgba(221,188,128,.10) !important;
    position:relative;
}

.sidebar.panel-frame{
    border-radius:34px 10px 34px 10px !important;
}

.content.panel-frame{
    border-radius:12px 36px 12px 36px !important;
}

.admin-panel.panel-frame{
    border-radius:36px 12px 36px 12px !important;
}

.auth-card{
    border-radius:38px 12px 38px 12px !important;
}

.panel-frame::before,
.panel-frame::after,
.auth-card::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    pointer-events:none;
    z-index:2;
    border:0 !important;
}

.panel-frame::before,
.auth-card::before{
    top:0 !important;
    left:34px !important;
    width:92px !important;
    height:2px !important;
    background:linear-gradient(90deg,transparent,var(--nq-gold),transparent) !important;
    opacity:.72;
}

.panel-frame::after{
    right:30px !important;
    bottom:0 !important;
    width:76px !important;
    height:2px !important;
    background:linear-gradient(90deg,transparent,rgba(217,182,111,.58),transparent) !important;
    opacity:.72;
}

/* ===== 2. Sidebar: menu tro thanh cac "the lua" thay vi o chu nhat ===== */
.user-box{
    margin:0 10px;
    padding:22px 10px 18px;
    border-bottom:0 !important;
    position:relative;
}
.user-box::after{
    content:"";
    position:absolute;
    left:8px;
    right:22px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,var(--nq-gold-soft),transparent);
}

.side-nav{
    padding:12px 10px 14px !important;
}
.side-nav a{
    position:relative;
    margin:4px 0 !important;
    padding:13px 13px !important;
    border:0 !important;
    border-radius:20px 7px 20px 7px !important;
    background:transparent;
    overflow:hidden;
    transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.side-nav a::before{
    content:"";
    position:absolute;
    left:0;
    top:26%;
    bottom:26%;
    width:2px;
    border-radius:99px;
    background:transparent;
    transition:background .18s ease,top .18s ease,bottom .18s ease;
}
.side-nav a:hover,
.side-nav a.active{
    color:#f2dfb9;
    background:linear-gradient(100deg,rgba(213,173,104,.13),rgba(213,173,104,.025) 72%,transparent) !important;
    box-shadow:inset 0 0 0 1px rgba(222,187,125,.07);
    transform:translateX(3px);
}
.side-nav a:hover::before,
.side-nav a.active::before{
    top:18%;
    bottom:18%;
    background:linear-gradient(var(--nq-gold),rgba(217,182,111,.18));
}

.logout-form button{
    border-radius:22px 7px 22px 7px !important;
}

/* ===== 3. Tieu de / divider: bo duong ke ngang cung ===== */
.section-title,
.admin-title{
    position:relative;
    border-bottom:0 !important;
    padding-bottom:20px !important;
}
.section-title::after,
.admin-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:4px;
    width:min(72%,520px);
    height:1px;
    background:linear-gradient(90deg,rgba(217,182,111,.34),rgba(217,182,111,.06),transparent);
}

/* ===== 4. Admin launcher: cac o vuong => huy hieu vat goc ===== */
.admin-panel .admin-grid{
    gap:14px !important;
}
.admin-panel .admin-card{
    min-height:118px !important;
    border:0 !important;
    border-radius:0 !important;
    clip-path:polygon(
        14px 0,
        calc(100% - 7px) 0,
        100% 7px,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        7px 100%,
        0 calc(100% - 7px),
        0 14px
    );
    background:
        radial-gradient(circle at 50% -25%,rgba(226,190,124,.12),transparent 56%),
        linear-gradient(145deg,rgba(37,44,45,.86),rgba(14,20,22,.86)) !important;
    box-shadow:inset 0 0 0 1px rgba(222,187,125,.12) !important;
    transition:transform .18s ease,filter .18s ease,background .18s ease !important;
}
.admin-panel .admin-card:hover,
.admin-panel .admin-card.active{
    transform:translateY(-3px);
    filter:drop-shadow(0 10px 13px rgba(0,0,0,.22));
    background:
        radial-gradient(circle at 50% -20%,rgba(230,190,119,.22),transparent 58%),
        linear-gradient(145deg,rgba(55,48,35,.90),rgba(17,22,23,.92)) !important;
}
.admin-panel .admin-card .admin-icon{
    filter:drop-shadow(0 4px 10px rgba(222,180,102,.15));
}

/* ===== 5. KPI / cards: ngon ngu vat goc, khong con vien hop ===== */
.admin-kpi,
.admin-form-card,
.admin-info-card,
.inner-card,
.simple-card,
.simple-cards>div,
.news-list article,
.gift-created-summary>div,
.character-detail-grid>div,
.security-detail-grid>div,
.gift-created-items,
.recharge-effective-status{
    border:0 !important;
    border-radius:0 !important;
    clip-path:polygon(
        var(--nq-cut) 0,
        calc(100% - 5px) 0,
        100% 5px,
        100% calc(100% - var(--nq-cut)),
        calc(100% - var(--nq-cut)) 100%,
        5px 100%,
        0 calc(100% - 5px),
        0 var(--nq-cut)
    );
    background:linear-gradient(145deg,rgba(225,188,123,.065),rgba(255,255,255,.017)) !important;
    box-shadow:inset 0 0 0 1px rgba(222,188,128,.12) !important;
}

.admin-kpi{
    position:relative;
    padding-left:18px !important;
}
.admin-kpi::before{
    content:"";
    position:absolute;
    left:0;
    top:17px;
    bottom:17px;
    width:2px;
    background:linear-gradient(var(--nq-gold),transparent);
    opacity:.62;
}

/* ===== 6. Tabs / toolbar / bulk action: dang dai lua + capsule ===== */
.admin-tabs{
    border:0 !important;
    border-radius:20px 7px 20px 7px !important;
    padding:7px !important;
    background:linear-gradient(100deg,rgba(255,255,255,.028),rgba(216,173,103,.04),rgba(255,255,255,.014)) !important;
    box-shadow:inset 0 0 0 1px var(--nq-line-soft);
}
.admin-tabs button{
    border:0 !important;
    border-radius:18px 6px 18px 6px !important;
    padding:9px 14px !important;
}
.admin-tabs button.active{
    color:#f1d08f !important;
    background:linear-gradient(110deg,rgba(216,173,103,.18),rgba(216,173,103,.055)) !important;
    box-shadow:inset 0 0 0 1px rgba(217,182,111,.18);
}

.bulk-bar{
    border:0 !important;
    border-radius:22px 7px 22px 7px !important;
    background:linear-gradient(100deg,rgba(255,255,255,.025),rgba(216,173,103,.035),rgba(255,255,255,.012)) !important;
    box-shadow:inset 0 0 0 1px var(--nq-line-soft);
}

/* ===== 7. Table container: mot khoi cuon thu, row khong bi chia thanh nhieu hop ===== */
.admin-data-area,
.member-list{
    border:0 !important;
    border-radius:24px 8px 24px 8px !important;
    background:linear-gradient(180deg,rgba(5,10,12,.46),rgba(8,13,15,.30)) !important;
    box-shadow:inset 0 0 0 1px rgba(222,188,128,.12),0 12px 28px rgba(0,0,0,.08);
    overflow:auto;
}
.admin-table th{
    background:linear-gradient(100deg,#20282a,#1a2224) !important;
}
.admin-table tr:hover td{
    background:linear-gradient(90deg,rgba(217,182,111,.045),rgba(217,182,111,.012)) !important;
}

/* ===== 8. Input / select / button: bo goc vuong dong loat ===== */
:is(
    .admin-toolbar input,.admin-toolbar select,
    .admin-filter-grid input,.admin-filter-grid select,
    .admin-form-card input,.admin-form-card select,
    .auth-form input,.auth-form textarea,
    .inner-card input,.inner-card select,
    .nq-modal-card input,.nq-modal-card textarea,
    .gift-item-row input,.gift-item-row select
){
    border-radius:16px 5px 16px 5px !important;
    border-color:rgba(216,186,137,.18) !important;
    background:linear-gradient(135deg,#11191c,#0e1518) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

:is(
    button,.mini-btn,.primary-btn,.danger-btn,
    .logout-form button,.rank-tab,.player-pick,.auth-tab,.download-btn
){
    border-radius:18px 6px 18px 6px !important;
}

/* ===== 9. Notice / thong tin: thanh thu phap thay vi hop chu nhat ===== */
.admin-note,
.notice-box{
    border:0 !important;
    border-left:2px solid rgba(217,182,111,.72) !important;
    border-radius:0 18px 18px 0 !important;
    background:linear-gradient(90deg,rgba(216,173,103,.075),rgba(216,173,103,.018),transparent) !important;
}

/* ===== 10. Modal / drawer / download / recharge: cong bat doi xung ===== */
.nq-modal-card,
.character-detail-card,
.admin-drawer,
.download-card,
.recharge-history-card,
.recharge-milestone,
.milestone{
    border:0 !important;
    border-radius:28px 8px 28px 8px !important;
    background:
        radial-gradient(circle at 10% 0%,rgba(224,186,119,.07),transparent 28%),
        linear-gradient(145deg,rgba(24,31,33,.98),rgba(8,13,16,.98)) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.50),inset 0 0 0 1px rgba(222,188,128,.12) !important;
}

/* Recharge / gift / item rows: tranh lap lai cac o vuong nho */
.recharge-milestone li,
.gift-item-row,
.recharge-history-card,
.recharge-tier-preview,
.audit-row{
    border-radius:18px 6px 18px 6px !important;
    border-color:rgba(222,188,128,.10) !important;
}

.milestone-progress{
    border-radius:999px;
}
.milestone-progress span{
    border-radius:999px;
}

/* ===== 11. Profile rows: tach bang khoang am, khong dong khung tung dong ===== */
.info-row,
.member-row{
    border-bottom:0 !important;
    position:relative;
}
.info-row::after,
.member-row::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
}

/* ===== 12. Focus / hover ===== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:2px solid rgba(229,194,126,.92) !important;
    outline-offset:3px !important;
}

/* ===== Responsive ===== */
@media(max-width:1280px){
    .dashboard-shell{gap:18px;padding:0 18px;}
}

@media(max-width:820px){
    .dashboard-shell{padding:0 12px;gap:16px;}
    .sidebar.panel-frame,
    .content.panel-frame,
    .admin-panel.panel-frame,
    .auth-card,
    .nq-modal-card,
    .character-detail-card,
    .admin-drawer,
    .download-card{
        border-radius:24px 8px 24px 8px !important;
    }
    .side-nav a{border-radius:16px 5px 16px 5px !important;}
}

@media(prefers-reduced-motion:reduce){
    .side-nav a,
    .admin-panel .admin-card{transition:none !important;}
}