/* ==========================================================================
   SIDE MENU + FOOTER DÙNG CHUNG
   --------------------------------------------------------------------------
   Tách nguyên xi từ landing-page.css để trang chủ, tổng hợp tin tức và các
   trang chạy layout site.blade.php dùng chung một bộ style, khỏi mỗi nơi một
   bản rồi lệch nhau.

   Nạp file này SAU css riêng của từng trang (landing-page.css /
   tong-hop-tin-tuc.css / site-master.css) để các luật cùng độ ưu tiên ở đây
   thắng.
   ========================================================================== */

/* Font này vốn chỉ khai báo trong chi-tiet-tin.css và landing-page.css; trang
   tổng hợp tin tức không có nên khai báo lại ở đây cho chữ FANPAGE/GROUP. */
@font-face {
    font-family: 'FzGameBrV2';
    src: url('/fonts/FzGameBrV2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.side-menu {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-47%);
    z-index: 1000;
    width: 13.9583333333vw;
    height: 25.8333333333vw;
    /* Không đặt padding-left ở đây. Trước có 1.927vw, làm mọi thứ canh
       giữa đều lệch sang phải, rồi markup lại bù bằng margin-right px
       cứng. Bỏ cả hai, canh giữa tự đúng tâm khung nền. */
    background: url("/images/image_ttgh/bg-menu-right1.png") center/cover no-repeat;
    transition: transform 0.35s ease;
}

/*
 * Trượt ra, chừa lại 10px bg lộ ra bên phải nút.
 *
 * Nút nằm nửa trong nửa ngoài mép khung nên không thể vừa chừa 10px bg
 * vừa giữ nút nguyên vẹn nếu tính mốc theo mép bg: nửa ngoài của nút sẽ
 * vượt khỏi màn hình. Nên lấy mốc là mép phải NÚT cách mép màn hình
 * 10px — nút còn đủ, và phần bg ló ra ngoài nút đúng 10px.
 *
 * Quãng dịch = 268 - 24 (nửa huy hiệu) - 10 - 22.95 (viền trong suốt
 * trái của ảnh nền) = 211.05px, cộng thêm 20px cắt bớt phần lộ ra
 * = 231.05px = 86.21% bề rộng khung. Mọi số đều theo tỉ lệ nên giữ đúng
 * ở mọi bề rộng màn hình.
 *
 * Ở mức này huy hiệu bị mép màn hình cắt mất 10px bên phải — chủ ý,
 * để phần thò ra gọn hơn.
 */
.side-menu.dong {
    transform: translateY(-47%) translateX(86.21%);
}

/*
 * Nút đóng/mở nằm ngoài mép trái khung, canh giữa theo chiều dọc.
 *
 * Hai ảnh btn-sidebar-*.webp khổ 278x209 nhưng phần nhìn thấy chỉ
 * 182x194 (hở 49px trái, 48px phải). Nên bề rộng thẻ phải lớn hơn
 * huy hiệu muốn thấy: muốn huy hiệu ~48px thì thẻ 48 / (182/278)
 * = 73.3px = 3.818vw.
 *
 * Đặt sao cho TÂM huy hiệu trùng mép trái nhìn thấy của khung — nửa nút
 * đè lên khung, nửa nằm ngoài. Tâm huy hiệu cách mép trái thẻ 36.92px,
 * mép trái nhìn thấy của ảnh nền cách mép hộp 22.95px (x=31 của ảnh
 * 362px, đo ở độ cao giữa khung), nên left = 22.95 - 36.92 = -13.97px
 * = -0.7274vw.
 */
.side-menu .side-toggle {
    position: absolute;
    top: 50%;
    left: -0.7274vw;
    transform: translateY(-50%);
    width: 3.818vw;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    z-index: 2;
}

.side-menu .side-toggle img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.side-menu .side-toggle:hover img {
    transform: scale(1.08);
}

/*
 * Chia đều nút và chữ trong lòng khung.
 *
 * Lòng khung = khoảng giữa hai vạch vàng của bg-menu-right1.png
 * (362x678). Dò màu trên cột giữa: vạch vàng trên ở y=50, vạch dưới ở
 * y=612, nên lòng khung là y 51..611. Ảnh vẽ bằng center/cover vào hộp
 * 13.9583 x 25.8333vw, hệ số 0.74033 và bị xén 2.95px trên dưới, quy ra
 * lề 1.813vw ở trên và 2.4271vw ở dưới.
 *
 * space-evenly chia đều 5 khe: mép trên, giữa 4 phần tử, mép dưới.
 */
.side-menu .menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
    box-sizing: border-box;
    padding: 1.813vw 0 2.4271vw;
}

