/**
 * FC Online — layout ngang Garena gốc.
 * Portrait mobile: viewport width=1334 (fo4_viewport.php) → scale thu nhỏ, nền đen dưới.
 */
html {
    font-size: 3.30769px !important;
}

body,
.btn,
.menu a,
.user p,
.main-code__input input,
.swal2-title {
    font-family: "FIFAnybody Condensed", "Condensed", Roboto, Arial, sans-serif !important;
}

#pleaserotate-backdrop {
    display: none !important;
}

#root {
    display: block !important;
}

@media screen and (orientation: portrait) and (max-width: 916px) {
    html,
    body {
        background: #000 !important;
    }
}

/* Lịch sử inline index */
.history-box {
    margin-top: 1.5vw;
    padding: 1vw 1.2vw;
    max-width: 42vw;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(26, 44, 184, 0.35);
    color: #1f2d3d !important;
    text-align: left !important;
}

.history-box h3 {
    color: #162a6a !important;
    font-size: 1.1vw !important;
    text-transform: uppercase;
}

.history-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 12vw;
    overflow-y: auto;
}

.history-box li {
    color: #1f2d3d !important;
    font-size: 0.95vw !important;
    border-bottom: 1px solid rgba(26, 44, 184, 0.12);
    padding: 0.5vw 0;
}

/* Popup thông báo quà */
#gift-popup-container .swal2-content,
#gift-popup-container .swal2-html-container,
#gift-popup-container #fo4-popup-content,
#gift-popup-container #fo4-popup-content p,
#gift-popup-container #fo4-popup-content b,
#gift-popup-container .gift-title,
#gift-popup-container .gift-desc {
    color: #000 !important;
    text-transform: uppercase;
}

#gift-popup-container .swal2-title {
    color: #000 !important;
}

/* Lịch sử — ReactModal giống codegoc2.php */
#fo4-history-portal .fo4-history-overlay {
    background-color: rgba(255, 255, 255, 0.75) !important;
    z-index: 1060 !important;
}

#fo4-history-portal .ScrollbarsCustom-ThumbY {
    background: #5e47fa !important;
}

@media (max-width: 768px) {
    .ReactModal__Content.modal-history {
        width: 95% !important;
        min-height: 300px !important;
        padding: 15px !important;
    }
    .ReactModal__Content.modal-history .table-history th {
        font-size: 14px !important;
        height: auto !important;
        padding: 5px !important;
    }
    .ReactModal__Content.modal-history .table-history td {
        font-size: 12px !important;
        height: auto !important;
        padding: 5px !important;
    }
    .ReactModal__Content.modal-history h2 {
        font-size: 18px !important;
    }
    .fo4-history-scroll {
        height: 60vh !important;
    }
}