/* ==========================================================================
   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.webp") 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 — dựng theo /images/footer/design.png

   MỌI SỐ ĐO DƯỚI ĐÂY ĐO TRỰC TIẾP TRÊN FILE DESIGN

   design.png rộng 918px = 100% bề ngang trang, nên mỗi kích thước vw dưới
   đây là "số px đo được trên design chia 918". Muốn chỉnh gì thì mở lại
   design.png đo chứ đừng đoán.

   Khổ footer: ảnh nền bg-footer 1920x339 nhưng trên design footer cao
   222.7/918 = 24.26% bề ngang, tức ảnh bị kéo cao thêm ~1.37 lần. Vì vậy
   dùng background-size:100% 100% (kéo full) chứ KHÔNG dùng cover — cover sẽ
   cắt mất hoa mẫu đơn và ngọn núi ở hai mép.
   ========================================================================== */
.footer {
    position: relative;
    width: 100%;
    height: 24.26vw;
    background: url('/images/footer/bg-footer-final.webp') center / 100% 100% no-repeat;
    text-align: center;
}

/* --------------------------------------------------------------------------
   HÀNG MENU — nằm ở dải tối trên cùng của ảnh nền (0..44px của 339px ảnh),
   chữ căn giữa dải đó: tâm chữ ở 16.4/918 = 1.787vw tính từ mép trên footer,
   nên để dải cao gấp đôi (3.57vw) rồi align-items:center.
   -------------------------------------------------------------------------- */
.footer .footer-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.574vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.footer .footer-nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    /* Khoảng cách hai mục cạnh nhau trên design là 28px. */
    gap: 3.05vw;
}

