#backTop {
    position: fixed;
    bottom: 60px;
    right: 2px;
    z-index: 9999;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    border: 1px solid #797979;
    border: none;
}
.grab {cursor: -webkit-grab; cursor: grab;}
.font-size-14px{
    font-size: 14px;
}
#backTop span {
    color: #453c3c;
    display: block;
    font-weight: 900;
}
body{
    font-family: Arial !important;
}
#backTopimg:hover {
    opacity: 0.8 !important;
}

#backTop.show {
    opacity: 1;
}

@media (max-width: 500px) {
    .font-s17{
        font-size: 13px !important;
    }
}

@media (max-width: 400px) {
    #backTop.show {
        display: block;
    }
}

body {
    background-image: url("/uploads/nen.png");
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center;
}

.line-height-unset{
    line-height:unset !important; 
}
.header {
    margin: auto;
}
.img_grayscale{
    filter: grayscale(1);
}

.active_grayscale{
    filter: none;
}

.img_grayscale:hover{
    filter: none !important;
}

.transform-180 {
    transform: rotate(180deg);
}

.hearder-content .menu .row :hover {
    background-image: url("/static/img/3.png") !important;
    background-repeat: no-repeat, repeat;
    background-size: inherit !important;
    background-position: center;
    /* margin: 1rem 0rem; */
}
.btn-register:hover{
    background-image: url("/static/img/3.png") !important;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center;
}
.btn-register{
    background-image: url("/static/img/2.png") !important;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center;
}

.mr-3rem{
    margin: 3rem;
}
.hearder-content .menu .row .col-3 {
    background-image: url("/static/img/2.png");
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center;
    /* margin: 1rem 0rem; */
}

.active-menu {
    background-image: url("/static/img/3.png") !important;

    /* margin: 1rem 0rem; */
}

.content {
    margin: auto;
}


.menu {
    border: 5px solid #fd7e14;
    background-color: #654520;
}