/* display: contents để ba nút thành con trực tiếp của .menu-container,
   nhờ vậy space-evenly chia đều cho cả bốn phần tử chứ không coi cụm
   nút là một khối.

   Chú ý: bootstrap/app.css có .btn-group { display: inline-flex } — luật ở đây
   nhiều lớp hơn nên vẫn thắng, không cần !important. */
.side-menu .btn-group {
    display: contents;
}

.side-menu .link-group {
    text-align: center;
}

.side-menu .link-group a {
    /* FzGameBrV2 rộng ngang hơn LeagueGothic nên chữ FANPAGE gần chạm
       viền vàng; hạ cỡ để hở đều hai bên. */
    font-family: 'FzGameBrV2', sans-serif;
    font-size: 1.1625vw;
    color: #fff6da;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*
 * Logo game nhô lên trên khung. Tách khỏi dòng chảy để nó không ăn vào
 * phần space-evenly chia cho nút và chữ, đồng thời canh giữa đúng tâm
 * khung nền (left 50% ăn theo hộp của .side-menu, không dính padding
 * trái như cách canh bằng flex trước đây).
 */
.side-menu .menu-item.icon-app {
    width: 9.3229166667vw;
    position: absolute;
    left: 50%;
    top: -5.7291666667vw;
    transform: translateX(-50%);
    margin: 0;
}

/*
 * Ba nút nạp/tải phải nằm gọn trong lòng khung nền. Đo trên
 * bg-menu-right1.png (362x678): vùng đỏ bên trong khung vàng trải từ
 * x=34 đến x=327, tức 80.94% bề rộng ảnh. Khung rộng 13.9583vw nên
 * lòng trong là 11.30vw. Lấy 10.5vw để chừa mỗi bên một chút.
 */
.side-menu .menu-item.btn-charge,
.side-menu .menu-item.btn-download {
    width: 10.5vw;
    margin: 0;
}

/*
 * btn-appstore2.png có viền trong suốt 4px trên và 8px dưới trong khổ
 * 280x115, hai ảnh nút kia gần như không có. Để nguyên thì khe NHÌN
 * THẤY quanh nút này rộng hơn hai khe kia chừng 5px, dù khe giữa các
 * hộp vẫn bằng nhau. Margin âm đúng bằng phần trong suốt (quy theo tỉ
 * lệ 202/280) để hộp trùng với phần nhìn thấy.
 *
 * Luật này phải đứng SAU luật margin: 0 ở trên — cùng độ ưu tiên nên
 * luật nào viết sau thì thắng.
 */
.side-menu .menu-item.btnDownloadIos {
    margin-top: -0.1503vw;
    margin-bottom: -0.3006vw;
}

/*
 * landing-page.css có luật chung `a { display: block; transition }` và
 * `a:hover { scale }`; các trang khác không có nên chép lại trong phạm vi
 * side menu / footer để hiệu ứng y hệt trang chủ.
 */
.side-menu a,
.footer a {
    display: block;
    transition: all 0.3s ease;
}

.side-menu a:hover,
.footer a:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/*
 * home.css (chỉ nạp ở layout site.blade.php) có .link-group riêng: khung
 * 180x178 kèm ảnh nền, chữ float 50% và padding-top 58px. Trả các thuộc tính
 * đó về mặc định để side menu giống hệt trang chủ.
 */
.side-menu .link-group {
    width: auto;
    height: auto;
    background: none;
    padding-left: 0;
}

.side-menu .link-group a {
    width: auto;
    height: auto;
    float: none;
    padding-top: 0;
    line-height: normal;
}

.side-menu .link-group a:hover {
    background: none;
    color: #fff6da;
}

.side-menu .imgFull {
    display: block;
    width: 100%;
    height: auto;
}

/* ========== FOOTER ========== */
.footer {
    background: #fff;
    padding: 2.6041666667vw 0;
    text-align: center;
    width: 100%;
}

.footer .footer-inner {
    max-width: 62.5vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3020833333vw;
}

.footer .footer-logo {
    display: block;
    width: 140px;
    transition: transform 0.3s ease;
}

.footer .footer-logo:hover {
    transform: scale(1.05);
}

.footer .footer-logo img {
    width: 100%;
    height: auto;
}

.footer .footer-info {
    display: flex;
    flex-direction: column;
    gap: 0.5208333333vw;
}

.footer .footer-text {
    color: #272727;
    font-size: 14px;
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .side-menu {
        display: none !important;
    }

    .footer {
        background: #211f1f;
        padding: 4.8828125vw 0;
    }

    .footer .footer-inner {
        max-width: 100%;
        gap: 2.44140625vw;
        padding: 0 1.953125vw;
    }

    .footer .footer-logo {
        width: 200px;
    }

    .footer .footer-info {
        gap: 0.9765625vw;
    }

    .footer .footer-text {
        color: #fff;
        font-size: 14px;
    }
}