.footer .footer-nav .p5-nav-item {
    display: block;
    position: relative;
    z-index: 2;
    font-family: inherit;
    /* 12px trên design; font design hẹp hơn Roboto nên hạ xuống 1.22vw thì
       bề ngang cả hàng mới khớp 757/1920 như đo được. */
    font-size: 1.22vw;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    /* Mục không active có màu kem ngả vàng, mục active trắng và đậm hơn. */
    color: #ddc6a6;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/*
 * GẠCH CHÂN VÀNG CHO HOVER / ACTIVE
 *
 * Vạch nằm sẵn ở mọi mục nhưng scaleX(0) nên không thấy; hover hay .active
 * mới bung ra. Làm bằng ::after chứ không phải border-bottom vì border sẽ
 * cộng thêm chiều cao, đẩy hàng chữ lệch khỏi tâm dải trên của ảnh nền.
 *
 * Đặt bottom âm để vạch nằm ngay dưới chân chữ. Đừng hạ thấp thêm: đường
 * viền vàng ngang của khung (ảnh nền, y=44/339) chỉ cách chân chữ chừng
 * 9px ở khổ 1920, thấp nữa là hai vạch dính vào nhau.
 *
 * Hai đầu vạch chuyển sang trong suốt cho hợp tông hoa văn, không phải một
 * gạch cứng hai đầu vuông.
 */
.footer .footer-nav .p5-nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1vw;
    height: 0.1vw;
    background: linear-gradient(90deg, rgba(247, 202, 108, 0), #f7ca6c 25%, #fff6da 50%, #f7ca6c 75%, rgba(247, 202, 108, 0));
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/*
 * Đè luật chung `.footer a:hover { transform: scale(1.05); filter: brightness }`
 * ở đầu file: menu chỉ đổi màu + sáng lên, phóng to sẽ đè lên cụm mây hai bên
 * và làm cả hàng nhảy.
 *
 * KHÔNG ĐỔI font-weight KHI HOVER: chữ đậm rộng hơn chữ thường nên cả hàng
 * sẽ giật ngang mỗi lần rê chuột. Muốn nhấn thì dùng màu + text-shadow.
 */
.footer .footer-nav .p5-nav-item:hover,
.footer .footer-nav .p5-nav-item:focus-visible {
    color: #f7ca6c;
    text-shadow: 0 0 0.6vw rgba(247, 202, 108, 0.55);
    transform: none;
    filter: none;
    outline: none;
}

.footer .footer-nav .p5-nav-item:hover::after,
.footer .footer-nav .p5-nav-item:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Mục đang mở: chữ trắng, đậm, giữ luôn vạch vàng. Chữ trắng nên quầng sáng
   để trắng hơi ngả kem, dùng màu vàng như lúc hover sẽ đục mất chữ. */
.footer .footer-nav .p5-nav-item.active {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 0.65vw rgba(255, 246, 218, 0.5);
}

.footer .footer-nav .p5-nav-item.active::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Đang ở trang đó mà vẫn rê chuột vào thì chỉ ấm lên chút, không đổi sang
   vàng — đổi màu kiểu đó trông như mục đang mở bị bỏ chọn. */
.footer .footer-nav .p5-nav-item.active:hover {
    color: #fff6da;
}

/* Lúc bấm giữ. */
.footer .footer-nav .p5-nav-item:active {
    color: #fff6da;
    text-shadow: 0 0 0.4vw rgba(247, 202, 108, 0.7);
}

/* Hai cụm mây vàng ôm hai đầu hàng menu, rộng 121px trên design. Tâm cụm
   mây thấp hơn tâm hàng chữ 1.3vw nên phần xoắn tràn xuống dưới đường viền
   vàng của khung — đúng như design.

   HAI LỀ ĐỂ BẰNG NHAU (6.21vw), ĐỪNG CHÉP LẠI SỐ CỦA DESIGN

   left-effect và right-effect là bản lật gương của nhau: đoạn râu mây ngang
   tầm chữ kết thúc ở x=78/183 (trái) và bắt đầu ở x=104/183 (phải) — đối
   xứng tuyệt đối. Nên cứ để hai lề bằng nhau là hai bên hở như nhau.

   Design đo được lề trái 43px / lề phải 57px, chép y hệt thì râu mây bên
   trái đè lên chữ "Trang Chủ" 18px trong khi bên phải còn hở 10px — lệch
   thấy rõ, nên cố ý làm khác design ở chỗ này. */
.footer .footer-nav-effect {
    position: absolute;
    top: 50%;
    margin-top: 1.3vw;
    transform: translateY(-50%);
    width: 13.18vw;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.footer .footer-nav-effect.is-left {
    left: -6.21vw;
}

.footer .footer-nav-effect.is-right {
    right: -6.21vw;
}

/* --------------------------------------------------------------------------
   HÀNG 3 LOGO — g1 (đã phê duyệt) / TMT DEV / logo game, nằm ngay dưới hàng
   menu, trong lòng ảnh nền footer.

   TOP TÍNH NGƯỢC TỪ VIỆC CANH GIỮA DẢI, ĐỪNG SỬA MÒ

   Dải trống mắt nhìn thấy nằm giữa đường kẻ sáng của ảnh nền và dòng chữ đầu
   của khối info:
     - mép trên: dò màu cột giữa bg-footer-final.webp (1919x478) thấy y=62
       đổi từ navy đậm sang xanh nhạt -> 62/478 * 24.26vw = 3.15vw
     - mép dưới: .footer-info top = 7.95vw
   Dải cao 4.80vw, phần đặc logo cao 2.91vw -> muốn canh giữa thì đỉnh phần
   đặc phải ở 3.15 + (4.80 - 2.91)/2 = 4.095vw, hở đều 0.945vw trên dưới.

   Phần đặc nằm thấp hơn top của hộp .footer-logos 0.22vw (hộp cao 3.43vw
   nhưng ảnh logo game cao 3.53vw nên tràn ra hai đầu, không suy ra thẳng từ
   chiều cao hộp được — số này đo trên trình duyệt) -> top = 4.095 - 0.22 =
   3.875vw. Đo lại thấy hở trên 0.944vw / hở dưới 0.944vw.

   Lưu ý mốc trên là ĐƯỜNG KẺ 3.15vw chứ không phải đáy chữ menu (2.64vw):
   canh theo đáy chữ menu thì logo bị đẩy lên, nhìn dính vào hàng menu. Đổi
   .footer-info top thì phải tính lại top này.

   BỀ NGANG CẢ HÀNG BỊ CHẶN BỞI HAI CỤM MÂY, ĐỪNG PHÓNG TO THÊM

   Hàng logo nằm cao ngang tầm hai cụm mây left/right-effect (mây trải từ
   0.67vw đến 5.5vw tính từ mép trên footer) nên hai đầu hàng phải dừng trước
   mây. Đo ở khổ 1280: mây trái đặc tới x=479, mây phải bắt đầu ở x=801 — cửa
   sổ trống chỉ rộng 321.7px = 25.13vw. Cả hàng lấy 22.95vw, còn hở hai bên
   14px bằng nhau. Muốn logo to hơn thì phải hạ hàng xuống dưới 5.5vw trước.

   BA ẢNH ĐỀU CÓ LỀ TRONG SUỐT KHÁC NHAU, ĐỪNG ĐẶT CÙNG MỘT height

   Để cùng height thì ảnh nào lề trong suốt dày hơn sẽ trông nhỏ hơn hẳn. Nên
   mỗi ảnh lấy height riêng = 3.05vw (chiều cao phần ĐẶC muốn thấy) chia cho
   tỉ lệ phần đặc / khổ ảnh:

     g1.webp        2172x724, đặc x 38..2145, y 22..688 -> 666/724 = 0.920
                    -> height 3.32vw  (3.05 / 0.920)
     logo-cty-2     148x81,   đặc x  1..146,  y  0..78  ->  78/81  = 0.963
                    -> height 3.17vw  (3.05 / 0.963)
     logo game      148x81,   đặc x  4..144,  y  7..73  ->  66/81  = 0.815
                    -> height 3.74vw  (3.05 / 0.815)

   Hai logo game / TMT DEV thay ảnh mới 09/2026, cùng khổ 148x81 nhưng lề
   trong suốt khác nhau nên height vẫn phải khác nhau. Số cũ (640x640 và
   500x272) không còn đúng — sửa ảnh thì phải đo lại phần đặc rồi tính lại.

   GIÃN CÁCH LÀM BẰNG PADDING, KHÔNG DÙNG gap

   Mỗi logo tự ôm một khoảng trống --logo-pad ở hai bên, nên khe nhìn thấy
   giữa hai logo = 2 x --logo-pad. Nhưng bản thân file ảnh đã có sẵn lề trong
   suốt, cộng thẳng --logo-pad thì ảnh nào lề dày hơn sẽ bị đẩy ra xa hơn. Vì
   vậy padding mỗi bên = --logo-pad TRỪ ĐI đúng lề trong suốt bên đó (padL /
   padR đo riêng từng bên, xem số ở trên). Muốn nới rộng hay thu hẹp cả hàng
   thì chỉ sửa một chỗ duy nhất là biến --logo-pad.

   TRẦN CỦA --logo-pad LÀ 0.84vw, ĐỪNG VƯỢT

   Bề ngang phần đặc cả hàng = 21.78vw + 4 x --logo-pad, mà cửa sổ trống giữa
   hai cụm mây chỉ 25.13vw -> 0.84vw là chạm mây. Đang để 0.65vw, còn hở
   0.37vw = 4.8px mỗi bên ở khổ 1280.

   PHÓNG TO LOGO PHẢI TRẢ GIÁ BẰNG KHE, KHÔNG CÓ CÁCH NÀO KHÁC

   Chiều cao phần đặc từng ở mức 2.88vw với --logo-pad 0.95vw (khe 1.90vw).
   Nâng lên 3.05vw làm bề ngang phần đặc nở từ 20.57 lên 21.78vw, ăn hết
   1.21vw, nên pad phải hạ xuống 0.65vw (khe 1.32vw) thì cả hàng mới giữ
   nguyên bề ngang 24.38vw và không đụng mây. Muốn logo to hơn 3.05vw nữa thì
   xem bảng đổi chác: 2.97vw cho pad tối đa 0.80 — 3.14vw chỉ còn pad 0.50.

   Hạ hàng logo xuống cũng KHÔNG nới thêm được: hai ảnh mây thon dần về phía
   ngoài chứ mép trong vẫn đặc kín từ trên xuống dưới (đo alpha ở dải ngang
   của hàng logo: mây trái đặc tới cột cuối 182/183, mây phải đặc từ cột 0).

   Phần đặc của cả ba ảnh mới đều nằm gần đúng tâm khung (lệch nhiều nhất
   0.03vw), nên không cần transform kéo lên như bản logo game 640x640 cũ.
   -------------------------------------------------------------------------- */
.footer .footer-logos {
    --logo-pad: 0.65vw;

    position: absolute;
    left: 0;
    right: 0;
    top: 3.875vw;
    height: 3.43vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 2;
}

.footer .footer-logo {
    display: block;
    width: auto;
    flex: none;
}

/* Logo game va logo cong ty duoc boc trong the <a>. The boc phai la flex item
   "trong suot": khong them chieu cao, khong them khoang trang, de cac quy tac
   height / margin am / transform ben duoi van tinh dung nhu khi <img> nam
   truc tiep trong .footer-logos. */
.footer .footer-logo-link {
    display: flex;
    align-items: center;
    flex: none;
    line-height: 0;
    text-decoration: none;
}

.footer .footer-logo.is-g1 {
    height: 3.32vw;
    padding-left: calc(var(--logo-pad) - 0.17vw);
    padding-right: calc(var(--logo-pad) - 0.12vw);
}

.footer .footer-logo.is-cty {
    height: 3.17vw;
    padding-left: calc(var(--logo-pad) - 0.04vw);
    padding-right: calc(var(--logo-pad) - 0.08vw);
}

.footer .footer-logo.is-game {
    height: 3.74vw;
    padding-left: calc(var(--logo-pad) - 0.18vw);
    padding-right: calc(var(--logo-pad) - 0.18vw);
}

/* --------------------------------------------------------------------------
   KHỐI THÔNG TIN — hai cột bằng nhau, vạch trắng ngăn ở giữa: cột trái là
   thông tin công ty / giấy phép, cột phải là thông tin trò chơi.

   VÌ SAO KHÔNG GIỮ ĐƯỢC top: 13.83vw NHƯ DESIGN

   Design chỉ có 4 dòng canh giữa nên đặt thấp như vậy vẫn vừa. Cột trái giờ
   nhiều dòng hơn hẳn, để nguyên 13.83vw thì chữ tràn xuống dải đá cẩm thạch
   — dò màu trên cột giữa ảnh nền thấy viền vàng dưới ở y=424/478, tức 21.5vw
   tính từ mép trên footer. Nên khối chữ phải dời lên.

   KHÔNG CANH GIỮA KHOẢNG TRỐNG NỮA — ƯU TIÊN CHỪA KHE CHO HÀNG LOGO

   Canh giữa thì top ra 7.58vw, hàng logo chỉ còn hở 0.82vw ở dưới trong khi
   ở trên hở 1.24vw (đo từ đáy chữ menu 2.64vw tới mép trên phần đặc 3.88vw),
   nhìn logo bị dính xuống khối chữ. Nên đẩy khối chữ xuống 7.95vw để khe dưới
   1.20vw cân với khe trên 1.24vw. Đáy khối chữ khi đó ở 21.05vw, vẫn còn cách
   viền vàng 0.45vw — đây là mức thấp nhất còn an toàn, đừng đẩy thêm.

   Hai cột để align-items mặc định (stretch) nên cùng cao bằng cột dài hơn,
   nhờ vậy vạch ngăn — border-left của cột phải — chạy đủ chiều cao khối. Chữ
   hai cột đều bắt đầu từ mép trên khối (justify-content: flex-start) để dòng
   đầu hai bên thẳng hàng nhau.
   -------------------------------------------------------------------------- */
.footer .footer-info {
    position: absolute;
    left: 0;
    right: 0;
    top: 7.95vw;
    display: flex;
    justify-content: center;
    /* Đè text-align: center của .footer — chữ hai cột canh về lề trái của
       chính cột đó, cột phải lấy vạch ngăn làm lề. */
    text-align: left;
}

/*
 * Mỗi cột 36vw, cả khối 72vw nên trải từ 14vw đến 86vw.
 *
 * ĐỪNG NỚI RỘNG THÊM: side menu là position fixed bám mép phải, mép trái
 * NHÌN THẤY của nó ở 87.2vw (khung 13.9583vw nhưng ảnh nền hở 22.95px trong
 * suốt bên trái). Nới quá là chữ chui xuống dưới khung menu.
 */
.footer .footer-info-col {
    width: 36vw;
    box-sizing: border-box;
    padding: 0 1.2vw;
    display: flex;
    flex-direction: column;
    /* flex-start chứ KHÔNG phải center: hai cột stretch nên cùng cao bằng
       cột dài hơn, canh giữa thì cột ngắn hơn (cột phải, thấp hơn 9.2px)
       bị đẩy tụt xuống 4.6px, dòng đầu hai bên lệch nhau thấy rõ. */
    justify-content: flex-start;
}

/* Cột trái canh phải, cột phải canh trái — hai khối chữ cùng ôm lấy vạch ngăn
   ở giữa, mép ngoài mới là mép so le. */
.footer .footer-info-col.is-company {
    text-align: right;
}

/* Vạch ngăn hai cột. Để 1px cứng chứ không quy ra vw: vạch tóc mà tính theo
   vw thì ở khổ 1025px chỉ còn 0.8px, trình duyệt vẽ ra mờ nhòe. */
.footer .footer-info-col.is-game {
    border-left: 1px solid rgba(255, 255, 255, 0.7);
}

/* Cột trái có đoạn giấy phép dài phải xuống dòng. Không chừa khe giữa các
   đoạn thì cả bốn đoạn dính thành một khối, không nhìn ra đoạn nào với đoạn
   nào. Khe áp cho cả hai cột để hai bên cùng nhịp. */
.footer .footer-info-col .footer-text + .footer-text {
    margin-top: 0.45vw;
}

/* Số giấy phép có dấu gạch nối nên trình duyệt cứ ngắt sau "115/GP-", đọc ra
   thành hai mã khác nhau. Khoá lại cho nó luôn nằm trọn một dòng. */
.footer .footer-nowrap {
    white-space: nowrap;
}

/*
 * Nhãn phân loại 18+ dưới cột phải. Ảnh 1280x773 ĐẶC HOÀN TOÀN — không có lề
 * trong suốt như ba logo ở hàng trên — nên chỉ cần đặt bề rộng, khỏi bù trừ.
 *
 * align-self: flex-start là bắt buộc: .footer-info-col là flex column, mặc
 * định align-items: stretch sẽ kéo ảnh rộng bằng cả cột (36vw), nhãn to lù.
 */
.footer .footer-badge-18 {
    align-self: flex-start;
    width: 6.4vw;
    height: auto;
    margin-top: 0.7vw;
}

.footer .footer-text {
    margin: 0;
    color: #fff;
    font-family: sans-serif;
    font-size: 1.05vw;
    line-height: 1.615vw;
    text-shadow: 0 0.05vw 0.15vw rgba(0, 12, 33, 0.65);
}

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

    /*
     * Design chỉ có bản PC. Trên mobile khổ footer hẹp và cao, kéo ảnh nền
     * 1920x339 vào đó thì hoa văn méo hẳn, nên chỉ giữ lại tông xanh + viền
     * vàng của design và cho khối chữ chảy theo nội dung.
     *
     * Hàng menu ẩn đi giống thanh nav PC cũ — mobile đã có header + menu kéo
     * ở partials/header-mobile.blade.php.
     */
    .footer {
        height: auto;
        background: #021b38;
        border-top: 1px solid #b99a5b;
        padding: 5.859375vw 3.90625vw;
    }

    .footer .footer-nav {
        display: none;
    }

    /*
     * Mobile: 375px không đủ chỗ cho hai cột cạnh nhau — đoạn giấy phép sẽ
     * gãy thành chục dòng — nên xếp chồng, vạch ngăn dọc chuyển thành đường
     * kẻ ngang giữa hai khối.
     */
    .footer .footer-info {
        position: static;
        display: block;
    }

    .footer .footer-info-col {
        width: auto;
        padding: 0;
    }

    /*
     * Xếp chồng thì không còn vạch dọc ở giữa để cột trái ôm vào, canh phải
     * lúc này chỉ làm chữ so le vô cớ — trả về canh trái.
     *
     * PHẢI VIẾT ĐÚNG .footer-info-col.is-company, ĐỪNG RÚT GỌN
     *
     * Luật canh phải bản PC là .footer .footer-info-col.is-company. Nếu ở đây
     * chỉ ghi .footer .footer-info-col thì độ ưu tiên thấp hơn một bậc, media
     * query không cứu được, cột trái vẫn canh phải trên mobile.
     */
    .footer .footer-info-col.is-company {
        text-align: left;
    }

    .footer .footer-info-col.is-game {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.7);
        margin-top: 3.90625vw;
        padding-top: 3.90625vw;
    }

    .footer .footer-info-col .footer-text + .footer-text {
        margin-top: 8px;
    }

    /* Nhãn vẫn phải to hơn ba logo ở hàng trên vì bên trong có chữ cần đọc
       được, nhưng 150px thì lấn át cả cụm logo nên hạ xuống 115px. Dưới mức
       này dòng chữ nhỏ trong nhãn bắt đầu nhoè. */
    .footer .footer-badge-18 {
        width: 115px;
        margin-top: 12px;
    }

    .footer .footer-text {
        font-size: 14px;
        line-height: 1.6;
    }

    /*
     * Mobile: footer chảy theo nội dung nên hàng logo về dòng thường, nằm sát
     * mép trên footer rồi mới tới khối chữ. Cùng cách tính như bản PC, chiều
     * cao phần đặc lấy 26px.
     *
     * margin-top âm đúng bằng padding-top của .footer để hàng logo dán lên
     * đường viền vàng trên cùng. Hộp ảnh vẫn cao hơn phần đặc một chút (logo
     * game 51.5dv hộp / 42dv đặc) — chỗ hở đó là lề trong suốt của chính
     * file ảnh, không phải padding của layout.
     */
    .footer .footer-logos {
        /*
         * MỌI KÍCH THƯỚC Ở ĐÂY TÍNH BẰNG --dv, KHÔNG PHẢI px
         *
         * --dv = 1px ở màn 360px trở lên, và CO LẠI theo tỉ lệ ở màn hẹp hơn
         * (0.2777vw = 360px/100). Nhờ vậy hàng logo lấy được kích thước tối
         * đa trên máy phổ thông mà máy 320px không bao giờ tràn — trước đây
         * dùng px cứng nên phải hạ cỡ logo xuống cho vừa máy nhỏ nhất, máy
         * nào cũng chịu thiệt theo.
         *
         * Bề ngang hàng = 7.142 x (chiều cao phần đặc) + 6 x --logo-pad
         * (4 khe trong + 2 mép ngoài). Đang để 42 + 8 -> hộp 348dv, ở màn
         * 360px còn hở 6px mỗi bên, phần ĐẶC cách mép màn 14px.
         *
         * Vượt 45dv là tràn kể cả khi đã co (hộp 369dv > 360). Muốn to hơn
         * nữa thì phải rút --logo-pad, mỗi 1dv pad đổi được 0.84dv chiều cao.
         */
        --dv: min(1px, 0.2777vw);
        --logo-pad: calc(8 * var(--dv));

        position: static;
        height: auto;
        margin-top: -3.859375vw;
        margin-bottom: 3.90625vw;

        /* Kéo hàng ra sát mép màn, thoát padding 3.90625vw của .footer —
           padding đó ăn mất 8% bề ngang, tiếc vì logo cần chỗ hơn chữ. */
        margin-left: -3.90625vw;
        margin-right: -3.90625vw;
    }

    .footer .footer-logo.is-g1 {
        height: calc(45.7 * var(--dv));
        padding-left: calc(var(--logo-pad) - 2.4 * var(--dv));
        padding-right: calc(var(--logo-pad) - 1.7 * var(--dv));
    }

    .footer .footer-logo.is-cty {
        height: calc(43.6 * var(--dv));
        padding-left: calc(var(--logo-pad) - 0.5 * var(--dv));
        padding-right: calc(var(--logo-pad) - 1.1 * var(--dv));
    }

    .footer .footer-logo.is-game {
        height: calc(51.5 * var(--dv));
        padding-left: calc(var(--logo-pad) - 2.5 * var(--dv));
        padding-right: calc(var(--logo-pad) - 2.5 * var(--dv));
    }

    /* ======================================================================
       MENU MOBILE (nút ☰) — CHIẾM NỬA MÀN HÌNH

       Khối .menu-mobile gốc nằm trong landing-page.css / site-master.css /
       tong-hop-tin-tuc.css (ba bản y hệt nhau) và tính bằng vw theo khổ
       thiết kế 1024px. Hậu quả: máy 390px chỉ nhận 38% cỡ gốc — panel rộng
       121.9px (31% màn), chữ 9.5px, icon 15px, bấm vào gần như không đọc nổi.

       Ghi đè ở đây chứ không sửa ba file kia vì side-menu-footer.css được nạp
       SAU CÙNG ở cả ba layout, nên một chỗ này ăn cho toàn site; sửa ba file
       thì lần sau ai đó đổi một file lại lệch nhau.

       CÁCH TÍNH: mọi kích thước quy về bội số của --mv.

         --mv = min(0.5vw, 3.2px)

       - Máy ≤ 640px: --mv = 0.5vw, nên width = 100 x --mv = ĐÚNG NỬA MÀN
         HÌNH, mọi thứ bên trong phóng theo cùng tỉ lệ.
       - Máy > 640px (tablet): --mv chạm trần 3.2px, cho ra đúng bộ số cũ
         (panel 320px, chữ 25px) — tablet giữ nguyên như thiết kế, không bị
         phóng to lố.

       Hệ số của từng thuộc tính = giá trị vw cũ x 3.2 (vì 31.25 x 3.2 = 100).
       Muốn đổi bề rộng panel thì sửa hệ số của width, đừng đụng --mv.
       ====================================================================== */
    .menu-mobile .menu-m-content {
        --mv: min(0.5vw, 3.2px);

        width: calc(100 * var(--mv));
        padding-top: calc(25 * var(--mv));
    }

    .menu-mobile .menu-m-content .menu-m-close {
        top: calc(9.375 * var(--mv));
        right: calc(9.375 * var(--mv));
        font-size: calc(18.75 * var(--mv));
    }

    .menu-mobile .menu-m-content .menu-m-logo {
        width: calc(42.1875 * var(--mv));
        margin-bottom: calc(12.5 * var(--mv));
    }

    .menu-mobile .menu-m-content .menu-m-logo img {
        border-radius: calc(7.8125 * var(--mv));
    }

    .menu-mobile .menu-m-content .menu-m-list {
        padding: 0 calc(14.0625 * var(--mv));
    }

    .menu-mobile .menu-m-content .menu-m-list li a {
        padding: calc(12.5 * var(--mv)) 0;
        font-size: calc(7.8125 * var(--mv));
        gap: calc(3.125 * var(--mv));
    }

    .menu-mobile .menu-m-content .menu-m-list li a i {
        width: calc(12.5 * var(--mv));
        height: calc(12.1875 * var(--mv));
    }
}