.menu .row {
    padding-left: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.body-content {
    border-bottom: 5px solid #fd7e14;
    border-left: 5px solid #fd7e14;
    border-right: 5px solid #fd7e14;
    background-color: rgb(248, 232, 201);
}

.container_n {
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}

.text-10px {
    font-size: 10px !important;
}

.text-15px {
    font-size: 12px !important;
}

.text-16px {
    font-size: 16px !important;
}


.w-20 {
    width: 20% !important;
}

.icon-top {
    width: 20px;
    margin-left: -5px;
    margin-top: -5px;
}

.icon-bot {
    width: 20px;
    margin-right: -5px;
    margin-bottom: -5px;
}

.img-content {
    width: 100%;
    height: 100%;
}

.hr-content {
    height: 2px !important;
    opacity: 1 !important;
    color: #fd7e14 !important;
    background-color: #fd7e14 !important;
}

.col-right-1 {
    background-image: url(/uploads/brg-right.png);
    background-size: 100% 100%;
    padding: 10% 1%;
}
.text-purple {
   color: #6f42c1 !important;
}
.col-right-1 .header-dl-game{
    /* background-image: url(../img/4.png);
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center; */
    /* width: 60%;
    margin: 0px auto;
    padding: 2.5%;
    position: relative;
    top: -1.2rem; */
    /* position: absolute;
    top: 1.5%; */
}

.col-right-1 .content-dl-game{
    /* margin-top: -15%; */
}

.font-s17{
    font-size: 17px;
}

.col-right-2 {
    /* background: url("../../static/img/fc-bg.png") no-repeat;
    background-size: 100% 100%; */
    background-color:#654520;
    background-size: 100% 100%;
    padding: 1% 1%;
}


/* ==========================================================================
   Trang Tai khoan - Nhan vat (AccountWeb.md)
   --------------------------------------------------------------------------
   Bo sung vao chinh file CSS loi cua demo de toan trang dung MOT bang mau.
   Khong dat mau moi: chi dung lai dung 3 mau ban demo da dung o tren
     #fd7e14  vien cam (.menu, .body-content, .hr-content)
     #654520  nau dam (nen .menu, .col-right-2, so trang o Trang chu)
     rgb(248, 232, 201)  nen giay cua .body-content
   ========================================================================== */

/* Nhan cua mot dong thong tin ("Tài khoản", "Cấp", "Bạc"...). */
.nv-label {
    color: #654520;
    font-weight: 700;
}

/* Tieu de mot khoi thong tin ("Nhân Vật", "Thông Tin Cơ Bản", ten nhan vat...) trong khu Tai
   khoan/Nhan vat. Dung class nay o MOI tieu de thay vi tu lap "fw-bold text-16px" +
   style="color:#654520" o tung trang - de moi tieu de luon cung mot co chu/mau, khong con
   tinh trang noi to noi nho, noi mau nay noi mau kia. */
.acc-heading {
    color: #654520;
    font-weight: 700;
    font-size: 16px;
}

/* Khung mot nhan vat - vien cam giong .body-content, nen sang hon nen giay mot chut de
   tach khoi khung ngoai. */
.nv-card {
    border: 2px solid #fd7e14;
    background-color: rgb(253, 245, 228);
    padding: 10px;
    margin-bottom: 12px;
}

/* Khung nhan vat (_card.ejs, chitiet.ejs): nhan vat dung tren be da
   /static/img/be-nhan-vat.png (iconClient 1241 cua Client, da giai 51 byte dau). Hoat hinh "tho"
   la CSS lien tuc (co gian nhe theo chieu doc, goc o ban chan) thay cho doi qua lai 2 file anh -
   khung 2 cua nhan vat chi la khung 1 thap hon vai px nen ket qua giong nhau ma muot hon. */
.nv-stage {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    width: 90px;
    height: 104px;
}

.nv-stage .nv-stand {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 84px;
    transform: translateX(-50%);
}

.nv-stage .nv-char {
    position: absolute;
    left: 50%;
    bottom: 14px;
    height: 80px;
    width: auto;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    animation: nv-breathe 1.8s ease-in-out infinite;
}

.nv-stage-lg {
    width: 150px;
    height: 160px;
}

.nv-stage-lg .nv-stand {
    width: 140px;
}

.nv-stage-lg .nv-char {
    bottom: 22px;
    height: 128px;
}

@keyframes nv-breathe {
    0%, 100% { transform: translateX(-50%) scale(1, 1); }
    50% { transform: translateX(-50%) scale(1.012, 0.978); }
}

@media (prefers-reduced-motion: reduce) {
    .nv-stage .nv-char {
        animation: none;
    }
}

/* Chu khu Tai khoan / Nhan vat: nhan nau nhat, gia tri dam, so canh deu (tabular-nums). */
.acc-box {
    border: 2px solid #fd7e14;
    background-color: rgb(253, 245, 228);
    padding: 12px;
    margin-bottom: 12px;
    text-align: left;
}

.acc-name {
    color: #654520;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.acc-sub {
    color: #8a6a3a;
    font-size: 12px;
}

.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    margin-top: 8px;
}

.acc-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 400px) {
    .acc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.acc-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #f1c78d;
    min-width: 0;
}

.acc-label {
    color: #8a6a3a;
    font-size: 13px;
    white-space: nowrap;
}

.acc-value {
    color: #2b1d0e;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.acc-section {
    margin: 14px 0 4px;
    color: #654520;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #fd7e14;
    padding-bottom: 2px;
    text-align: left;
}

/* Nut chon may chu o dau trang Tai khoan. */
.acc-servers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.acc-servers a,
.acc-servers span {
    padding: 2px 10px;
    border: 1px solid #f5b26b;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #654520;
    background-color: #fff;
}

.acc-servers span {
    border-color: #fd7e14;
    background-color: #fd7e14;
    color: #fff !important;
}

/* The nhan vat o trang Tai khoan: khung nhan vat ben trai, thong tin ben phai. */
.nv-card-body {
    display: flex;
    gap: 12px;
    align-items: stretch;
    text-align: left;
}

.nv-card-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nv-card-info .acc-grid {
    margin-bottom: 8px;
}

/* Icon nhan vat i1..i9.png dung trong bang - nho, de canh voi dong chu. */
.nv-icon {
    height: 26px;
    width: auto;
    vertical-align: middle;
}

