/* ============================================================
   MODERN THEME LAYER
   Lớp giao diện hiện đại - nạp SAU các file CSS gốc để "nâng cấp"
   màu sắc, bo góc, đổ bóng, hiệu ứng & font chữ mà KHÔNG đổi
   float/width/position (giữ nguyên toàn bộ layout cũ để không
   vỡ giao diện các trang PHP hiện có).
   ============================================================ */

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

:root{
    --brand-1:#ff7a1a;
    --brand-2:#ff3d1f;
    --brand-3:#ffb347;
    --gold:#ffcf5c;
    --dark:#2b160a;
    --card-bg:#fffaf3;
    --card-bg-2:#fff2df;
    --shadow-lg: 0 18px 40px -12px rgba(120,40,0,.35);
    --shadow-md: 0 8px 22px -8px rgba(120,40,0,.30);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

/* ---------- Typography ---------- */
body, table, input, textarea, select, button{
    font-family:'Be Vietnam Pro', Arial, sans-serif !important;
}
h1,h2,h3,h4, .c, .d, .box_title_name, .topic_name, tr.menu td, tr.menu td a,
button, .w3-button{
    font-family:'Baloo 2','Be Vietnam Pro', Arial, sans-serif !important;
    letter-spacing:.2px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#fbe3c6; }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--brand-1),var(--brand-2));
    border-radius:10px;
}

/* ---------- Page background ---------- */
body{
    background:
        radial-gradient(circle at 15% 0%, #ffe2b8 0%, transparent 45%),
        radial-gradient(circle at 85% 10%, #ffd0b3 0%, transparent 40%),
        linear-gradient(180deg,#fff3e2 0%, #ffe6cc 40%, #ffd9b0 100%) !important;
    min-height:100vh;
}

/* Give the whole app a touch more breathing room on larger screens
   while keeping the original mobile-first sizing untouched. */
@media (min-width:760px){
    .body_body{ max-width:760px !important; }
}
@media (min-width:1100px){
    .body_body{ max-width:900px !important; }
}

/* ---------- Top disclaimer strip ---------- */
.div-12{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:rgba(43,22,10,.85);
    color:#ffe9c7 !important;
    border-radius:999px;
    padding:5px 14px !important;
    width:fit-content;
    margin:6px auto -2px !important;
    box-shadow:var(--shadow-md);
}
.div-12 span{ color:#ffe9c7 !important; }

/* ---------- Logo ---------- */
.a img{
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
    transition:transform .35s ease;
}
.a img:hover{ transform:scale(1.04) rotate(-1deg); }

/* ---------- Hero / top gradient bar ---------- */
.bg_top{
    background:linear-gradient(135deg,var(--brand-3) 0%, var(--brand-1) 45%, var(--brand-2) 100%) !important;
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.35);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ---------- Nav menu (table based) ---------- */
.menu2{
    background:rgba(255,255,255,.15);
    border-radius:999px;
    padding:4px !important;
    box-shadow:var(--shadow-md);
}
tr.menu td, td#selected{
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08)) !important;
    border:none !important;
    border-radius:999px !important;
    margin:2px;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
tr.menu td:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px -6px rgba(0,0,0,.35);
}
tr.menu td a, tr.menu td#selected a{
    font-weight:700 !important;
    text-transform:uppercase;
    font-size:.85em;
    letter-spacing:.5px;
}
td#selected{
    background:linear-gradient(135deg,var(--gold),var(--brand-1)) !important;
    box-shadow:0 6px 16px -4px rgba(255,140,0,.6) !important;
}
td#selected a{ color:#3a1400 !important; }