/* Bang danh sach nhan vat. Khung .container_n dat text-10px cho ca trang, khong khai lai
   thi bang se bi thua ke 10px va khong doc noi. */
.tbl-nv {
    font-size: 12px;
    margin-bottom: 0;
}

.tbl-nv thead th {
    background-color: #654520;
    color: #ffffff;
    font-weight: 700;
    border-color: #fd7e14;
    white-space: nowrap;
}

.tbl-nv td,
.tbl-nv th {
    border-color: #fd7e14;
    vertical-align: middle;
    /* Khung .container_n cua demo chi rong 630px - o hep het co de bang 7 cot van vua, khong
       phai cuon ngang o may bang ~600-768px. */
    padding: 4px 6px;
}

/* Cot so tien khong duoc xuong dong giua chung so. */
.tbl-nv td.text-end,
.tbl-nv th.text-end {
    white-space: nowrap;
}

/* O trong (chua tao nhan vat) - lam nhat de phan biet ngay voi o da co nhan vat. */
.nv-empty {
    border: 2px dashed #fd7e14;
    background-color: transparent;
    color: #8a7a5c;
    padding: 14px;
    margin-bottom: 12px;
    text-align: center;
}

/* Huy hieu nho: Rank, Cap PK, Khoa EXP. */
.nv-badge {
    display: inline-block;
    background-color: #654520;
    color: #ffffff;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================================================
   Nut bam chung cua ca web (.ng-btn) - cung kieu nut cot menu (.side-btn) va menu chinh:
   anh 2.png (re chuot / dang chon: 3.png). Khung CO DINH 130px dung ti le anh goc 120x25,
   khong co gian theo chu nen anh nen khong bi keo meo. Dung cho <a>, <button> va nut submit.
   ========================================================================== */
.ng-btn {
    display: inline-block;
    flex: 0 0 130px;
    width: 130px;
    padding: 5px 4px;
    background: url("/static/img/2.png") center / 100% 100% no-repeat;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.ng-btn:hover,
.ng-btn:focus {
    background-image: url("/static/img/3.png");
    color: #fff;
}

/* Truong form chung: nhan tren, o nhap duoi, goi y nho. */
.ng-form {
    text-align: left;
}

.ng-field {
    margin-bottom: 14px;
    text-align: left;
}

.ng-label {
    display: block;
    margin-bottom: 4px;
    color: #654520;
    font-size: 14px;
    font-weight: 700;
}

.ng-hint {
    display: block;
    margin-top: 3px;
    color: #8a7a5c;
    font-size: 12px;
    font-weight: 400;
}

/* Hang nut (partials/nav-buttons.ejs, cuoi form): giua khung, tu xuong hang khi hep. */
.ng-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

.ng-btn-row form {
    margin: 0;
}

/* ==========================================================================
   Khu Tai khoan / Quan Ly Server chia 2 cot nhu Trang Chu (partials/side-menu.ejs)
   --------------------------------------------------------------------------
   Cot trai = noi dung (col-8), cot phai = khung menu doc vien cam (nhu .nv-card) va nut
   2.png/3.png cua menu chinh. Khong them mau moi.
   ========================================================================== */
.side-main .container {
    padding-left: 0;
    padding-right: 0;
}

.side-main .content-new {
    padding: 0.5rem 0 0 !important;
}

/* Tieu de khung menu - thay cho anh chu co san (14.png "TAI GAME") vi chu da in chet trong anh. */
.side-head {
    position: relative;
    display: inline-block;
    min-width: 70%;
    padding: 4px 12px;
    background-color: #654520;
    border: 2px solid #fd7e14;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    z-index: 2;
}

.side-head-deco {
    position: absolute;
    left: -12px;
    top: -10px;
    display: inline-block;
    line-height: 0;
    transform: scaleX(-1);
}

/* Khung menu: vien cam + nen cam nhat giong the .nv-card ben cot trai. */
.side-box {
    border: 2px solid #fd7e14;
    background-color: rgb(253, 245, 228);
    margin-top: -14px;
    padding: 20px 8% 12px;
}

.side-btn {
    display: block;
    width: 100%;
    max-width: 130px;
    margin: 8px auto 0;
    padding: 5px 4px;
    font-size: 12px;
    line-height: 16px;
    background-image: url("/static/img/2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.side-btn:hover {
    background-image: url("/static/img/3.png");
    color: #fff;
}

/* Cot trai chi con ~380px: KHONG de bang cuon ngang.
   - Trang co san ban the cho dien thoai (Tai khoan, Bai viet, Giftcode: khoi .d-sm-none) thi
     luon dung ban the, an bang nhieu cot (.d-none.d-sm-block).
   - Bang con lai (4-5 cot) cho chu xuong dong; ten/ma dai be giua chu thay vi day rong bang. */
.side-main .d-none.d-sm-block {
    display: none !important;
}

.side-main .d-sm-none {
    display: block !important;
}

.side-main .table-responsive {
    overflow-x: visible;
}

.side-main .tbl-nv td,
.side-main .tbl-nv th {
    padding: 4px;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Khu Quan Ly Server (routes/admin.js) - cung khung 630px nhu moi trang
   --------------------------------------------------------------------------
   Menu nhom ben phai (partials/side-menu.ejs), icon vat pham va trang Tra Cuu (static/js/admin.js).
   ========================================================================== */
/* Cot noi dung khu quan tri (form-open.ejs) - .container_n dat 10px cho ca trang, qua nho de thao tac. */
.adm-main {
    font-size: 13px;
}

/* Ten nhom trong cot menu va trang Tong Quan. */
.side-group,
.adm-group {
    margin-top: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid #fd7e14;
    color: #654520;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
}

.adm-group {
    font-size: 13px;
    margin: 4px 0 8px;
}

/* O loi vao mot muc o trang Tong Quan. */
.adm-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 10px;
    border: 2px solid #fd7e14;
    background-color: rgb(253, 245, 228);
    color: #654520;
    text-decoration: none;
}

.adm-tile:hover {
    background-color: #fff;
    color: #654520;
}

/* Thanh cong cu dau trang quan tri: nut chinh + o loc nam cung mot hang. */
.adm-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.adm-bar .form-control,
.adm-bar .form-select {
    width: auto;
    flex: 1 1 160px;
}

.adm-bar .adm-q {
    flex: 2 1 260px;
}

.lookup-row {
    cursor: pointer;
}

/* Trang Nhan Vat: so hang tron (top 3 mau do), o chi so dang xep hang (.adm-hl) to mau. */
.adm-rank {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #654520;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.adm-rank-top {
    background-color: #dc3545;
}

.acc-item.adm-hl {
    border-bottom-color: #dc3545;
}

.acc-item.adm-hl .acc-label,
.acc-item.adm-hl .acc-value {
    color: #dc3545 !important;
}

/* Icon vat pham iconClient zoom2 (22x28) - admin.js dien anh vao [data-item-icon]. */
.item-ic {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 28px;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: pixelated;
}

.item-ic-lg {
    width: 33px;
    height: 42px;
}

/* Vat pham trong bang: icon + ten + id. */
.item-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Luoi ket qua Tra Cuu / goi y bo chon vat pham. */
.lookup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
}

.lookup-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid #f5b26b;
    background-color: #fff;
    color: #212529;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
    min-width: 0;
}

.lookup-cell:hover {
    border-color: #fd7e14;
    background-color: rgb(253, 245, 228);
}

.lookup-cell .lookup-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lookup-id {
    color: #654520;
    font-weight: 700;
}

.lookup-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 6px 14px;
    background-color: #654520;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

/* Quan Ly Van May (admin/vanmay.ejs): cot noi dung chi ~380px nen dung danh sach 2 dong thay vi
   bang nhieu cot. Mau cap bac lk-r0..lk-r5 = Thuong / Kha / Hiem / Cuc hiem / Su thi / Huyen thoai. */
.lk-r0 { --lk: #7a7a7a; }
.lk-r1 { --lk: #2e8b3d; }
.lk-r2 { --lk: #1f6fc4; }
.lk-r3 { --lk: #8a3fc7; }
.lk-r4 { --lk: #d9822b; }
.lk-r5 { --lk: #c62828; }

/* Hang tab chia deu be ngang (nut .ng-btn mac dinh rong co dinh 130px). */
.lk-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.lk-tabs .ng-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 5px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 6px 8px;
    border: 1px solid #f5b26b;
    background-color: #fff;
    text-align: left;
}

.lk-strip .ng-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 4px 10px;
}

.lk-warn {
    margin-bottom: 8px;
    padding: 6px 8px;
    border-left: 3px solid #c62828;
    background-color: #fdecea;
    color: #8e1c1c;
    text-align: left;
}

.lk-rar {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    background-color: var(--lk);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    white-space: nowrap;
}

/* Mot cap / mot dong phan thuong / mot luot quay: vien trai mau cap, 2 dong (chinh + phu). */
.lk-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #f5d3a8;
    border-left: 4px solid var(--lk, #f5b26b);
    background-color: #fff;
    text-align: left;
}

.lk-row + .lk-row {
    border-top: none;
}

.lk-row.lk-off {
    opacity: 0.55;
}

.lk-row .lk-main {
    flex: 1 1 auto;
    min-width: 0;
}

.lk-row .lk-side {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.lk-big {
    color: #654520;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lk-sub {
    color: #8a6a3a;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.lk-sub b {
    color: #2b1d0e;
}

.lk-act a,
.lk-act .btn-link {
    font-size: 12px;
    font-weight: 700;
}

/* Dau nhom cap o man Phan Thuong. */
.lk-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 4px 8px;
    background-color: var(--lk);
    color: #fff;
    font-weight: 700;
    text-align: left;
}

.lk-group .lk-gsub {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
}

/* 4 o so lieu o man Thong Ke. */
.lk-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.lk-kpi {
    padding: 6px 8px;
    border: 1px solid #f5b26b;
    background-color: #fff;
    text-align: left;
}

.lk-kpi span {
    display: block;
    color: #8a6a3a;
    font-size: 11px;
}

.lk-help {
    margin-top: 10px;
    text-align: left;
    color: #6c5a3e;
}

.lk-help summary {
    color: #654520;
    font-weight: 700;
    cursor: pointer;
}

/* Popup quan ly (static/js/admin.js): khung cam + dau nau nhu .side-head; dong bam duoc de mo popup. */
.adm-modal .modal-content {
    border: 2px solid #fd7e14;
    border-radius: 0;
    background-color: rgb(253, 245, 228);
}

.adm-modal .modal-header {
    padding: 8px 12px;
    border-bottom: 2px solid #fd7e14;
    border-radius: 0;
    background-color: #654520;
    color: #fff;
}

.adm-modal .modal-title {
    font-size: 15px;
    font-weight: 700;
}

.adm-modal .modal-body {
    text-align: left;
}

/* Nut Xoa o cuoi form sua (trong popup hoac trang form). */
.adm-del {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed #f5b26b;
    text-align: right;
}

.adm-del .btn {
    font-size: 13px;
}

[data-modal-href] {
    cursor: pointer;
}

.lk-row[data-modal-href]:hover,
tr[data-modal-href]:hover > td,
.nv-card[data-modal-href]:hover {
    background-color: #fff3df;
}

/* ==========================================================================
   Tai game (partials/dl-buttons.ejs, partials/dl-icon.ejs, views/taigame.ejs)
   --------------------------------------------------------------------------
   Nut tai, tab phien ban, o dem nguoc va nut tai lon trong tab deu cung mot kieu: nen trang,
   vien cam nhat #F5B26B (cam dam #FD7E14 khi re chuot / dang chon), chu nau dam #654520 + icon SVG.
   ========================================================================== */
/* Trinh duyet dien thoai tu phong chu (font boosting) trong cot hep -> chu trong nut phinh to
   lech voi nut. Khoa ti le chu cho khu tai game. */
.dl-grid,
.dl-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.dl-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0 8px;
}

/* Nut tai bang anh (partials/dl-buttons.ejs): anh 2x, hien 247x71, goc bo ~7px, co theo cot. */
.dl-img {
    display: block;
    width: 82%;
    max-width: 180px;
    border-radius: 8px;
    line-height: 0;
    transition: transform .15s ease, filter .15s ease;
}

.dl-img img { display: block; width: 100%; height: auto; }
.dl-img:hover,
.dl-img:focus-visible { transform: translateY(-1px); filter: brightness(1.15); }
.dl-img:focus-visible { outline: 2px solid #fd7e14; outline-offset: 3px; }
.dl-img:active { transform: translateY(1px); filter: brightness(.95); }
.dl-img.is-off { filter: grayscale(1); opacity: .6; }
.dl-img.is-suggest { animation: dl-img-glow 1.6s ease-in-out infinite; }

@keyframes dl-img-glow {
    50% { box-shadow: 0 0 0 3px rgba(253, 126, 20, .55), 0 0 14px rgba(253, 126, 20, .8); }
}

@media (prefers-reduced-motion: reduce) {
    .dl-img { transition: none; }
    .dl-img.is-suggest { animation: none; outline: 2px solid #fd7e14; outline-offset: 3px; }
}

/* Trang /tai-game: rong hon cot phai Trang chu -> 2 cot. */
.dl-page { font-size: 13px; color: #654520; }
.dl-page .dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
.dl-page .dl-img { width: 90%; }

.dl-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}

.dl-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    /* Cung kieu nut tai .dl-css: nen trang, vien cam nhat, chu nau dam. */
    border: 1.5px solid #f5b26b;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(101, 69, 32, .18);
    color: #654520;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.dl-tab:hover { color: #654520; background: #fff4e6; border-color: #fd7e14; }

/* Tab dang mo: nen cam nhat + gach cam duoi chan (giong o goi nap dang chon). */
.dl-tab.is-active {
    border-color: #fd7e14;
    background: #ffe7c7;
    box-shadow: inset 0 -3px 0 #fd7e14, 0 2px 5px rgba(101, 69, 32, .18);
}

.dl-tab.is-suggest:not(.is-active) { border-color: #fd7e14; }
/* Tab hep (4 cot ~124px): icon dat TREN chu de ten dai ("iOS TestFlight") khong phai xuong dong. */
.dl-tab-ico { flex: 0 0 22px; width: 22px; height: 22px; }
.dl-tab-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dl-tab-name { font-size: 12px; font-weight: 800; white-space: nowrap; }
.dl-tab-ver { font-size: 10px; font-weight: 600; color: #e8650a; }

.dl-panel {
    padding: 12px;
    border: 2px solid #fd7e14;
    border-radius: 6px;
    background: #fffaf0;
}

.dl-title { color: #654520; font-weight: 700; text-align: center; }
.dl-badge { padding: 1px 8px; border-radius: 3px; background: #fd7e14; color: #fff; font-size: 12px; vertical-align: middle; }
.dl-lead, .dl-file { text-align: center; }
.dl-hint { padding: 6px 10px; border-left: 4px solid #fd7e14; background: #fde9c8; font-weight: 700; }
.dl-warn { color: #b02a37; font-weight: 700; }

.dl-box { margin: 10px 0 14px; text-align: center; }
.dl-wait {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px 5px 5px;
    border: 1.5px solid #f5b26b;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(101, 69, 32, .18);
    color: #654520;
    font-weight: 700;
}

.dl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #fd7e14;
    border-radius: 50%;
    background: #fff4e6;
    color: #e8650a;
    font-size: 16px;
    font-weight: 900;
}

.dl-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dl-done { margin-top: 8px; font-weight: 700; }
.dl-note { margin: 0; color: #8a6a45; font-size: 12px; }

.dl-copy {
    padding: 5px 12px;
    border: 2px solid #154d8f;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff, #dbeefb);
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(21, 77, 143, .45);
    color: #154d8f;
    font-weight: 700;
    cursor: pointer;
}

.dl-copy:hover { filter: brightness(1.03); }
.dl-copy:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }

.dl-guide-title { margin-top: 12px; padding-bottom: 4px; border-bottom: 2px solid #fd7e14; font-weight: 700; }
.dl-steps { margin: 8px 0; padding-left: 20px; }
.dl-steps li { margin-bottom: 5px; }
.dl-notes { margin: 10px 0 0; padding-left: 18px; font-size: 12px; }
.dl-notes li { margin-bottom: 4px; }

.dl-way { margin-bottom: 6px; border: 1px solid #f3c58f; border-radius: 6px; background: #fff; }
.dl-way summary { padding: 6px 10px; font-weight: 700; cursor: pointer; }
.dl-way[open] summary { border-bottom: 1px solid #f3c58f; }
.dl-way .dl-steps { padding: 0 10px 0 30px; }

@media (max-width: 500px) {
    .dl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Cot phai Trang chu chi ~120px: nut lap day cot, chu nho lai cho can. */
    .dl-grid { gap: 8px; }
    .dl-img { width: 96%; border-radius: 5px; }
    /* Trang /tai-game con 1 cot rong. */
    .dl-page .dl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Trang chu tren dien thoai: khoi Tai game o dau trang (trangchu.ejs .dl-mobile), 4 nut 2x2;
   khoi o cot phai (.dl-desktop) an di vi cot chi ~100px, nut bi keo doc. */
.dl-mobile { display: none; }

@media (max-width: 500px) {
    .dl-desktop { display: none !important; }
    .dl-mobile {
        display: block;
        margin: 4px 4px 14px;
        padding: 0 6px 8px;
        border: 2px solid #654520;
        border-radius: 8px;
        background: url(/uploads/brg-right.png) center / 100% 100%;
        text-align: center;
    }
    .dl-mobile-title { width: 42%; max-width: 170px; margin-top: -2px; }
    .dl-mobile .dl-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        justify-items: center;
        padding: 6px 0 0;
    }
}

/* Nut ve bang CSS + SVG (dl-buttons.ejs css: true): nen trang, vien cam nhat #F5B26B (dam len
   #FD7E14 khi re chuot), chu nau dam #654520 (dong nho mau cam) - noi ro tren nen tranh cot phai. */
.dl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.dl-css {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 220px;
    min-width: 0;
    padding: 5px 6px;
    border: 1.5px solid #f5b26b;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(101, 69, 32, .18);
    color: #654520;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.dl-css-ico {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
}

.dl-css-txt { min-width: 0; }
.dl-css-sub,
.dl-css-name {
    display: block;
    font-weight: 700;
    white-space: nowrap;
}
.dl-css-sub { font-size: 10px; color: #e8650a; }
.dl-css-name { font-size: 15px; font-weight: 800; }

.dl-css:hover,
.dl-css:focus-visible { color: #654520; background: #fff4e6; border-color: #fd7e14; transform: translateY(-1px); }
.dl-css:focus-visible { outline: 2px solid #654520; outline-offset: 2px; }
.dl-css:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(101, 69, 32, .18); }
/* Cot phai Trang chu: nut gon hon be ngang cot (cung ti le nut anh .dl-img truoc day). */
.col-right-1 .dl-css { width: 86%; max-width: 190px; gap: 6px; }
.col-right-1 .dl-css-ico { flex-basis: 26px; width: 26px; height: 26px; }
.col-right-1 .dl-css-name { font-size: 14px; }
.dl-css.is-off { filter: grayscale(1); opacity: .6; }
/* Nut tai lon trong tab /tai-game/<ban> (taigame.ejs). */
.dl-css--wide { justify-content: center; gap: 10px; max-width: 230px; margin: 0 auto; padding: 8px 14px; }
.dl-css--wide .dl-css-ico { flex-basis: 38px; width: 38px; height: 38px; }
.dl-css--wide .dl-css-sub { font-size: 11px; }
.dl-css--wide .dl-css-name { font-size: 19px; }
.dl-css.is-suggest { animation: dl-img-glow 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .dl-css { transition: none; }
    .dl-css.is-suggest { animation: none; outline: 2px solid #fd7e14; outline-offset: 2px; }
}

@media (max-width: 370px) {
    .dl-css { gap: 4px; padding: 4px 5px; }
    .dl-css-ico { flex-basis: 26px; width: 26px; height: 26px; }
    .dl-css-sub { font-size: 9px; }
    .dl-css-name { font-size: 13.5px; }
}

/* Trang Nap (account/nap.ejs): o chon goi nap = radio .btn-check (an) + the .nap-goi. Luoi 3 cot
   deu nhau thay cho hang nut co rong khong deu; so Ryo to o tren, gia o dai duoi, nhan thuong %
   o goc. Goi dang chon: vien cam + dai gia cam + dau tick. */
.nap-goi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.nap-goi {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 0;
    /* Chua cho nhan thuong o goc tren phai, khong de de len so Ryo. */
    padding: 20px 0 0;
    border: 2px solid #f3c48f;
    border-radius: 10px;
    background-color: #fffaf0;
    color: #654520;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.nap-goi:hover {
    border-color: #fd7e14;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(101, 69, 32, .15);
}

.nap-goi-ryo { font-size: 22px; font-weight: 800; line-height: 1.1; }
.nap-goi-donvi { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #fd7e14; }

.nap-goi-gia {
    align-self: stretch;
    margin-top: auto;
    padding: 5px 2px;
    background-color: #f6e3c4;
    font-size: 13px;
    font-weight: 700;
}

.nap-goi-thuong {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1px 6px;
    border-bottom-left-radius: 8px;
    background-color: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.btn-check:checked + .nap-goi {
    border-color: #fd7e14;
    background-color: #ffe7c7;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, .25);
}

.btn-check:checked + .nap-goi .nap-goi-gia { background-color: #fd7e14; color: #fff; }

.btn-check:checked + .nap-goi::before {
    content: '\2713';
    position: absolute;
    top: 1px;
    left: 7px;
    font-size: 14px;
    font-weight: 800;
    color: #fd7e14;
}

.btn-check:focus-visible + .nap-goi { outline: 2px solid #654520; outline-offset: 2px; }

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

@media (prefers-reduced-motion: reduce) {
    .nap-goi { transition: none; }
    .nap-goi:hover { transform: none; }
}

/* Popup chao mung Trang chu (trangchu.ejs #welcomePopup, mo trong js.js): cung tong mau the .nap-goi -
   nen kem #fffaf0, vien #f3c48f, chu nau #654520, nut cam #fd7e14.
   Font he thong cua Bootstrap thay Arial cua body: Arial dam ve dau kep tieng Viet (chu "Nhan Gia") lech sang phai. */
.welcome-popup {
    align-items: center;
    padding: 18px 18px 20px;
    border: 2px solid #f3c48f;
    border-radius: 12px;
    background-color: #fffaf0;
    color: #654520;
    font-family: var(--bs-font-sans-serif);
    text-align: center;
}

.welcome-popup-close { position: absolute; top: 10px; right: 10px; }
.welcome-popup-logo { width: 62%; max-width: 246px; margin: 4px 0 8px; }
.welcome-popup-title { margin-bottom: 12px; font-size: 18px; font-weight: 700; line-height: 1.35; }

.welcome-popup-links {
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.welcome-popup-links li { padding: 7px 4px; border-bottom: 1px dashed #f3c48f; overflow-wrap: anywhere; }
.welcome-popup-links li:first-child { border-top: 1px dashed #f3c48f; }
.welcome-popup-links a { color: #e8650a; font-weight: 700; text-decoration: none; }
.welcome-popup-links a:hover,
.welcome-popup-links a:focus-visible { text-decoration: underline; }
.welcome-popup-note { margin-bottom: 14px; font-size: 14px; font-style: italic; }

.welcome-popup-btn {
    display: inline-block;
    padding: 8px 28px;
    border-radius: 8px;
    background-color: #fd7e14;
    box-shadow: 0 2px 5px rgba(101, 69, 32, .25);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .15s, transform .15s;
}

.welcome-popup-btn:hover,
.welcome-popup-btn:focus-visible { background-color: #e8650a; color: #fff; transform: translateY(-1px); }
.welcome-popup-btn:focus-visible { outline: 2px solid #654520; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .welcome-popup-btn { transition: none; }
    .welcome-popup-btn:hover { transform: none; }
}