/* ---------- Buttons (w3-button used across the whole site) ---------- */
.w3-button, button{
    border-radius:999px !important;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
    box-shadow:var(--shadow-md);
    border:none !important;
}
.w3-button:hover, button:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:0 12px 26px -8px rgba(0,0,0,.4);
}
.w3-button:active, button:active{ transform:translateY(0); }
.w3-red, .w3-hover-red:hover{
    background:linear-gradient(135deg,var(--brand-3),var(--brand-2)) !important;
    color:#fff !important;
}
.w3-hover-green:hover{
    background:linear-gradient(135deg,#57c97a,#2f9e56) !important;
    color:#fff !important;
}

/* ---------- Main content panels ---------- */
.bg-content2, .bg-content222{
    background:var(--card-bg) !important;
    border-radius:var(--radius-lg) !important;
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(255,255,255,.6);
    overflow:hidden;
}
.bg-content{
    background:var(--card-bg-2) !important;
    border-radius:var(--radius-md) !important;
    box-shadow:0 6px 16px -8px rgba(120,40,0,.25);
    margin:8px 4px !important;
}
.bg-content .title{
    color:var(--brand-2) !important;
    border-bottom:2px solid var(--gold) !important;
    font-weight:700;
    padding-bottom:4px;
}
.body-content{
    background:transparent !important;
}

/* ---------- User panel ---------- */
.box_welcome_team{
    background:rgba(255,255,255,.55);
    border-radius:var(--radius-md);
    padding:10px !important;
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(6px);
}

/* ---------- Icon grid (download / zalo / gift code etc.) ---------- */
div#columns figure{
    background:rgba(255,255,255,.55);
    border-radius:var(--radius-sm);
    padding:8px !important;
    margin:4px !important;
    box-shadow:var(--shadow-md);
    transition:transform .2s ease, box-shadow .2s ease;
}
div#columns figure:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 14px 26px -10px rgba(120,40,0,.45);
}

/* ---------- Forms ---------- */
input[type="text"], input[type="password"], textarea, select{
    border:1.5px solid #ffcf9c !important;
    border-radius:var(--radius-sm) !important;
    padding:6px 10px !important;
    background:#fffefb !important;
    transition:border-color .2s ease, box-shadow .2s ease;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus{
    outline:none !important;
    border-color:var(--brand-1) !important;
    box-shadow:0 0 0 3px rgba(255,122,26,.25) !important;
}

/* ---------- Pagination ---------- */
.pagelink, .pagecurrent{
    border-radius:999px !important;
    border:none !important;
    box-shadow:var(--shadow-md);
}
.pagecurrent{
    background:linear-gradient(135deg,var(--brand-1),var(--brand-2)) !important;
}
.pagelink:hover{
    background:linear-gradient(135deg,var(--brand-1),var(--brand-2)) !important;
}

/* ---------- Footer ---------- */
.footer{
    background:linear-gradient(135deg,var(--brand-2) 0%, var(--brand-1) 100%) !important;
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.3);
    border-radius:var(--radius-lg) !important;
}
.copyright{
    color:#5c3418 !important;
    font-weight:500;
}
.copyright a{ color:var(--brand-2) !important; font-weight:700; }

/* ---------- Forum-style boxes (top bars) : cosmetic only ---------- */
#box_forums .box_home,
#box_forums .box_list_parent .box_parent_list,
#box_forums .box_list_chuyenmuc .box_topss,
#box_forums .box_list_chuyenmuc .box_topsss,
#box_forums .box_thong_ke .box_thongke_top{
    background:linear-gradient(135deg,var(--brand-3),var(--brand-2)) !important;
    border-radius:var(--radius-sm);
    box-shadow:0 4px 10px -4px rgba(120,40,0,.4);
}
#box_forums .box_list_parent .box_parent_list_next .box_phantrang{
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
#box_forums .box_list_chuyenmuc .box_midss .box_comment_new .box_list_b{
    box-shadow:var(--shadow-md);
    border-radius:var(--radius-sm) !important;
}

/* ---------- Back to top button ---------- */
#backTop{
    background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
    border-radius:50%;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-md);
}
#backTopimg{ filter:brightness(0) invert(1); width:18px; }

/* ---------- Small motion polish ---------- */
@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}
.bg-content2{ animation:fadeInUp .45s ease both; }