/* Font Anuphan (SIL OFL) — Thái, Việt, Latin. Tiếng Hàn lùi về Noto Sans KR / font hệ thống. */
@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-thai-400-normal.woff2") format("woff2");
    unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-thai-500-normal.woff2") format("woff2");
    unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-thai-700-normal.woff2") format("woff2");
    unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-vietnamese-400-normal.woff2") format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-vietnamese-500-normal.woff2") format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-vietnamese-700-normal.woff2") format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Anuphan";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/anuphan/anuphan-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================================
   SAMKOK ID — Hệ thống giao diện
   -------------------------------------------------------------------------
   Tông màu lấy từ ẢNH NỀN `bg-sky.jpg` (tranh năm tướng): xanh đen #28497D ở
   trên chuyển dần xuống trắng xanh #E4EBFB. Thẻ trắng viền xanh thép, nút
   xanh đen, tiêu đề xanh đậm — người chơi mở web ra thấy cùng một thế giới
   với màn hình đăng nhập trong game.

   ĐỔI TỪ TÔNG VÀNG SANG XANH ĐEN — cách làm
   -----------------------------------------
   Toàn bộ 57 mã hex và 20 mã rgba tông vàng/cam/kem viết cứng trong tệp được
   đổi bằng máy theo một luật duy nhất: GIỮ NGUYÊN ĐỘ SÁNG (L của hệ HSL),
   chỉ đổi sắc độ về 214 và hạ độ bão hoà theo từng khoảng sáng.

   Vì sao giữ L: mọi cặp chữ-trên-nền trong tệp này đã được chọn cho đủ tương
   phản. Đổi màu mà giữ nguyên độ sáng thì tỉ lệ tương phản gần như không đổi,
   nên không có chỗ nào tự dưng khó đọc. Đổi tự do theo mắt thì phải soi lại
   từng cặp một — bảy mươi bảy chỗ.

   Năm mã màu CỜ QUỐC GIA trong `url("data:image/svg+xml,...")` được loại trừ
   khỏi phép đổi: cờ Việt Nam vàng sao trên nền đỏ, đổi đi là sai cờ.

   Các biến chủ chốt (nền, viền, nút, chữ, tiêu đề) sau đó được đặt lại bằng
   tay theo đúng thang màu đo từ ảnh nền, vì phép đổi máy cho ra tông hơi nhạt
   so với bản tranh.

   Viết tay hoàn toàn: không Tailwind, không Bootstrap, không npm, không tải
   phông từ mạng. Mọi hình trang trí — trời, mây, khung viền, thỏi, cờ —
   đều là gradient hoặc SVG nội tuyến, nên không phụ thuộc tệp ảnh nào và
   sắc nét ở mọi mật độ điểm ảnh.

   ⚠️ TÊN CLASS GIỮ NGUYÊN như bản trước. Hai mươi tệp Blade vẫn dùng
      .card / .btn / .field / .alert / .way / .purse … nên đổi da không phải
      sửa chúng. Thành phần mới nằm ở cuối tệp.

   Bố cục:
     1. Biến màu
     2. Nền trời và khung trang
     3. Chữ và tiện ích
     4. Thẻ
     5. Nút
     6. Biểu mẫu
     7. Thông báo
     8. Thanh trên, tab dưới, ngôn ngữ
     9. Màn hình cổng (đăng nhập)
    10. Ví và danh sách
    11. Nạp tiền: mệnh giá, phương thức, các bước
    12. Lịch sử, bảng, phân trang
    13. Hộp thoại
    14. Thành phần mới: OTP, FAQ, liên hệ, lưới cờ
   ========================================================================= */

:root {
    /* ---- Trời: nền của mọi trang ---- */
    --troi-tren:   #28497D;
    --troi-giua:   #60819B;
    --troi-duoi:   #C2D2E6;
    --troi-am:     #E4EBFB;   /* dải sáng sát chân trang, lấy từ đáy ảnh nền */

    /* ---- Giấy: mặt thẻ ---- */
    --giay:        #FFFFFF;
    --giay-dam:    #F2F6FC;   /* ô nhập, hàng phụ */
    --giay-tham:   #E2EAF5;

    /* ---- Xanh thép: viền và nhấn (tên biến giữ 'kim' từ bản vàng) ---- */
    --kim:         #3E6FA8;
    --kim-sang:    #A9C6E4;
    --kim-tham:    #1D3760;
    --vien:        #DCE5F0;   /* viền nhạt giữa các hàng */
    --vien-dam:    #A9C0DA;   /* viền quanh thẻ */

    /* ---- Xanh đen: nút chính (tên biến giữ 'cam' từ bản vàng) ---- */
    --cam-sang:    #4E86C4;
    --cam:         #2B5B95;
    --cam-tham:    #17375F;

    /* ---- Lục: nút xác nhận ---- */
    --luc-sang:    #92D96C;
    --luc:         #56A63C;
    --luc-tham:    #3E7F2A;
    --luc-nhat:    #ECF7E3;

    /* ---- Xanh đậm: tiêu đề và liên kết (tên biến giữ 'do' từ bản vàng) ---- */
    --do:          #1D3760;
    --do-tham:     #112742;
    --do-sang:     #3467A5;

    /* ---- Chữ ---- */
    --chu:         #16283F;
    --chu-mo:      #536E8C;
    --chu-nhat:    #7E93AC;
    --chu-sang:    #EEF3F9;

    /* ---- Trạng thái ---- */
    --ok:          #2E9E5B;
    --ok-nhat:     #E7F6ED;
    --loi:         #DC4437;
    --loi-nhat:    #FDECEA;
    --lam:         #3A86C8;
    --lam-nhat:    #E6F1FA;

    --bo-goc:      18px;
    --bo-goc-nho:  12px;
    --bong:        0 8px 24px rgba(52, 74, 96, .16);
    --bong-nho:    0 2px 8px rgba(52, 74, 96, .12);
    --bong-vang:   0 3px 0 var(--cam-tham), 0 8px 18px rgba(23, 55, 95, .38);

    --font: "Anuphan", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Thai",
            "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;

    --rong: 520px;   /* bề ngang tối đa — thiết kế cho điện thoại trước */
}

/* =========================================================================
   2. NỀN TRỜI VÀ KHUNG TRANG
   ========================================================================= */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--chu);
    -webkit-text-size-adjust: 100%;

    /*
     | Nền trời dựng bằng ba lớp gradient chồng nhau, KHÔNG dùng tệp ảnh:
     |   • hai vầng sáng toả tròn ở trên — mô phỏng mây bắt nắng
     |   • dải dọc chuyển từ xanh trời xuống kem ấm
     | Đặt `fixed` để cuộn trang thì trời đứng yên, giống màn hình game.
     */
    background:
        radial-gradient(120% 60% at 18% 8%,  rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
        radial-gradient(100% 50% at 82% 2%,  rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
        linear-gradient(180deg,
            var(--troi-tren)  0%,
            var(--troi-giua) 32%,
            var(--troi-duoi) 62%,
            var(--troi-am)  100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.wrap {
    width: 100%;
    max-width: var(--rong);
    margin: 0 auto;
    padding: 0 14px;
}

.main {
    padding: 14px 0 96px;   /* chừa chỗ cho thanh tab dưới */
    min-height: 60vh;
}

/*
 | Khung nội dung RỘNG cho những trang chia hai cột.
 |
 | Bộ giao diện này thiết kế cho điện thoại trước, nên khung nội dung chỉ
 | 520px. Trang nào chia hai cột thì mỗi cột còn chưa tới 250px — lưới mệnh
 | giá ba ô bị cắt mất ô thứ ba, chữ «30.000 đ» đứt làm đôi.
 |
 | Nới khung chứ không thu nhỏ chữ: người dùng máy tính có sẵn chỗ, vấn đề
 | chỉ là mình không cho phép dùng. Trang một cột nhiều chữ (Hỗ trợ, đổi mật
 | khẩu) vẫn giữ 520px — dòng chữ dài 1000px thì mắt phải quét mỏi.
 |
 | Bật bằng class trong Blade (`@section('kho', 'rong')`) chứ không dùng
 | :has() — :has() chỉ có từ 2023, mà hỏng thì hỏng đúng cái đang sửa.
 */
@media (min-width: 1024px) {
    .main > .wrap.rong { max-width: 1040px; }
}

/*
 | Trong lưới hai cột, thẻ cao bằng nội dung của chính nó.
 | Mặc định lưới căng đều hai bên, nên thẻ «Đơn nạp» rỗng bị kéo cao bằng
 | cả biểu mẫu bên cạnh — một khung trống cao 800px chỉ để đựng một dòng
 | «Chưa có dữ liệu».
 */
.grid-2 > .card { align-self: start; }

.foot {
    padding: 18px 0 96px;
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
    color: #5C7A8C;
}

/* =========================================================================
   3. CHỮ VÀ TIỆN ÍCH
   ========================================================================= */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: .01em; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }

a { color: var(--do); text-decoration: none; }
a:hover { text-decoration: underline; }

.small  { font-size: 12.5px; line-height: 1.6; }
.muted  { color: var(--chu-mo); }
.center { text-align: center; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0  { margin-bottom: 0; }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar-spacer { flex: 1; }

.stack { display: flex; flex-direction: column; gap: 10px; }

.grid { display: grid; gap: 10px; }

/*
 | Lưới tự gãy hàng, KHÔNG cần câu lệnh @media.
 |
 | Trước đây .grid-2 là hai cột cứng ở mọi bề ngang. Trên điện thoại 390px,
 | trang Tài khoản nhét ví Coin và bảng thông tin cạnh nhau, mỗi bên còn chưa
 | tới 180px — chữ vỡ hết. Nay mỗi cột đòi tối thiểu 220px; không đủ chỗ thì
 | tự xuống thành một cột.
 |
 | Phần min(100%, 220px) là chốt chặn: nếu khung cha hẹp hơn 220px thì cột co
 | theo khung thay vì tràn ra ngoài — thiếu nó là lưới đẩy ngang cả trang.
 */
.grid-2    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-3    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

.num, .money, .data {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.money { font-weight: 800; }
.gain, .plus  { color: var(--ok); font-weight: 700; }
.minus        { color: var(--loi); font-weight: 700; }
.was          { color: var(--chu-nhat); text-decoration: line-through; }
.org          { color: var(--do); font-weight: 700; }
.w3           { min-width: 3ch; display: inline-block; }
.who          { font-weight: 700; }
.k            { color: var(--chu-mo); }
.v            { font-weight: 700; }
.sub          { color: var(--chu-mo); font-size: 12.5px; font-weight: 600; }

.hint {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--chu-mo);
}

.empty {
    padding: 26px 14px;
    text-align: center;
    color: var(--chu-mo);
    font-size: 13.5px;
}

/* =========================================================================
   4. THẺ
   ========================================================================= */

.card {
    position: relative;
    margin-bottom: 14px;
    background: var(--giay);
    border: 2px solid var(--vien-dam);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
    overflow: hidden;
}

/*
 | Sợi kim tuyến mảnh chạy sát mép trong.
 |
 | Thiết kế gốc dùng khung vẽ hai lớp. Ở đây làm bằng một pseudo-element có
 | viền sáng mờ — nhẹ hơn một tệp ảnh khung, và co giãn theo mọi chiều cao
 | mà không bị kéo méo góc như ảnh cắt chín ô.
 */
.card::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: calc(var(--bo-goc) - 5px);
    pointer-events: none;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    background: linear-gradient(180deg, var(--giay-tham), var(--giay-dam));
    border-bottom: 1px solid var(--vien);
}

.card-head h2 {
    color: var(--do);
    font-size: 15px;
}

/* Vạch vàng nhỏ đứng trước tiêu đề — dấu hiệu nhận biết của bộ giao diện. */
.card-head h2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--kim), var(--kim-tham));
}

.card-body { padding: 15px; }

/* =========================================================================
   5. NÚT
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--chu);
    background: var(--giay-dam);
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn:active   { transform: translateY(2px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-block { display: flex; width: 100%; }
.btn-sm    { padding: 8px 14px; font-size: 13px; }

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--cam-sang) 0%, var(--cam) 55%, var(--cam-tham) 100%);
    box-shadow: var(--bong-vang);
    text-shadow: 0 1px 2px rgba(39, 70, 111, .5);
}

.btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--cam-tham), 0 4px 10px rgba(70, 113, 170, .3); }

/* Nút xác nhận cuối cùng của một luồng — màu lục để tách khỏi nút cam. */
.btn-green, .btn-ok {
    color: #fff;
    background: linear-gradient(180deg, var(--luc-sang), var(--luc) 60%, var(--luc-tham));
    box-shadow: 0 3px 0 var(--luc-tham), 0 8px 18px rgba(62, 127, 42, .3);
    text-shadow: 0 1px 2px rgba(30, 80, 20, .5);
}

.btn-red {
    color: #fff;
    background: linear-gradient(180deg, #F0675B, var(--loi) 55%, #A9281E);
    box-shadow: 0 3px 0 #8A2018, 0 8px 18px rgba(169, 40, 30, .3);
    text-shadow: 0 1px 2px rgba(90, 15, 10, .5);
}

.btn-green:hover:not(:disabled), .btn-red:hover:not(:disabled) { filter: brightness(1.05); }

.btn-ghost {
    color: var(--do);
    background: rgba(255, 255, 255, .85);
    border: 1.5px solid var(--vien-dam);
    box-shadow: var(--bong-nho);
}

/* =========================================================================
   6. BIỂU MẪU
   ========================================================================= */

.field { margin-bottom: 14px; }

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--chu-mo);
}

/*
 | Ô chọn nằm trong .field vẫn phải là hộp co giãn xếp DỌC.
 |
 | Quy tắc ngay trên đặt display:block cho mọi <label> trong khối nhập —
 | đúng với nhãn chữ, nhưng .pick / .denom / .pay cũng là <label> và nằm
 | ngay trong .field, nên chúng bị ép về block và mất flex-direction:column.
 |
 | Khung hẹp thì lỗi này TỰ GIẤU MÌNH: ô chỉ rộng 72px nên mỗi mẩu chữ tự
 | xuống một hàng, trông y như xếp dọc. Nới khung ra là chúng dồn hết vào
 | một hàng — «10.000 đ +12.000 8.000». Nghĩa là lỗi đã có sẵn từ đầu, chỉ
 | chờ màn hình rộng mới lộ.
 |
 | .picks .pick là hai lớp nên thắng .field label (một lớp + một thẻ).
 | Không dùng !important — còn phải ghi đè được ở chỗ khác.
 */
.picks .pick,
.denoms .denom,
.pays .pay { display: flex; }

.input, select.input, textarea.input {
    display: block;
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--chu);
    background: var(--giay-dam);
    border: 1.5px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.input::placeholder { color: var(--chu-nhat); }

.input:focus {
    background: #fff;
    border-color: var(--kim);
    box-shadow: 0 0 0 3px rgba(127, 160, 203, .3);
}

.input.err { border-color: var(--loi); background: var(--loi-nhat); }

.err-msg {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--loi);
}

/* Ô nhập có biểu tượng bên trái — dùng ở màn hình đăng nhập. */
.field-icon { position: relative; }

.field-icon .input { padding-left: 44px; }

.field-icon > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--chu-nhat);
    pointer-events: none;
}

/* Nút con mắt hiện/ẩn mật khẩu. */
.eye {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--chu-nhat);
    cursor: pointer;
}

.eye svg { width: 19px; height: 19px; }

/* Ô đánh dấu «ghi nhớ đăng nhập». */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--chu-mo);
    cursor: pointer;
    user-select: none;
}

.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.check .box {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border: 1.5px solid var(--vien-dam);
    border-radius: 5px;
    background: #fff;
    position: relative;
}

.check input:checked + .box {
    background: linear-gradient(180deg, var(--cam-sang), var(--cam));
    border-color: var(--cam-tham);
}

.check input:checked + .box::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(127, 160, 203, .4); }

.captcha-row { display: flex; gap: 10px; align-items: stretch; }
.captcha-row .input { flex: 1; }

.captcha-img {
    height: 48px;
    border: 1.5px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    background: #fff;
    cursor: pointer;
}

/* =========================================================================
   7. THÔNG BÁO
   ========================================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1.5px solid;
    border-radius: var(--bo-goc-nho);
    font-size: 13.5px;
    line-height: 1.6;
    box-shadow: var(--bong-nho);
}

.alert svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; }

.alert-success { color: #1D6E3E; background: var(--ok-nhat);  border-color: #A6DCBB; }
.alert-error   { color: #9A2A20; background: var(--loi-nhat); border-color: #F0B4AE; }
.alert-info    { color: #23577F; background: var(--lam-nhat); border-color: #A9CDE9; }
.alert-warn    { color: #7A5410; background: #FFF6DF; border-color: #EBCB82; }   /* web_id_new: lớp đã dùng ở trang chứng từ cũ nhưng thiếu trong CSS */

/* =========================================================================
   8. THANH TRÊN · TAB DƯỚI · NGÔN NGỮ
   ========================================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243, 246, 250, .92));
    backdrop-filter: blur(8px);
    border-bottom: 1.5px solid var(--vien-dam);
    box-shadow: 0 2px 10px rgba(52, 74, 96, .1);
}

.topbar-inner { display: flex; align-items: center; gap: 10px; min-height: 54px; }

.brand { display: flex; align-items: center; gap: 9px; color: inherit; }
.brand:hover { text-decoration: none; }

.brand-seal, .seal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    color: #203A5C;
    background: linear-gradient(160deg, var(--kim-sang), var(--kim) 55%, var(--kim-tham));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(78, 123, 182, .45);
}

.brand-text b    { display: block; font-size: 14px; line-height: 1.2; color: var(--do); white-space: nowrap; }
.brand-text span { display: block; font-size: 11px; color: var(--chu-mo); white-space: nowrap; }

.nav { display: none; gap: 4px; }

.nav a {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--chu-mo);
}

.nav a:hover { background: var(--giay-dam); text-decoration: none; }
.nav a.on    { color: #fff; background: linear-gradient(180deg, var(--cam-sang), var(--cam)); }

@media (min-width: 640px) { .nav { display: flex; } }

/* ---- Nút và thực đơn ngôn ngữ ---- */

.lang { position: relative; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--chu);
    background: rgba(255,255,255,.9);
    border: 1.5px solid var(--vien-dam);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--bong-nho);
}

.lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 168px;
    padding: 6px;
    background: #fff;
    border: 1.5px solid var(--vien-dam);
    border-radius: var(--bo-goc-nho);
    box-shadow: var(--bong);
    z-index: 40;
}

/*
 | Nhận CẢ HAI cách đặt lớp: trên khung ngoài `.lang` (cách app.js đang làm) và
 | trên chính thực đơn `.lang-menu` (cách bản JS cũ làm).
 |
 | Đây chính là chỗ từng hỏng: JS gắn một đằng, CSS tìm một nẻo, và không bên
 | nào báo lỗi. Nhận cả hai thì dù tệp JS trên máy chủ chưa kịp cập nhật, nút
 | vẫn bấm được.
 */
.lang.open .lang-menu,
.lang-menu.open { display: block; }

.lang-menu a {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--chu);
}

.lang-menu a:hover { background: var(--giay-dam); text-decoration: none; }
.lang-menu a.on    { color: #fff; background: linear-gradient(180deg, var(--cam-sang), var(--cam)); }

/* ---- Thanh tab dưới cùng ---- */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #F9FAFC, #E6EDF5);
    border-top: 2px solid var(--vien-dam);
    box-shadow: 0 -4px 18px rgba(52, 74, 96, .14);
}

.tabbar a {
    flex: 1 1 0;
    max-width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px 4px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--chu-mo);
    text-align: center;
}

.tabbar a:hover { text-decoration: none; }
.tabbar a svg   { width: 22px; height: 22px; }

.tabbar a.on {
    color: var(--cam-tham);
    background: linear-gradient(180deg, #DFE7F2, #CBD8E8);
}

/*
 | Mục đang chọn nhô lên một chút và có vòng sáng.
 |
 | Thiết kế gốc vẽ hẳn một huy hiệu tròn cho mục giữa. Làm bằng transform +
 | box-shadow thì mục NÀO đang chọn cũng nổi lên được, không phải cố định
 | vào một vị trí — thanh này còn đổi số mục theo trạng thái đăng nhập.
 */
.tabbar a.on svg {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 2px 3px rgba(70, 113, 170, .45));
}

/* =========================================================================
   9. MÀN HÌNH CỔNG — ĐĂNG NHẬP, QUÊN MẬT KHẨU
   ========================================================================= */

.gate {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 14px 40px;
}

.gate-card {
    width: 100%;
    max-width: var(--rong);
}

/*
 | Khối tranh đầu trang.
 |
 | Chỗ dành cho ảnh nhân vật Tam Quốc. Chưa có ảnh thì nó vẫn là một mảng
 | trời đẹp — KHÔNG phải khung xám vỡ ảnh. Thả ảnh vào bằng một dòng:
 |
 |     .hero { background-image: url('/assets/img/hero.png'); }
 |
 | Ảnh nên là PNG nền trong, cao chừng 640px, nhân vật dồn về giữa dưới.
 */
.hero {
    position: relative;
    height: 210px;
    margin: 0 -14px 0;
    background-position: center bottom;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* Ba vầng mây mềm — vẽ bằng gradient, không tốn tệp ảnh nào. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(38% 30% at 20% 74%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
        radial-gradient(30% 24% at 76% 82%, rgba(255,255,255,.9),  rgba(255,255,255,0) 70%),
        radial-gradient(46% 26% at 50% 96%, rgba(255,255,255,.98), rgba(255,255,255,0) 72%);
}

.logo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
}

.logo b {
    display: block;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    background: linear-gradient(180deg, #DDE6F1 0%, #90ACD1 45%, #4875B0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Viền chữ nâu đậm: bốn bóng lệch một điểm ảnh, chạy được ở mọi trình duyệt. */
    filter:
        drop-shadow( 1px  0   0 #244268) drop-shadow(-1px  0   0 #244268)
        drop-shadow( 0    1px 0 #244268) drop-shadow( 0   -1px 0 #244268)
        drop-shadow( 0    3px 3px rgba(26, 47, 74, .45));
}

.logo span {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #203A5C;
    background: linear-gradient(180deg, var(--kim-sang), var(--kim));
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(78, 123, 182, .5);
}

.gate-top { padding: 4px 0 14px; text-align: center; }

.gate-top h1 { color: var(--do); font-size: 20px; }
.gate-top p  { margin: 4px 0 0; font-size: 13px; color: var(--chu-mo); }

/* Tiêu đề nhỏ có hai gạch trang trí hai bên — kiểu ĐĂNG NHẬP trong ảnh mẫu. */
.title-gach {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--do);
    text-transform: uppercase;
}

.title-gach::before,
.title-gach::after {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--kim-tham));
}

.title-gach::after { background: linear-gradient(270deg, transparent, var(--kim-tham)); }

/* Hàng phím tắt dưới thẻ đăng nhập: Nạp thẻ · Lịch sử · Hỗ trợ · Ngôn ngữ. */
.tat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 14px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, .82);
    border: 1.5px solid var(--vien-dam);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong-nho);
}

.tat a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--chu-mo);
    text-align: center;
}

.tat a:hover { text-decoration: none; color: var(--do); }
.tat svg { width: 26px; height: 26px; color: var(--cam); }

/* =========================================================================
   10. VÍ VÀ DANH SÁCH
   ========================================================================= */

.purse {
    position: relative;
    /*
     | Cao bằng nội dung của chính nó, không kéo dài theo ô bên cạnh. Ô cạnh
     | nó (bảng thông tin) dài gấp ba, mà lưới thì mặc định căng đều hai bên —
     | thành ra ví Coin là một mảng đỏ rỗng cao gần 500px.
     */
    align-self: start;
    padding: 16px 18px;
    color: var(--chu-sang);
    background: linear-gradient(135deg, #C2532E 0%, #A63C1E 55%, #86290F 100%);
    border: 2px solid var(--kim-tham);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
    overflow: hidden;
}

.purse::after {
    content: "";
    position: absolute;
    right: -26px;
    top: -26px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 34%, rgba(189, 205, 226, .5), rgba(189, 205, 226, 0) 68%);
}

.purse .label { font-size: 12px; opacity: .9; font-weight: 600; }

.purse .value {
    margin-top: 3px;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 4px rgba(0,0,0,.28);
}

.purse .value small { font-size: 14px; font-weight: 700; opacity: .9; }

.kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*
     | Cột hẹp thì cho giá trị rơi xuống hàng dưới, đừng đè lên nhãn.
     |
     | Hộp co giãn căn phải mà thiếu chỗ thì phần thừa tràn ngược sang TRÁI,
     | tức là tràn lên chính cái nhãn — màn hình máy tính hiện ra
     | «Emalm***01@gmail.com». Cho phép xuống hàng là hết.
     */
    flex-wrap: wrap;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--vien);
    font-size: 14px;
}

.kv:last-child { border-bottom: 0; }
.kv > span:first-child { color: var(--chu-mo); }
.kv b { font-weight: 800; }

/*
 | Giá trị và nút bút chì phải nằm CÙNG một hàng.
 |
 | .kv là hộp co giãn, nên ô giá trị là một phần tử co giãn: chữ dài thì
 | xuống dòng, và cái nút bút chì bị đẩy xuống hàng dưới, trông như một nút
 | lạc lõng không thuộc về ai. Cho ô giá trị thành hộp co giãn riêng thì chữ
 | vẫn xuống dòng được nhưng nút luôn bám bên phải chữ.
 */
.kv .v {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
    overflow-wrap: anywhere;
    text-align: right;
}

.kv .v .sua { flex: 0 0 auto; }

.pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--chu-mo);
    background: var(--giay-tham);
    border: 1px solid var(--vien);
}

.pill-gold  { color: #203A5C; background: linear-gradient(180deg, var(--kim-sang), var(--kim)); border-color: var(--kim-tham); }
.pill-green { color: #1D6E3E; background: var(--ok-nhat);  border-color: #A6DCBB; }
.pill-red   { color: #9A2A20; background: var(--loi-nhat); border-color: #F0B4AE; }
.pill-grey  { color: var(--chu-nhat); background: #E2E9F3; border-color: #C4D2E5; }

/* Dòng mã có nút chép. */
.copy-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--giay-dam);
    border: 1.5px dashed var(--vien-dam);
    border-radius: var(--bo-goc-nho);
}

.copy-line .v {
    flex: 1;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 14px;
    letter-spacing: .04em;
    word-break: break-all;
}

.copy-btn {
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, var(--cam-sang), var(--cam));
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.countdown { font-weight: 800; color: var(--do); font-variant-numeric: tabular-nums; }

/*
 | Hộp mã QR — co giãn theo chỗ có, không đóng đinh 230px.
 |
 | Ảnh do img.vietqr.io sinh theo mẫu «compact2»: ngoài ô QR còn có logo
 | VietQR, logo ngân hàng và ba dòng chữ. Nghĩa là trong khung 230px thì ô
 | QR thật chỉ còn chừng 150px — đưa điện thoại lại gần mới quét nổi, mà
 | người đang chuyển tiền thì không nên phải loay hoay.
 |
 | Nay hộp rộng hết phần trống của hộp thoại: ~296px trên điện thoại và
 | ~396px trên máy tính, gấp rưỡi tới gần gấp đôi.
 */
.qr-box {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 14px;
    padding: 12px;
    background: #fff;
    border: 2px solid var(--vien-dam);
    border-radius: var(--bo-goc-nho);
    box-shadow: var(--bong-nho);
}

/*
 | Thẻ <img> vẫn giữ width/height 230 trong HTML: đó là chỗ giữ sẵn để trang
 | không giật khi ảnh tải xong. CSS ghi đè lại lúc hiển thị.
 */
.qr-box img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 720px) {
    .qr-box { max-width: 420px; }
}

/* =========================================================================
   11. NẠP TIỀN
   ========================================================================= */

/* ---- Băng quảng cáo đầu trang nạp ---- */
.bang {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    color: #fff;
    background: linear-gradient(120deg, #E8623B 0%, #C93E22 55%, #A82C14 100%);
    border: 2px solid var(--kim);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
    overflow: hidden;
    position: relative;
}

.bang b    { display: block; font-size: 15px; font-weight: 900; text-shadow: 0 2px 3px rgba(0,0,0,.3); }
.bang span { display: block; font-size: 12.5px; opacity: .95; }

.bang::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -30px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(169, 189, 216, .55), rgba(169, 189, 216, 0) 70%);
}

/* ---- Đầu mục đánh số: «1. CHỌN MỆNH GIÁ» ---- */
.buoc-nhan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--do);
    text-transform: uppercase;
}

.buoc-nhan i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 50%;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, var(--cam-sang), var(--cam));
}

/* ---- Lưới mệnh giá ---- */
.denoms {
    display: grid;
    /* Vì sao minmax(0, …): xem ghi chú ở .picks. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.denom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 6px 10px;
    background: var(--giay-dam);
    border: 2px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    color: var(--chu);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
}

.denom:hover  { text-decoration: none; border-color: var(--kim); }
.denom:active { transform: translateY(1px); }

.denom.on {
    background: linear-gradient(180deg, #E8EEF6, #D1DCEA);
    border-color: var(--cam);
    box-shadow: 0 0 0 3px rgba(100, 139, 191, .22);
}

.denom .gia  { font-size: 13px; font-weight: 800; }
.denom .coin { font-size: 12px; font-weight: 800; color: var(--cam-tham); }

/* Thỏi vàng vẽ bằng SVG nội tuyến — xem partial `vang.blade.php`. */
.denom svg { width: 44px; height: 30px; }

/* Nhãn góc HOT / BEST */
.denom .tag {
    position: absolute;
    top: -7px;
    right: -4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .04em;
    color: #fff;
    background: linear-gradient(180deg, #FF7A5C, #E23B1E);
    box-shadow: 0 2px 5px rgba(226, 59, 30, .45);
}

.denom .tag.best { background: linear-gradient(180deg, #81A1CB, #4C7AB6); }

/* ---- Hàng chip phương thức thanh toán ---- */
.pays {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    min-height: 58px;
    background: #fff;
    border: 2px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--chu-mo);
    text-align: center;
    cursor: pointer;
}

.pay:hover { text-decoration: none; border-color: var(--kim); }

.pay.on {
    color: var(--cam-tham);
    background: linear-gradient(180deg, #E8EEF6, #D1DCEA);
    border-color: var(--cam);
}

.pay svg { width: 22px; height: 22px; }

/* ---- Danh sách kênh nạp kiểu dòng (giữ nguyên .way của bản cũ) ---- */
.ways { display: flex; flex-direction: column; gap: 10px; }

.way {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    background: var(--giay-dam);
    border: 1.5px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    color: var(--chu);
    transition: border-color .15s ease, transform .06s ease;
}

.way:hover  { text-decoration: none; border-color: var(--kim); }
.way:active { transform: translateY(1px); }

.way-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 21px;
    background: #fff;
    border: 1.5px solid var(--vien);
    border-radius: 12px;
}

.way-txt b    { display: block; font-size: 14.5px; font-weight: 800; }
.way-txt span { display: block; font-size: 12px; color: var(--chu-mo); }

/* ---- Khối tổng kết «mệnh giá → nhận được» ---- */
.tong {
    margin: 14px 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--giay-tham), var(--giay-dam));
    border: 1.5px solid var(--vien-dam);
    border-radius: var(--bo-goc-nho);
}

.tong .kv { border-bottom: 1px dashed var(--vien); padding: 8px 0; }
.tong .kv:last-child { border-bottom: 0; }
.tong .kv b { font-size: 16px; color: var(--cam-tham); }

/* ---- Ô chọn dạng thẻ (giữ .picks/.pick của bản cũ) ---- */
/*
 | minmax(0, 1fr) chứ KHÔNG phải 1fr.
 |
 | `1fr` viết đầy đủ là `minmax(auto, 1fr)`, mà `auto` ở đây nghĩa là «không
 | được hẹp hơn nội dung». Chuỗi «+1.200.000» không có chỗ nào ngắt được nên
 | nội dung tối thiểu của một ô đã ~90px; ba ô cộng khe là 288px, trong khi
 | cột chỉ rộng 235px — lưới đẩy tràn ra ngoài thẻ và ô thứ ba bị cắt.
 |
 | Đặt cận dưới về 0 là cho phép ô co lại, và chữ tự xuống dòng bên trong.
 */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.pick {
    padding: 11px 8px;
    text-align: center;
    font-weight: 800;
    background: var(--giay-dam);
    border: 2px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    color: var(--chu);
    cursor: pointer;
}

.pick:hover { text-decoration: none; border-color: var(--kim); }
.pick.on    { background: linear-gradient(180deg, #E8EEF6, #D1DCEA); border-color: var(--cam); }

/* -------------------------------------------------------------------------
   Ô chọn có nút radio ẩn bên trong
   -------------------------------------------------------------------------
   Hai cách đánh dấu ô đang chọn, và cần CẢ HAI:

     • `:has(input:checked)` — thuần CSS, phản hồi tức thì, nhưng trình duyệt
       cũ hơn 2023 không hiểu và sẽ bỏ qua cả quy tắc.
     • class `.on` do app.js gắn — chạy ở mọi nơi.

   Trình duyệt mới thì hai cách trùng nhau, vô hại. Trình duyệt cũ thì còn
   cách thứ hai. Bỏ một cái là một nhóm người dùng bấm mà không thấy gì đổi —
   và họ sẽ bấm lại, rồi bấm nút gửi khi chưa chọn xong.
   ------------------------------------------------------------------------- */

.pick input, .denom input, .pay input { position: absolute; opacity: 0; width: 0; height: 0; }

.pick:has(input:checked),
.denom:has(input:checked) {
    background: linear-gradient(180deg, #E8EEF6, #D1DCEA);
    border-color: var(--cam);
    box-shadow: 0 0 0 3px rgba(100, 139, 191, .22);
}

.pay:has(input:checked) {
    color: var(--cam-tham);
    background: linear-gradient(180deg, #E8EEF6, #D1DCEA);
    border-color: var(--cam);
}

/* Ô chọn mệnh giá trong trang thẻ cào — cùng dáng với lưới .denom */
.pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.pick .money { font-size: 13px; font-weight: 800; }
.pick .gain  { font-size: 12px; font-weight: 800; color: var(--cam-tham); }
.pick .was   { font-size: 10.5px; }
.pick svg    { width: 44px; height: 30px; }

/*
 | Con số dài phải được phép ngắt dòng.
 | «1.000.000 đ» và «+1.200.000» không có dấu cách nào để trình duyệt ngắt,
 | nên nếu không cho ngắt tuỳ ý thì chúng chống cho ô rộng ra và đẩy tràn cả
 | lưới. Ngắt giữa số trông không đẹp, nhưng tràn khỏi thẻ thì tệ hơn — và
 | với cận dưới 0 ở trên thì hầu như không bao giờ phải ngắt thật.
 */
.pick .money, .pick .gain, .pick .was,
.denom .gia, .denom .coin { overflow-wrap: anywhere; }

/* =========================================================================
   12. LỊCH SỬ · BẢNG · PHÂN TRANG
   ========================================================================= */

/* Hàng chip lọc: Tất cả · Thẻ cào · Ví điện tử */
.tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs a {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: var(--chu-mo);
    background: rgba(255,255,255,.9);
    border: 1.5px solid var(--vien-dam);
    white-space: nowrap;
}

.tabs a:hover { text-decoration: none; }

.tabs a.on {
    /* Sáng: nền xanh nhạt + viền xanh, chữ xanh đậm — không còn mảng xanh tối. */
    color: #1D4F8C;
    background: #DCEBFA;
    border-color: #4E86C4;
    box-shadow: 0 2px 6px rgba(78, 134, 196, .25);
}

/* Một dòng giao dịch */
.hist {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--vien);
}

.hist:last-child { border-bottom: 0; }

.hist-main   { flex: 1; min-width: 0; }
.hist-time   { font-size: 12px; color: var(--chu-mo); }
.hist-name   { font-size: 14px; font-weight: 700; }
.hist-right  { text-align: right; white-space: nowrap; }
.hist-amount { font-size: 14.5px; font-weight: 900; color: var(--cam-tham); }
.hist-state  { font-size: 12px; font-weight: 700; }
.hist-state.ok  { color: var(--ok); }
.hist-state.bad { color: var(--loi); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--vien); }

th {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--chu-mo);
    background: var(--giay-dam);
}

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

.pager a, .pager span {
    min-width: 36px;
    padding: 7px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--chu);
    background: rgba(255,255,255,.9);
    border: 1.5px solid var(--vien-dam);
    border-radius: 10px;
}

.pager a:hover  { text-decoration: none; border-color: var(--kim); }
.pager .on      { color: #fff; background: linear-gradient(180deg, var(--cam-sang), var(--cam)); border-color: var(--cam-tham); }
.pager .disabled{ opacity: .45; }

/* =========================================================================
   13. HỘP THOẠI
   ========================================================================= */

.modal-bg {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(30, 42, 54, .55);
    backdrop-filter: blur(3px);
}

.modal-bg.open { display: flex; }

.modal {
    width: 100%;
    max-width: 420px;
    max-height: 86vh;
    overflow-y: auto;
    /* Thanh cuộn mượt trên máy tính khi nội dung dài hơn 86vh. */
    overscroll-behavior: contain;
    background: var(--giay);
    border: 2px solid var(--vien-dam);
    border-radius: var(--bo-goc);
    box-shadow: 0 18px 46px rgba(20, 32, 44, .4);
}
/*
 | Máy tính thì hộp thoại được rộng hơn — mã QR là thứ người dùng phải soi
 | bằng camera điện thoại, càng to càng bắt nhanh.
 */
@media (min-width: 720px) {
    .modal { max-width: 520px; }
}

/*
 | Hộp thoại mã QR trên máy tính: hai cột.
 |
 | Chỉ phóng to mã QR thôi thì nó chiếm gần hết chiều cao cho phép (86vh),
 | đẩy dòng «Nội dung chuyển khoản» xuống dưới tầm nhìn. Mà chép sai dòng đó
 | là đơn không tự khớp được, phải nhờ quản trị viên dò tay. Cho QR sang trái
 | và thông tin sang phải thì cả hai cùng nhìn thấy, không phải cuộn.
 |
 | Điện thoại giữ một cột như cũ: dưới 820px quy tắc này không chạy.
 */
@media (min-width: 820px) {
    .modal-qr { max-width: 800px; }

    .modal-qr .card-body {
        display: grid;
        grid-template-columns: 370px minmax(0, 1fr);
        column-gap: 20px;
        align-content: start;
    }

    /* Dòng trạng thái ở trên và cảnh báo ở dưới trải hết hai cột. */
    .modal-qr .card-body > .alert { grid-column: 1 / -1; }

    .modal-qr .qr-box {
        grid-column: 1;
        align-self: start;
        max-width: 370px;
        margin: 0;
    }

    .modal-qr .qr-info { grid-column: 2; }
}

.spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: quay .7s linear infinite;
}

@keyframes quay { to { transform: rotate(360deg); } }

/* =========================================================================
   14. THÀNH PHẦN MỚI
   ========================================================================= */

/* ---- Thanh tiến trình ba bước ---- */
.steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 18px;
}

.steps .st {
    flex: 1 1 0;
    max-width: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    font-size: 11px;
    font-weight: 700;
    color: var(--chu-nhat);
    text-align: center;
}

.steps .st i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 900;
    color: var(--chu-nhat);
    background: #fff;
    border: 2px solid var(--vien-dam);
}

/* Vạch nối giữa hai bước — vẽ từ tâm bước này sang tâm bước sau. */
.steps .st::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--vien-dam);
}

.steps .st:last-child::after { display: none; }

/* Vòng tròn phải nằm TRÊN vạch nối, nếu không vạch cắt ngang qua số. */
.steps .st i { position: relative; z-index: 1; }

.steps .st.on   { color: var(--cam-tham); }
.steps .st.on i { color: #fff; background: linear-gradient(180deg, var(--cam-sang), var(--cam)); border-color: var(--cam-tham); }

.steps .st.xong   { color: var(--ok); }
.steps .st.xong i { color: #fff; background: var(--ok); border-color: var(--ok); }
.steps .st.xong::after { background: var(--ok); }

/* ---- Ô nhập mã xác thực, mỗi ký tự một ô ---- */
.otp {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 12px;
}

.otp input {
    width: 46px;
    height: 54px;
    padding: 0;
    font-family: inherit;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    color: var(--chu);
    background: var(--giay-dam);
    border: 2px solid var(--vien-dam);
    border-radius: var(--bo-goc-nho);
    outline: none;
    font-variant-numeric: tabular-nums;
}

.otp input:focus {
    background: #fff;
    border-color: var(--cam);
    box-shadow: 0 0 0 3px rgba(100, 139, 191, .25);
}

@media (max-width: 380px) {
    .otp { gap: 6px; }
    .otp input { width: 40px; height: 48px; font-size: 19px; }
}

/* ---- Câu hỏi thường gặp ---- */
.faq { display: flex; flex-direction: column; gap: 8px; }

.faq details {
    background: var(--giay-dam);
    border: 1.5px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    overflow: hidden;
}

.faq summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

/* Dấu cộng thành dấu trừ khi mở — không cần một dòng JS nào. */
.faq summary::after {
    content: "+";
    margin-left: auto;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    color: var(--cam);
}

.faq details[open] summary::after       { content: "\2212"; }
.faq details[open] summary              { background: linear-gradient(180deg, #E8EEF6, #DCE5F1); }
.faq details[open]                      { border-color: var(--kim); }

.faq .tra {
    padding: 0 14px 13px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--chu-mo);
}

/* ---- Khối liên hệ ---- */
.contact { display: flex; flex-direction: column; gap: 9px; }

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--giay-dam);
    border: 1.5px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    color: var(--chu);
}

.contact-item:hover { text-decoration: none; border-color: var(--kim); }

.contact-item .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(180deg, var(--cam-sang), var(--cam));
}

.contact-item .ico svg { width: 20px; height: 20px; }
.contact-item b    { display: block; font-size: 13.5px; font-weight: 800; }
.contact-item span { display: block; font-size: 12px; color: var(--chu-mo); }

/* ---- Lưới chọn ngôn ngữ có cờ ---- */
.langgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

@media (min-width: 420px) { .langgrid { grid-template-columns: repeat(3, 1fr); } }

.langgrid a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    background: var(--giay-dam);
    border: 1.5px solid var(--vien);
    border-radius: var(--bo-goc-nho);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--chu);
}

.langgrid a:hover { text-decoration: none; border-color: var(--kim); }

.langgrid a.on {
    background: linear-gradient(180deg, #E8EEF6, #D1DCEA);
    border-color: var(--cam);
    color: var(--cam-tham);
}

/* Lá cờ vẽ bằng gradient — mỗi mã một biến thể, xem partial lang. */
.co {
    display: block;   /* không có dòng này thì span rỗng bị co lại bằng 0 khi
                         nó KHÔNG nằm trong một khối flex */
    width: 26px;
    height: 18px;
    flex: 0 0 26px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.18);
    box-shadow: 0 1px 2px rgba(0,0,0,.14);
    background-size: cover;
    background-position: center;
}

/* -------------------------------------------------------------------------
   Nhãn chỉ dành cho trình đọc màn hình
   -------------------------------------------------------------------------
   Dùng khi trên màn hình đã có đầu mục đánh số («1. CHỌN NHÀ MẠNG») nên nhãn
   thứ hai là thừa với mắt — nhưng KHÔNG thừa với trình đọc màn hình, thứ cần
   một <label> gắn đúng vào ô nhập.

   `display:none` hay `visibility:hidden` sẽ gỡ luôn khỏi cây trợ năng, tức là
   ô nhập thành vô danh. Cách dưới đây giấu khỏi mắt mà vẫn còn trong cây đó.
   ------------------------------------------------------------------------- */
.sr-nhan {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   Thanh trên ở màn hình rất hẹp
   -------------------------------------------------------------------------
   390px là bề ngang của phần lớn điện thoại đang dùng. Ở đó thanh trên có tới
   bốn thứ: dấu hiệu thương hiệu, tên trang, nút ngôn ngữ, nút đăng xuất — và
   chúng xuống dòng lộn xộn, «Tam Quốc Chibi» vỡ làm hai hàng.

   Bỏ bớt thứ ÍT GIÁ TRỊ NHẤT: dòng phụ «Cổng tài khoản» chỉ nhắc lại điều mà
   người đang đứng trong trang đã biết.
   ------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .brand-text span { display: none; }
    .brand-text b    { font-size: 13.5px; white-space: nowrap; }
    .topbar-inner    { gap: 7px; }
    .lang-btn        { padding: 6px 9px; font-size: 12px; }
    .btn-sm          { padding: 7px 11px; font-size: 12px; }
}

/* Thỏi vàng trong hàng phím tắt hơi bẹt vì viewBox rộng hơn cao. */
.tat svg { width: 30px; height: 26px; }

/* Nút bút chì nhỏ cạnh email / số điện thoại trong thẻ thông tin tài khoản. */
.sua {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    vertical-align: -7px;
    border-radius: 8px;
    color: var(--cam-tham);
    background: var(--giay-tham);
    border: 1px solid var(--vien);
}

.sua:hover { text-decoration: none; border-color: var(--kim); background: #DFE7F2; }
.sua svg   { width: 14px; height: 14px; }

/*
 | Năm mục trên thanh điều hướng máy tính thì hơi chật ở 640–760px.
 | Thu nhỏ chữ và khoảng đệm thay vì cho xuống dòng.
 */
@media (min-width: 640px) and (max-width: 820px) {
    .nav a { padding: 6px 9px; font-size: 12.5px; }
}

/* =========================================================================
   MÀN HÌNH RỘNG
   ========================================================================= */

@media (min-width: 640px) {
    body { font-size: 15.5px; }

    /*
     | Thanh trên RỘNG HƠN phần nội dung.
     |
     | Nội dung cố ý hẹp (520px) vì thiết kế vẽ cho điện thoại và một cột hẹp
     | vẫn dễ đọc trên máy tính. Nhưng thanh trên thì có năm thứ nằm ngang —
     | nhốt nó trong 520px là tên thương hiệu vỡ thành từng chữ một, đúng lỗi
     | nhìn thấy ở ảnh chụp màn hình 1100px đầu tiên.
     */
    .topbar .wrap { max-width: 900px; }

    .main { padding-bottom: 40px; }
    .foot { padding-bottom: 40px; }

    /* Máy tính có thanh điều hướng trên đầu rồi, không cần tab dưới nữa. */
    .tabbar { display: none; }

    /* Giữ minmax(0, …) — xem ghi chú ở .picks. Ở đây chỉ nới khe hở. */
    .denoms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .picks  { gap: 12px; }
    .hero   { height: 250px; }
}

/*
 | Thanh trên rộng bằng khung nội dung rộng nhất.
 |
 | Trang chia hai cột dùng khung 1040px; nếu thanh trên vẫn 900px thì logo
 | thụt vào trong so với mép thẻ bên dưới — nhìn như hai trang dán lại.
 */
@media (min-width: 1024px) {
    .topbar .wrap { max-width: 1040px; }
}

/* =========================================================================
   TÔN TRỌNG LỰA CHỌN CỦA NGƯỜI DÙNG
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
    .topbar, .tabbar, .modal-bg, .tat { display: none !important; }
    body { background: #fff; }
}

/* ---- Cờ nhỏ trong nút và thực đơn ngôn ngữ ---- */
.lang-btn .co { width: 20px; height: 14px; flex: 0 0 20px; }

.lang-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
}

.lang-menu .co { width: 22px; height: 15px; flex: 0 0 22px; }

/* ---- Nút ngôn ngữ nổi ở góc màn hình đăng nhập ---- */
.gate-lang {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
}

.gate-card { position: relative; }

/* -------------------------------------------------------------------------
   Cờ quốc gia — SVG nội tuyến, không một tệp ảnh nào
   -------------------------------------------------------------------------
   Thuộc tính trong SVG dùng NHÁY ĐƠN, còn url() bọc bằng nháy kép. Đảo lại là
   chuỗi đứt ngay tại dấu nháy đầu tiên và cả quy tắc CSS bị bỏ qua — hỏng im
   lặng, không báo gì trong bảng điều khiển.
   ------------------------------------------------------------------------- */
.co-vn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23DA251D'/><path d='M15 4.4l1.6 4.9h5.2l-4.2 3 1.6 4.9-4.2-3-4.2 3 1.6-4.9-4.2-3h5.2z' fill='%23FFFF00'/></svg>"); }
.co-th { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ffffff'/><rect width='30' height='3.34' fill='%23A51931'/><rect y='16.66' width='30' height='3.34' fill='%23A51931'/><rect y='6.67' width='30' height='6.66' fill='%232D2A4A'/></svg>"); }
.co-gb { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23012169'/><path d='M0 0l30 20M30 0L0 20' stroke='%23ffffff' stroke-width='4'/><path d='M0 0l30 20M30 0L0 20' stroke='%23C8102E' stroke-width='2'/><path d='M15 0v20M0 10h30' stroke='%23ffffff' stroke-width='6'/><path d='M15 0v20M0 10h30' stroke='%23C8102E' stroke-width='3.4'/></svg>"); }
.co-id { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='10' fill='%23CE1126'/><rect y='10' width='30' height='10' fill='%23ffffff'/></svg>"); }
.co-kr { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ffffff'/><circle cx='15' cy='10' r='4.6' fill='%23CD2E3A'/><path d='M10.4 10a4.6 4.6 0 009.2 0z' fill='%230047A0'/><g stroke='%23000000' stroke-width='1' stroke-linecap='butt'><path d='M4.6 5.0l2.4 1.7M3.7 6.3l2.4 1.7M2.8 7.6l2.4 1.7'/><path d='M25.4 15.0l-2.4-1.7M26.3 13.7l-2.4-1.7M27.2 12.4l-2.4-1.7'/></g></svg>"); }

/* =========================================================================
   18. ẢNH THẬT — BỘ WID
   =========================================================================

   Trước bản này mọi hình trang trí đều vẽ bằng CSS và SVG nội tuyến: không
   tốn lượt tải, sắc nét ở mọi mật độ điểm ảnh. Nay có bộ ảnh riêng của trò
   chơi thì đổi sang ảnh thật — nhưng KHÔNG đổi tất.

   Nguyên tắc chọn: ảnh thay cho thứ mà CSS chỉ mô phỏng được (nhân vật, cờ,
   thỏi vàng, phong cảnh, biểu tượng có nét vẽ riêng); CSS giữ lại cho thứ
   mà nó làm tốt hơn — nền chuyển màu, viền, bo góc, đổ bóng, nút bấm. Ảnh
   nút bấm là bitmap 640×136: kéo giãn theo chiều dài chữ là méo hoặc mờ,
   trong khi CSS cho ra đúng dáng đó mà sắc nét ở mọi cỡ và mọi ngôn ngữ.

   Ảnh đã được thu về đúng khổ hiển thị rồi giảm bảng màu xuống 192 màu —
   tranh vector phẳng nên gần như không mất chất lượng: 2,4 MB còn 1,0 MB.
   ========================================================================= */

/* ---- Biểu tượng chung ---- */

.ico {
    display: inline-block;
    flex: 0 0 auto;
    object-fit: contain;
    vertical-align: middle;
    user-select: none;
}

/* -------------------------------------------------------------------------
   Nền trời
   -------------------------------------------------------------------------
   Ảnh dọc cho điện thoại, ảnh ngang cho máy tính. Cùng một cảnh nên chuyển
   giữa hai khổ không thấy gãy.

   Màu nền đặt trùng với màu trời phía trên của ảnh: lúc ảnh chưa tải xong
   thì trang vẫn là trời xanh chứ không phải một mảng trắng loé mắt.
   ------------------------------------------------------------------------- */

body {
    background-color: #BFE4F7;
    background-image: url("../img/bg/bg-sky.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/*
 | ĐÃ BỎ: khối @media (min-width: 900px) đổi nền sang bg-sky-desktop.jpg.
 |
 | Ảnh nền nay là tranh NĂM TƯỚNG khổ dọc, không có bản khổ ngang tương ứng.
 | Kéo một tấm 750×1334 ra 1920px thì dải nhân vật phóng to mờ nhoè choán hết
 | màn hình. Nền ngoài khung giờ là dải chuyển màu lấy từ chính ảnh đó — xem
 | mục 22.7 ở cuối tệp.
 */

/* -------------------------------------------------------------------------
   Khối tranh đầu màn đăng nhập
   -------------------------------------------------------------------------
   Ba nhân vật đứng thành hình chữ V ngược: người giữa to và thấp nhất, hai
   người hai bên nhỏ hơn và lùi lên sau. Logo chồng lên phần chân họ, đúng
   như bản thiết kế.
   ------------------------------------------------------------------------- */

.hero {
    position: relative;
    /*
     | Chiều cao phải LỚN HƠN (ảnh cao nhất + khoảng cách đáy), nếu không
     | nhân vật tràn lên trên và bị cắt ngang đầu — đúng lỗi thấy ở ảnh chụp
     | đầu tiên: đỉnh đầu Lưu Bị nằm ở -17px.
     */
    height: 360px;
    margin-bottom: -18px;
    background: none;
    overflow: visible;
}

.hero-nv {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-nv img {
    position: absolute;
    bottom: 86px;
    /*
     | height:auto là BẮT BUỘC. Thẻ <img> có height cứng (để trình duyệt
     | chừa chỗ trước khi ảnh về), nên nếu CSS chỉ đổi width thì ảnh bị kéo
     | méo theo chiều dọc — nhân vật lùn đi hoặc cao nghêu.
     */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(20, 42, 66, .28));
}

.nv-giua { left: 50%; width: 45%; max-width: 176px; transform: translateX(-50%); z-index: 2; }
.nv-trai { left: 3%;  width: 34%; max-width: 132px; bottom: 116px; z-index: 1; }
.nv-phai { right: 3%; width: 34%; max-width: 132px; bottom: 116px; z-index: 1; }

/* Logo nằm trên cùng, đè lên chân nhân vật. */
.hero .logo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 3;
}

/*
 | Dòng phụ «IDLE GAME · TAM QUỐC» đặt trên dải băng đỏ.
 | Dải băng là ảnh có phần đuôi nhọn hai bên nên phải để nó tự co theo chữ:
 | nền 100% chiều rộng, chữ có khoảng đệm ngang rộng để không đè lên đuôi.
 */
.hero .logo span {
    display: inline-block;
    padding: 7px 34px 9px;
    background: url("../img/badges/ribbon-title.png") no-repeat center;
    background-size: 100% 100%;
    color: #CEDAE9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    letter-spacing: 1.2px;
}

@media (min-width: 640px) {
    .hero { height: 420px; }
    .hero-nv img { bottom: 100px; }
    .nv-giua { max-width: 208px; }
    .nv-trai, .nv-phai { max-width: 156px; bottom: 134px; }
}

/* -------------------------------------------------------------------------
   Hàng phím tắt dưới thẻ đăng nhập
   ------------------------------------------------------------------------- */

.tat img.ico { width: 34px; height: 34px; }

/* -------------------------------------------------------------------------
   Thanh tab dưới cùng
   -------------------------------------------------------------------------
   Mục đang mở: biểu tượng nằm trong một vòng tròn cam nổi cao hơn hàng còn
   lại. Đây là chi tiết bản thiết kế dùng để trả lời câu «tôi đang ở đâu»
   mà không cần đọc chữ.
   ------------------------------------------------------------------------- */

.tabbar a img.ico { width: 24px; height: 24px; }

.tabbar a.on img.ico {
    width: 26px;
    height: 26px;
    padding: 6px;
    margin-top: -14px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--cam-nhat, #99B1D1), var(--cam));
    box-shadow: 0 3px 8px rgba(67, 110, 165, .45);
}

/* -------------------------------------------------------------------------
   Cờ
   -------------------------------------------------------------------------
   Thay hoàn toàn năm lá cờ vẽ bằng SVG. Cờ vẽ tay ở cỡ 26×18 điểm ảnh thì
   chi tiết bết lại — cờ Hàn Quốc từng phải vẽ lại một lần vì lý do đó. Ảnh
   thật không có vấn đề ấy, và bộ này có sẵn tám nước.
   ------------------------------------------------------------------------- */

.co {
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 19px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(29, 51, 81, .18);
}

.co-vn { background-image: url("../img/flags/vn.png"); }
.co-gb { background-image: url("../img/flags/gb.png"); }
.co-th { background-image: url("../img/flags/th.png"); }
.co-id { background-image: url("../img/flags/id.png"); }
.co-kr { background-image: url("../img/flags/kr.png"); }
.co-cn { background-image: url("../img/flags/cn.png"); }
.co-tw { background-image: url("../img/flags/tw.png"); }
.co-jp { background-image: url("../img/flags/jp.png"); }

.langgrid .co { width: 34px; height: 25px; }

/* -------------------------------------------------------------------------
   Thỏi vàng trong lưới mệnh giá
   -------------------------------------------------------------------------
   Ba bậc theo vị trí trong danh sách, không theo con số tuyệt đối — bảng
   mệnh giá mỗi nước một khác. Ảnh thay cho khối SVG dựng bằng hình thang.
   ------------------------------------------------------------------------- */

.vang-anh {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.pick .vang-anh, .denom .vang-anh { margin-bottom: 2px; }

/* -------------------------------------------------------------------------
   Nhãn góc HOT / BEST
   ------------------------------------------------------------------------- */

.nhan-goc {
    position: absolute;
    top: -9px;
    right: -6px;
    z-index: 2;
    padding: 2px 9px 3px;
    border-radius: 9px 9px 9px 2px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .4px;
    color: #fff;
    background: linear-gradient(180deg, #FF7A5C, #E8402A);
    box-shadow: 0 2px 5px rgba(190, 50, 30, .4);
}

.nhan-goc.best { background: linear-gradient(180deg, #81A1CB, #4B79B6); }

/* -------------------------------------------------------------------------
   Ba bước của luồng quên mật khẩu
   -------------------------------------------------------------------------
   Vòng tròn số nay là ảnh: chưa tới thì mờ, đang làm thì cam, đã qua thì
   vòng xanh có dấu tích. Chữ số vẫn là chữ thật nằm đè lên ảnh, nên đổi
   ngôn ngữ hay đổi cỡ chữ đều không lệch.
   ------------------------------------------------------------------------- */

/*
 | Chọn theo `.steps .st …` chứ không phải `.st …`.
 |
 | Quy tắc gốc ở mục 15 là `.steps .st.on i { background: linear-gradient(…) }`
 | — ba lớp, nên `.st.on i` hai lớp ở đây thua và ảnh không bao giờ hiện.
 | Và vì gốc dùng dạng viết gọn, ở đây cũng phải khai lại cả cụm: chỉ đổi
 | background-image thì background-size vẫn bị gốc kéo về `auto`.
 */
.steps .st i {
    background: url("../img/badges/step-circle-idle.png") no-repeat center;
    background-size: 100% 100%;
    border: 0;
    color: #527EB8;
}

.steps .st.on i {
    background: url("../img/badges/step-circle.png") no-repeat center;
    background-size: 100% 100%;
    border: 0;
    color: #223D60;
}

.steps .st.xong i {
    background: url("../img/badges/step-circle-done.png") no-repeat center;
    background-size: 100% 100%;
    border: 0;
    /* Ảnh đã có sẵn dấu tích — giấu nội dung chữ đi. */
    font-size: 0;
    color: transparent;
}

.steps .st.xong i svg { display: none; }

/* -------------------------------------------------------------------------
   Ô nhập có biểu tượng
   ------------------------------------------------------------------------- */

.field-icon img.ico {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    opacity: .85;
    pointer-events: none;
}

.eye img.ico { width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   Ô đánh dấu «Ghi nhớ đăng nhập»
   ------------------------------------------------------------------------- */

.check .box {
    background: url("../img/icons/ui/checkbox-off.png") no-repeat center;
    background-size: 100% 100%;
    border: 0;
    box-shadow: none;
}

/*
 | Phải khai LẠI cả cụm, không được chỉ đổi background-image.
 |
 | Quy tắc gốc ở mục 6 dùng dạng viết gọn `background: linear-gradient(...)`,
 | mà dạng viết gọn RESET mọi thuộc tính con về mặc định — kể cả
 | background-size và background-repeat. Nó có độ ưu tiên cao hơn `.check
 | .box` nên phần `background-size: 100% 100%` ở trên không tới được đây:
 | ảnh 128px bị vẽ nguyên cỡ ở góc trên trái của ô 19px, và góc ấy trong
 | suốt — nhìn ra màn hình thì đúng bằng «không có ô đánh dấu nào».
 */
.check input:checked + .box {
    background: url("../img/icons/ui/checkbox-on.png") no-repeat center;
    background-size: 100% 100%;
}

.check input:checked + .box::after { display: none; }

/* -------------------------------------------------------------------------
   Đăng nhập bằng mạng xã hội
   ------------------------------------------------------------------------- */

.mxh-nhan {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    font-size: 12.5px;
    color: var(--chu-mo);
}

.mxh-nhan::before,
.mxh-nhan::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vien-dam), transparent);
}

.mxh {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.mxh a {
    display: block;
    line-height: 0;
    border-radius: 50%;
    transition: transform .12s ease;
}

.mxh a:hover { transform: translateY(-2px); }

.mxh img.ico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 3px 7px rgba(30, 42, 54, .22);
}

/* -------------------------------------------------------------------------
   Ảnh minh hoạ trong thân trang
   ------------------------------------------------------------------------- */

.minhhoa {
    display: block;
    width: 190px;
    max-width: 62%;
    height: auto;
    margin: 4px auto 12px;
}

/* Trang trống: thay khối chữ trơ trọi bằng chiếc hộp rỗng. */
.empty img.ico {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    opacity: .9;
}

/* Nhân vật đứng nép góc dưới bên phải trang Hỗ trợ. */
.nv-goc {
    position: absolute;
    right: 6px;
    bottom: 0;
    width: 128px;
    pointer-events: none;
    filter: drop-shadow(0 5px 9px rgba(20, 42, 66, .25));
}

/* -------------------------------------------------------------------------
   Biểu tượng phương thức thanh toán
   ------------------------------------------------------------------------- */

.way-icon img.ico, .pay img.ico { width: 30px; height: 30px; }

.contact .ico-anh { width: 22px; height: 22px; }

/* Nhân vật góc trang Hỗ trợ — chỉ có chỗ cho nó trên màn hình rộng. */
.nv-goc { display: none; }

@media (min-width: 900px) {
    .main { position: relative; }
    .nv-goc { display: block; right: -18px; bottom: 40px; }
}

/* ============================================================================
   19. BA TRANG PHÁP LÝ
   ============================================================================
   Chính sách bảo mật, hướng dẫn xoá dữ liệu, điều khoản sử dụng.

   Ba trang này khác mọi trang khác ở một điểm: chúng là VĂN BẢN DÀI để đọc,
   không phải bảng số liệu hay biểu mẫu. Nên chúng cần khoảng cách dòng rộng
   hơn và khoảng cách giữa các đoạn rõ hơn phần còn lại của web.

   Đặt ở cuối tệp là cố ý: khối này đứng SAU mọi khai báo `.card-body p` khác
   nên thắng ở cùng độ đặc hiệu, khỏi phải nâng bộ chọn lên cho cồng kềnh.
   @media không làm tăng độ đặc hiệu — bài học đã trả giá ở phần modal QR.
   ========================================================================= */

.phaply .card-body p {
    margin: 0 0 10px;
    line-height: 1.7;
}

.phaply .card-body p:last-child { margin-bottom: 0; }

/* Danh sách gạch đầu dòng.
   Khai lại list-style và padding thay vì tin vào mặc định trình duyệt: tệp
   này có `* { box-sizing: border-box }` nhưng không reset margin/padding, nên
   hôm nay mặc định vẫn còn — chỉ cần ai đó thêm một dòng reset toàn cục là
   danh sách mất sạch dấu chấm và mất thụt lề, mà không ai ngờ tới trang này. */
.ds-phaply {
    list-style: disc;
    margin: 6px 0 12px;
    padding-left: 22px;
}

.ds-phaply li {
    margin-bottom: 7px;
    line-height: 1.65;
}

.ds-phaply li:last-child { margin-bottom: 0; }

/* Khối liên hệ ở cuối: nhãn trái, giá trị phải.
   overflow-wrap để địa chỉ thư dài không đẩy vỡ hàng — cùng lỗi đã gặp ở
   trang tài khoản, nơi email bị tràn ngược lên đè cả nhãn. */
.phaply .kv .v { overflow-wrap: anywhere; }

/* ============================================================================
   20. KHUNG ĐIỆN THOẠI — MỘT BỐ CỤC CHO MỌI MÀN HÌNH
   ============================================================================

   Toàn bộ phần sau đăng nhập nằm trong một cột hẹp căn giữa, kể cả trên máy
   tính. Máy tính chỉ thấy thêm nền tranh hai bên khung.

   VÌ SAO ĐẶT Ở CUỐI TỆP
   ---------------------
   Khối này GHI ĐÈ các quy tắc «màn hình rộng» viết ở trên (mục 640px, 900px,
   1024px). Media query KHÔNG làm tăng độ đặc hiệu — cùng bộ chọn thì cái viết
   SAU thắng. Nên chỉ cần đứng cuối là đủ, không cần !important và không cần
   nâng bộ chọn cho cồng kềnh. Đây cũng là bài học đã ghi ở mục 19.

   Cách này giữ nguyên toàn bộ mã cũ thay vì đi sửa rải rác mười chỗ: muốn
   quay lại bố cục hai cột thì xoá đúng một khối.
   ========================================================================= */

:root {
    /*
     | Bề ngang khung. 430px = đúng khổ iPhone 14 Pro Max, và là khổ rộng nhất
     | còn giữ được lưới ba cột mệnh giá mà chữ «1.000.000 đ» không vỡ dòng.
     */
    --may: 430px;
}

.may {
    width: 100%;
    max-width: var(--may);
    margin: 0 auto;
    min-height: 100vh;

    /*
     | Nền giấy liền một dải từ đỉnh tới đáy, có viền và bóng đổ hai bên.
     |
     | Không tô nền thì trên máy tính nội dung trôi lơ lửng giữa ảnh nền và
     | mắt không biết đâu là mép trang. Bóng đổ làm cái cột này đọc ra như một
     | vật thể đặt trên nền, đúng cảm giác của bản thiết kế.
     */
    background: linear-gradient(180deg, #F9FBFD 0%, #F2F5F9 100%);
    box-shadow: 0 0 0 1px rgba(52, 74, 96, .10),
                0 12px 48px rgba(30, 52, 74, .28);
}

/*
 | Từ 640px trở lên mới thấy nền hai bên, nên bo góc trên và chừa lề.
 | Dưới ngưỡng đó khung chiếm trọn màn hình — bo góc lúc ấy chỉ tạo bốn chấm
 | nền lạ ở bốn góc màn hình điện thoại.
 */
@media (min-width: 640px) {
    .may {
        border-radius: 20px 20px 0 0;
        margin-top: 14px;
        min-height: calc(100vh - 14px);
    }
}

/* ---- Ghi đè các quy tắc «màn hình rộng» của mục 640/900/1024px ---- */

/* Thanh trên bằng đúng khung, không rộng hơn. */
.topbar .wrap { max-width: none; }

/* Trang hai cột nay cũng là một cột. */
.main > .wrap.rong { max-width: none; }
.grid-2 { grid-template-columns: minmax(0, 1fr); }

/*
 | Thanh điều hướng ngang KHÔNG dùng nữa — thanh tab dưới thay hẳn nó.
 |
 | Hai thanh cùng hiện thì cùng một mục xuất hiện hai lần trên một màn hình,
 | và người dùng phải đoán xem hai chỗ đó có khác nhau không.
 */
.nav { display: none; }

/*
 | Thanh tab dưới LUÔN hiện, và phải tự căn giữa.
 |
 | Nó `position: fixed` nên không nằm trong dòng chảy của .may — để nguyên
 | `left: 0; right: 0` thì nó kéo dài hết bề ngang màn hình máy tính trong
 | khi khung chỉ rộng 430px. Trông như một thanh lạ dán vào đáy trình duyệt.
 */
.tabbar {
    display: flex;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--may);
    border-radius: 16px 16px 0 0;
}

/* Chừa chỗ cho thanh tab ở mọi khổ, không chỉ trên điện thoại. */
.main { padding-bottom: 20px; }
.foot { padding-bottom: 96px; }

/* Nhân vật góc trang Hỗ trợ: khung hẹp không còn chỗ cho nó. */
.nv-goc { display: none; }

/* ---- Hộp thoại phải nằm trong khung, không theo bề ngang cửa sổ ---- */

/*
 | Đây là cái bẫy lớn nhất của việc khoá khung ở 430px, và nó không tự lộ ra.
 |
 | Mọi @media đều đo BỀ NGANG CỬA SỔ, không phải bề ngang khung. Trên máy tính
 | 1280px thì các quy tắc «màn hình rộng» viết cho hộp thoại vẫn kích hoạt:
 |
 |   @media (min-width: 720px) { .modal    { max-width: 520px } }
 |   @media (min-width: 820px) { .modal-qr { max-width: 800px; hai cột } }
 |
 | Nghĩa là hộp thoại mã QR rộng 800px chia hai cột bung ra giữa một trang chỉ
 | rộng 430px. Không có lỗi nào được ném ra — chỉ là hộp thoại tràn ra ngoài
 | khung, và chỉ thấy khi có người thật mở nó trên máy tính.
 |
 | calc(100vw - 24px) là để trên điện thoại thật (cửa sổ hẹp hơn 430px) hộp
 | thoại vẫn chừa được lề hai bên.
 */
.modal,
.modal-qr { max-width: min(var(--may), calc(100vw - 24px)); }

/* Bố cục hai cột của hộp thoại QR: gỡ hẳn, khung hẹp không chứa nổi. */
.modal-qr .card-body { display: block; }
.modal-qr .qr-box    { max-width: none; margin: 0 auto; }

/*
 | Lưới chọn ngôn ngữ: hai cột, không phải ba.
 |
 | Quy tắc cũ mở ba cột từ 420px — tính theo cửa sổ. Trong khung 430px, trừ
 | 28px đệm hai bên, ba cột còn chưa tới 125px mỗi ô: tên ngôn ngữ dài như
 | «Bahasa Indonesia» vỡ thành ba dòng.
 */
.langgrid { grid-template-columns: repeat(2, 1fr); }

/* ---- Nền hai bên ---- */

/*
 | ĐÃ BỎ: khối @media (min-width: 640px) đổi nền sang bg-sky-desktop.jpg.
 |
 | Cùng lý do đã ghi ở mục 18: ảnh nền mới là tranh năm tướng khổ dọc, không
 | có bản khổ ngang. Nền ngoài khung chuyển sang dải màu — xem mục 22.7.
 |
 | Tệp bg-sky-desktop.jpg nay KHÔNG còn chỗ nào trỏ tới. Xoá được.
 */

/* ============================================================================
   21. BẢNG DỮ LIỆU TRONG KHUNG HẸP → DANH SÁCH THẺ
   ============================================================================

   Bảng bốn cột (Thời gian · Ghi chú · Số tiền · Số dư sau) không vừa 400px.
   Ép vào thì cột «Ghi chú» — chỗ chứa câu dài nhất — bị bóp còn vài chục pixel
   và mỗi ô vỡ thành sáu dòng chữ.

   Nên mỗi hàng đổi thành MỘT THẺ:

       12/08 19:05                        +126
       Hoàn Coin · gói 9433 · nhân vật 1        55.220

   Làm hoàn toàn bằng CSS, KHÔNG sửa Blade. Nhờ vậy quy tắc này áp cho mọi
   bảng `.data` hiện có và mọi bảng thêm sau này, kể cả bảng ba cột hay năm
   cột — thứ tự do `order` quyết định chứ không do số cột.
   ========================================================================= */

table.data { border-collapse: separate; border-spacing: 0 8px; font-size: 13.5px; }

/* Tiêu đề cột biến mất: nhãn không còn chỗ, và nội dung tự nói ra nó là gì. */
table.data thead { display: none; }

table.data tbody { display: block; }

/*
 | LƯỚI HAI CỘT, KHÔNG PHẢI FLEX-WRAP.
 |
 | Bản đầu dùng flex-wrap và trông đúng — cho tới khi gặp một dòng có số tiền
 | ngắn ("+35"): lúc ấy thời gian + số tiền + phần đầu ghi chú vẫn vừa một
 | hàng, nên ghi chú KHÔNG xuống dòng và số tiền trôi vào giữa. Bố cục đổi
 | theo độ dài dữ liệu là bố cục không kiểm soát được.
 |
 | Lưới thì mỗi ô có chỗ cố định, bất kể chữ dài ngắn:
 |
 |     cột 1 (co giãn)              cột 2 (vừa nội dung)
 |     ┌──────────────────────────┬─────────────────┐
 |     │ 20/08 19:05              │           +126  │  hàng 1
 |     │ Hoàn Coin · gói 9433 ·…  │         55.220  │  hàng 2
 |     └──────────────────────────┴─────────────────┘
 |
 | Không dùng grid-template-areas vì số cột thay đổi giữa các bảng (tab ví có
 | bốn cột, tab khác ba). Ở đây chỉ ghim HÀNG cho hai ô luôn phải ở trên, còn
 | lại để trình duyệt tự xếp theo thứ tự DOM — nên bảng nhiều hay ít cột đều
 | ra đúng.
 */
table.data tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 10px 12px;
    background: var(--giay-dam);
    border: 1px solid var(--vien);
    border-radius: var(--bo-goc-nho);
}

table.data td {
    display: block;
    grid-column: 1;
    padding: 0;
    border: 0;
    line-height: 1.5;
}

/* Ô đầu (thời gian) luôn ở hàng trên, cột trái. */
table.data td:first-child { grid-row: 1; }

/* Mọi cột số nằm ở cột phải, căn phải. */
table.data td.num { grid-column: 2; text-align: right; }

/*
 | Số tiền ghim lên hàng 1 — đây là thứ mắt tìm đầu tiên khi lướt lịch sử.
 | Chỉ ghim ô CÓ DẤU (plus/minus). Ghim mọi ô .num thì bảng nào có hai cột số
 | cùng loại sẽ có hai ô chồng lên nhau ở cùng một chỗ.
 */
table.data td.num.plus,
table.data td.num.minus { grid-row: 1; font-size: 15px; font-weight: 900; }

/* Số dư sau chỉ để đối chiếu — nhỏ và mờ, nằm dưới số tiền. */
table.data td.num.muted { font-size: 12.5px; font-weight: 700; align-self: end; }

/* =========================================================================
   22. CỔNG ĐĂNG NHẬP — CANH GIỮA KHỐI TRANH, HÀNG NÚT QUAY LẠI
   =========================================================================

   Mục 18 dựng `.hero` cao 360px để chứa BA NHÂN VẬT Tam Quốc. Ba ảnh đó hiện
   đang bị chú thích trong layouts/gate.blade.php, nên cái còn lại trong khung
   chỉ là khối logo cao 74px — mà nó vẫn bị ghim ở `bottom: 6px`.

   Kết quả đo được ở màn 390×844 trước bản sửa này:

       .hero      y =   0 … 360
       .logo      y = 280 … 354      (74px nội dung)
       => 280px trống phía trên, tức 78% khung tranh là khoảng không

   Logo được canh giữa theo chiều NGANG nhưng bị dồn xuống đáy theo chiều DỌC
   của một cái hộp cao gấp gần năm lần nó. Đó là chỗ nhìn ra «chưa canh giữa».

   Khoảng trống ấy còn đẩy mọi thứ bên dưới xuống 342px, và đó chính là lý do
   nút «Quay lại» ở trang quên mật khẩu rơi xuống tận đáy trang rồi bị che.
   ========================================================================= */

/* -------------------------------- 22.0 Khi KHÔNG có khối tranh ---------- */

/*
 | Khối tranh hiện ĐANG TẮT ở layouts/gate.blade.php — nền trời đã là một bức
 | tranh đủ rồi, chồng thêm logo lên nó chỉ che mất cảnh.
 |
 | Khi nó tắt, thẻ đăng nhập bắt đầu ngay tại y = 0, mà nút ngôn ngữ thì
 | `position: absolute; top: 14px` so với chính `.gate-card` — nó đè thẳng lên
 | dòng tiêu đề «ĐĂNG NHẬP».
 |
 | 58px = 14 (đỉnh nút) + 28 (cao nút) + 16 (khoảng thở). Đo bằng đúng nút đó
 | chứ không ước chừng: nút cao 28,3px ở cả năm ngôn ngữ vì `.lang-btn` khoá
 | cỡ chữ và khoảng đệm, không phụ thuộc độ dài nhãn.
 |
 | Đây là CLASS chứ không phải quy tắc chung cho `.gate-card`: bật lại khối
 | tranh thì chỉ việc gỡ class, không ai phải nhớ đi tìm một con số trong CSS.
 */
.gate-card.khong-tranh {
    padding-top: 58px;
}

/* ------------------------------------------------- 22.1 Khối tranh ------ */

/*
 | Các quy tắc dưới đây hiện KHÔNG có phần tử nào để áp — khối tranh đang tắt.
 | Giữ nguyên chứ không xoá: bật lại chỉ là chuyện bỏ chú thích trong Blade.
 */

/*
 | Cho khung tự co theo nội dung rồi canh giữa nội dung ấy, thay vì ghim đáy.
 |
 | `min-height` chứ không phải `height`: khối tranh vẫn giữ được một dải trời
 | đủ rộng để nhìn ra bố cục, nhưng nếu tên trò chơi dài phải xuống dòng thì
 | khung tự cao thêm chứ không cắt mất chữ.
 |
 | Giữ nguyên `margin` âm hai bên — khối tranh vẫn tràn hết bề ngang màn hình;
 | phần đệm ngang thêm vào đây là để chữ không chạm mép ở máy hẹp.
 */
.hero {
    height: auto;
    min-height: 0;
    margin: 0 -14px;
    padding: 22px 14px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Thôi ghim đáy — vị trí nay do flex của `.hero` quyết định. */
.hero .logo {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
}

/*
 | Ảnh biểu tượng ứng dụng thay cho khối chữ vàng.
 |
 | Bề rộng co theo màn hình: 34vw để nó luôn chiếm đúng một phần ba bề ngang
 | ở điện thoại, chặn dưới 96px cho máy hẹp nhất và chặn trên 132px để trên
 | máy tính nó không phình thành một tấm poster.
 |
 | `height: auto` là BẮT BUỘC vì thẻ <img> có khai height cứng (để trình duyệt
 | chừa sẵn chỗ). Chỉ đổi width mà quên dòng này thì ảnh bị kéo méo theo chiều
 | dọc — đúng cái bẫy đã dính ở ảnh nhân vật, xem mục 18.
 */
.logo-app {
    display: block;
    width: clamp(96px, 34vw, 132px);
    height: auto;
    margin: 0 auto 10px;
    /* Nhấc ảnh khỏi nền trời một chút, cùng kiểu bóng với ảnh nhân vật. */
    filter: drop-shadow(0 6px 12px rgba(20, 42, 66, .32));
}

/* Dải băng đỏ không được rộng hơn khung chứa nó. */
.hero .logo span {
    max-width: 100%;
}

@media (min-width: 640px) {
    .logo-app { width: 150px; }
}

/*
 | BẬT LẠI BA NHÂN VẬT
 | -------------------
 | Bỏ chú thích khối `.hero-nv` trong layouts/gate.blade.php rồi thêm class
 | `co-nv` vào thẻ `.hero`:
 |
 |     <div class="hero co-nv">
 |
 | Khi đó khung trở lại đúng kích thước cũ của mục 18 và logo đè lên chân
 | nhân vật như bản thiết kế. Viết thành một class thay vì dùng `:has()` là
 | có chủ ý: `:has()` không chạy trên WebView Android cũ — mà người chơi mở
 | trang này phần lớn từ trong game — và khi nó không chạy thì hỏng im lặng,
 | không có lỗi nào để lần ra.
 */
.hero.co-nv {
    display: block;
    min-height: 0;
    height: 360px;
    padding: 0;
    margin-bottom: -18px;
}

.hero.co-nv .logo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
}

@media (min-width: 640px) {
    .hero.co-nv { height: 420px; }
}

/* ---------------------------------------------- 22.2 Hàng hai nút ------- */

/*
 | Nút phụ đứng CẠNH nút chính, không nổi lơ lửng dưới thẻ.
 |
 | Chỗ cũ của «Quay lại» là ngay trên mép dưới trang: đo ở màn 390×844, đáy
 | của nó nằm ở y = 852 trong khi màn hình chỉ cao 844 — nghĩa là phải cuộn
 | hết cỡ mới thấy, và trên điện thoại thật thì thanh công cụ dưới của trình
 | duyệt cùng vạch điều hướng phủ đúng dải đó.
 |
 | Đặt cạnh nút xác nhận thì nó nằm giữa thẻ, chỗ mắt đang nhìn và ngón tay
 | đang đặt — không còn phụ thuộc vào chiều cao trang hay thanh của trình duyệt.
 |
 | `flex: 1 1 130px`: hai nút chia đôi hàng khi còn đủ chỗ (từ khoảng 270px
 | trở lên), hẹp hơn thì TỰ XUỐNG DÒNG và mỗi nút chiếm trọn bề ngang. Cần
 | điều đó vì `.btn` có `white-space: nowrap` — không cho xuống dòng thì nhãn
 | dài của tiếng Indonesia hay tiếng Anh sẽ tràn ra khỏi viên nút.
 */
.nut-hang {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nut-hang > .btn {
    flex: 1 1 130px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Nút chính rộng hơn nút phụ một chút — mắt phải thấy ngay đâu là việc chính. */
.nut-hang > .btn-primary,
.nut-hang > .btn-green { flex-grow: 1.5; }

/* --------------------------------------- 22.3 Chừa mép dưới an toàn ----- */

/*
 | `padding-bottom: 40px` của `.gate` không tính tới vạch điều hướng của điện
 | thoại tai thỏ. Trên iPhone, 40px ấy nằm gọn dưới thanh Home — bất cứ thứ gì
 | rơi vào đó đều bị che, đúng như đã xảy ra với nút «Quay lại».
 |
 | env() trả về 0 ở máy không có vạch, nên dòng này không đổi gì ở máy tính.
 */
.gate {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* ------------------------------------------- 22.4 Con dấu thanh trên ---- */

/*
 | `.brand-seal` vốn là một ô vuông nền vàng chứa chữ «3Q». Nay nó chứa ảnh
 | biểu tượng ứng dụng, nên phải gỡ nền đi.
 |
 | Vì sao bắt buộc: ảnh có bốn góc TRONG SUỐT (nó tự bo góc trong PNG). Giữ
 | nguyên nền vàng thì bốn góc ấy để lộ bốn mảnh tam giác vàng chìa ra khỏi
 | viền ảnh — trông như ảnh dán lệch lên một miếng nhãn.
 |
 | Dùng CLASS `seal-anh` thay vì `:has(img)`, cùng lý do đã nói ở mục 22.1:
 | `:has()` không chạy trên WebView Android cũ và khi không chạy thì hỏng im
 | lặng. Một class thì chạy ở mọi nơi.
 */
.brand-seal.seal-anh {
    padding: 0;
    overflow: hidden;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.brand-seal.seal-anh img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* ------------------------------------------ 22.5 VỀ TỆP app_laucher.png -- */

/*
 | KHÔNG BAO GIỜ trỏ thẳng vào assets/img/app_laucher.png từ trang web.
 |
 | Tệp gốc là 1254×1254 và nặng 3,1 MB — bằng khoảng sáu mươi lần toàn bộ phần
 | còn lại của màn hình đăng nhập cộng lại. Trang này người chơi mở bằng 4G
 | ngay trong game, thường là lúc họ đang sốt ruột vì không đăng nhập được;
 | ba mét-by tải về chỉ để vẽ một ô 132px là thứ họ phải trả tiền và phải chờ.
 |
 | Ba bản đã thu sẵn, dựng từ chính tệp đó, giảm bảng màu như bộ ảnh WID:
 |
 |     logo-app.png      320px    52,5 KB   khối tranh màn đăng nhập
 |     logo-app-96.png    96px     8,8 KB   con dấu thanh trên (mọi trang)
 |     favicon-app.png    64px     5,9 KB   biểu tượng tab trình duyệt
 |
 | Tệp gốc vẫn để nguyên trong thư mục làm bản dựng lại khi cần đổi kích cỡ.
 */

/* ------------------------- 22.6 Khung điện thoại cho màn đăng nhập ------ */

/*
 | `.may-troi` — biến thể của `.may` dùng cho màn hình đăng nhập và quên mật
 | khẩu.
 |
 | VÌ SAO CẦN
 | ----------
 | Mục 20 đã đưa toàn bộ phần SAU đăng nhập vào một cột 430px căn giữa. Màn
 | hình đăng nhập là chỗ duy nhất còn sót lại nở theo bề ngang cửa sổ, nên
 | trên máy tính người dùng thấy bố cục đổi hẳn ngay tại lúc bấm «Đăng nhập»
 | — như thể vừa nhảy sang một trang web khác.
 |
 | Class này kế thừa `.may` (bề ngang, căn giữa, bóng đổ, bo góc trên từ
 | 640px), chỉ đổi đúng một thứ: NỀN.
 */

/*
 | Trong khung là bầu trời khổ điện thoại, không phải nền giấy.
 |
 | Màn đăng nhập vốn dựng trên nền tranh; để nền giấy kem của `.may` thì tấm
 | thẻ trắng nằm trên nền kem gần như cùng màu, và cả màn hình phẳng lì.
 |
 | `cover` chứ không `100% auto` như quy tắc gốc ở mục 18. Trong một khung
 | rộng cố định 430px, `100% auto` vẽ ảnh cao 765px rồi hết — phần còn lại
 | của khung là màu nền phẳng, tức một dải xanh trơn vắt ngang đáy khung,
 | nhìn rõ mồn một trên máy tính vì hai bên đã là cảnh núi non đầy đủ.
 | `cover` cắt bớt chừng 25px mỗi bên và lấp kín khung.
 */
.may-troi {
    /* Màu dự phòng lấy từ dải trên cùng của chính ảnh — lúc ảnh chưa về thì
       khung đã đúng tông chứ không loé lên một mảng sáng. */
    background-color: #28497D;
    background-image: url("../img/bg/bg-sky.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/*
 | Trả `min-height` của `.gate` về 0 — để `.may` quyết định chiều cao.
 |
 | `.gate` khai `min-height: 100dvh`. Từ 640px trở lên `.may` chỉ cao
 | `100vh - 14px` (nó chừa 14px lề trên để lộ nền hai bên). Giữ nguyên
 | 100dvh thì nội dung cao hơn khung đúng 14px và thò qua mép dưới đã bo
 | góc — một vệt thừa mỏng mà phải nhìn kỹ mới thấy.
 */
.may-troi .gate {
    min-height: 0;
}

/*
 | Và `.gate-card` thôi giới hạn 520px.
 |
 | Khung đã hẹp 430px rồi; giữ thêm một mức giới hạn 520px ở bên trong là một
 | con số không bao giờ có tác dụng, nhưng người đọc mã sau này sẽ mất thời
 | gian tự hỏi nó dùng để làm gì.
 */
.may-troi .gate-card {
    max-width: none;
}

/* ----------------------------- 22.7 Nền ngoài khung: dải màu ------------ */

/*
 | Ngoài khung 430px KHÔNG dùng ảnh nữa.
 |
 | Ảnh nền mới (`bg-sky.jpg`, tranh năm tướng) là khổ DỌC 750×1334. Không có
 | bản khổ ngang nào đi kèm, và bg-sky-desktop.jpg cũ là cảnh chùa núi — khác
 | hẳn tranh mới, ghép vào là hai phong cách đánh nhau ngay trên một màn hình.
 |
 | Kéo chính tấm khổ dọc ra 1920px cũng không được: `cover` ở tỉ lệ 1,78 chỉ
 | lấy được đúng dải trên cùng, tức năm khuôn mặt phóng to mờ nhoè choán hết
 | nền, át cả khung ở giữa.
 |
 | Nên ngoài khung là dải chuyển màu dựng từ CHÍNH ảnh đó — năm chặng màu lấy
 | bằng cách đo màu trung bình từng dải ngang của tệp:
 |
 |       0%  #28497D      45%  #B1BBCB
 |      22%  #60819B      70%  #DBE6F6
 |                       100%  #E4EBFB
 |
 | Nhờ vậy mép khung nối vào nền mà không thấy đường gãy, lại không tốn thêm
 | một lượt tải ảnh nào.
 */
body {
    background-color: #28497D;
    background-image: linear-gradient(180deg,
                      #28497D 0%,
                      #60819B 22%,
                      #B1BBCB 45%,
                      #DBE6F6 70%,
                      #E4EBFB 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;

    /* Đứng yên khi cuộn — dải màu không trôi theo nội dung. */
    background-attachment: fixed;
}

/* --------------- 22.8 Đẩy nội dung xuống giữa, chừa chỗ cho tranh ------- */

/*
 | Tranh nền mới đặt NĂM TƯỚNG ở dải trên cùng — đo trên tệp: từ y = 0 tới
 | y ≈ 226/1334, tức 17% chiều cao đầu tiên.
 |
 | Thẻ đăng nhập trước đây bắt đầu ở y = 58px nên nó cắt ngang mặt các nhân
 | vật. Đẩy toàn bộ thẻ xuống giữa khung thì dải tranh ấy lộ ra trọn vẹn.
 |
 | DÙNG `margin: auto` CHỨ KHÔNG `justify-content: center`.
 |
 | Hai cách cho ra cùng một kết quả khi còn chỗ trống, nhưng khác hẳn nhau khi
 | HẾT chỗ: `justify-content: center` đẩy phần thừa ra cả hai đầu, kể cả đầu
 | trên — nội dung tràn lên phía trên vùng cuộn và KHÔNG cuộn tới được. Trang
 | «Quên mật khẩu» ở màn hình thấp (320×568 chẳng hạn) sẽ mất luôn dòng tiêu
 | đề và bước 1, không cách nào kéo lên xem. Với `margin: auto`, khi hết chỗ
 | trống cả hai lề tự về 0 và trang cuộn bình thường.
 */
.may-troi {
    position: relative;
    display: flex;
    flex-direction: column;
}

.may-troi .gate {
    flex: 1;
    padding-top: 58px;
}

.may-troi .gate-card {
    margin-top: auto;
    margin-bottom: auto;
}

/*
 | Nút ngôn ngữ neo theo KHUNG, không theo thẻ đăng nhập.
 |
 | Nó vốn là con của `.gate-card`; đẩy thẻ xuống giữa thì nó trôi theo xuống
 | giữa luôn. Trong Blade nó đã được chuyển ra làm con trực tiếp của
 | `.may-troi`, và `position: relative` ở trên là mốc neo cho nó.
 */
.may-troi > .gate-lang {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
}

/* ============================================================================
   23. BỘ BIỂU TƯỢNG FONT AWESOME 6 FREE — TỰ HOST, ĐÃ CẮT GỌN
   ============================================================================

   Thay toàn bộ biểu tượng cũ (ảnh PNG tô màu cam và SVG vẽ tay nội tuyến)
   bằng một bộ duy nhất.

   TỰ HOST, KHÔNG DÙNG CDN
   -----------------------
   Trang này người chơi mở TRONG GAME bằng WebView, thường qua 4G. CDN hỏng,
   bị chặn, hay DNS chậm là toàn bộ biểu tượng biến mất mà không có gì thay
   thế — mà đây là những biểu tượng nằm ngay trong ô nhập mật khẩu và trên
   thanh điều hướng. Tự host thì nó sống chết cùng chính trang web.

   ĐÃ CẮT GỌN THEO ĐÚNG SỐ BIỂU TƯỢNG DÙNG
   ---------------------------------------
   Bản đầy đủ: fa-solid-900.woff2 154,5 KB + fa-brands-400.woff2 115,9 KB,
   kèm all.min.css 74 KB — tức khoảng 345 KB cho chừng hai chục cái hình.

   Hai tệp trong thư mục assets/fonts đã được cắt bằng `pyftsubset` xuống
   ĐÚNG những mã ký tự dùng trong dự án:

       fa-solid-subset.woff2     44 glyph    154,5 KB  ->  4,9 KB

   Cộng cả phần CSS dưới đây thì tổng chưa tới 9 KB. Phông `fa-brands` không
   nạp: ba biểu tượng thương hiệu (Facebook, Google, Fanpage) vẫn là ảnh PNG.

   ⚠️ THÊM BIỂU TƯỢNG MỚI THÌ PHẢI CẮT LẠI FONT.
   Viết thêm một class `.fa-xxx` vào đây mà không cắt lại tệp .woff2 thì chỗ
   đó hiện ra một ô vuông rỗng — và nó hỏng im lặng, không lỗi nào trong bảng
   điều khiển. Danh sách mã ký tự nằm ngay dưới, cắt lại bằng:

       pyftsubset fa-solid-900.woff2 --unicodes=U+F007,U+F023,... \
                  --flavor=woff2 --layout-features= --no-hinting \
                  --output-file=fa-solid-subset.woff2

   Giấy phép: Font Awesome Free 6.7.2, font theo SIL OFL 1.1, CSS theo MIT.
   ========================================================================= */

@font-face {
    font-family: "FA6 Solid";
    font-style: normal;
    font-weight: 900;
    font-display: block;   /* chờ font rồi mới vẽ — tránh nháy một ô trống */
    src: url("../fonts/fa-solid-subset.woff2") format("woff2");
}

/*
 | KHÔNG nạp phông `fa-brands`.
 |
 | Ba biểu tượng thương hiệu duy nhất của dự án (Facebook, Google, Fanpage)
 | vẫn dùng ảnh PNG, nên cả tệp phông ấy không còn ai cần. Bỏ đi là bớt một
 | lượt tải và bớt một thứ phải nhớ cắt lại khi thêm biểu tượng.
 */

/*
 | Thân chung của mọi biểu tượng.
 |
 | Dùng thẻ <span>, KHÔNG dùng <i> như tài liệu Font Awesome gợi ý: thanh
 | tiến trình ba bước (`.steps .st i`) đã dùng thẻ <i> để vẽ vòng tròn số
 | thứ tự. Lồng biểu tượng dạng <i> vào trong đó là hai quy tắc đánh nhau ở
 | cùng một bộ chọn, và cái hỏng nằm đúng luồng quên mật khẩu.
 */
.fa-solid {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.fa-solid { font-family: "FA6 Solid"; }

.fa-solid::before { content: var(--fa); }

/* ---- Mã ký tự của từng biểu tượng ---- */
.fa-user{--fa:"\f007"}
.fa-lock{--fa:"\f023"}
.fa-eye{--fa:"\f06e"}
.fa-eye-slash{--fa:"\f070"}
.fa-circle-info{--fa:"\f05a"}
.fa-triangle-exclamation{--fa:"\f071"}
.fa-circle-check{--fa:"\f058"}
.fa-circle-exclamation{--fa:"\f06a"}
.fa-shield-halved{--fa:"\f3ed"}
.fa-paper-plane{--fa:"\f1d8"}
.fa-star{--fa:"\f005"}
.fa-comments{--fa:"\f086"}
.fa-coins{--fa:"\f51e"}
.fa-clock-rotate-left{--fa:"\f1da"}
.fa-headset{--fa:"\f590"}
.fa-credit-card{--fa:"\f09d"}
.fa-language{--fa:"\f1ab"}
.fa-envelope{--fa:"\f0e0"}
.fa-phone{--fa:"\f095"}
.fa-check{--fa:"\f00c"}
.fa-chevron-down{--fa:"\f078"}
.fa-chevron-right{--fa:"\f054"}
.fa-chevron-left{--fa:"\f053"}
.fa-pen{--fa:"\f304"}
.fa-clock{--fa:"\f017"}
.fa-wallet{--fa:"\f555"}
.fa-qrcode{--fa:"\f029"}
.fa-right-from-bracket{--fa:"\f2f5"}
.fa-thumbs-up{--fa:"\f164"}
.fa-gift{--fa:"\f06b"}
.fa-xmark{--fa:"\f00d"}
.fa-copy{--fa:"\f0c5"}
.fa-rotate{--fa:"\f2f1"}
.fa-arrow-left{--fa:"\f060"}
.fa-arrow-right{--fa:"\f061"}
.fa-circle-question{--fa:"\f059"}
.fa-ticket{--fa:"\f145"}
.fa-money-bill-wave{--fa:"\f53a"}
.fa-building-columns{--fa:"\f19c"}
.fa-sack-dollar{--fa:"\f81d"}
.fa-bolt{--fa:"\f0e7"}
.fa-key{--fa:"\f084"}
.fa-mobile-screen-button{--fa:"\f3cd"}
.fa-spinner{--fa:"\f110"}

/* -------------------------- 23.1 Kích thước theo từng vùng -------------- */

/*
 | `partials/icon.blade.php` truyền cỡ qua BIẾN `--co` chứ không qua thuộc
 | tính `style="font-size:…"`.
 |
 | Khác biệt quan trọng: style nội tuyến thắng mọi bộ chọn, nên nếu ghi thẳng
 | font-size vào thẻ thì các quy tắc theo vùng bên dưới vô hiệu — và trước đây
 | chính CSS mới là chỗ quyết định cỡ biểu tượng ở thanh tab, ô nhập, hàng
 | phím tắt. Truyền qua biến thì lời gọi Blade chỉ nêu cỡ MẶC ĐỊNH, còn vùng
 | nào cần khác vẫn đè lên được.
 */
.ico {
    font-size: var(--co, 22px);
    flex: 0 0 auto;
    vertical-align: middle;
    user-select: none;
}

/*
 | Các vùng có cỡ riêng — chép đúng con số của bộ biểu tượng cũ để bố cục
 | không xê dịch một điểm ảnh nào so với trước khi đổi.
 */
.alert .ico          { font-size: 19px; margin-top: 1px; }
/*
 | Biểu tượng trong ô nhập phải ĐỊNH VỊ TUYỆT ĐỐI, không chỉ đặt cỡ.
 |
 | Hai quy tắc cũ (`.field-icon > svg` ở mục 6 và `.field-icon img.ico` ở mục
 | 18) mang theo cả `position: absolute` và toạ độ. Biểu tượng mới là thẻ
 | <span> nên không khớp bộ chọn nào trong hai cái đó, và nếu chỉ đặt font-size
 | ở đây thì nó rơi xuống dòng riêng NGAY TRÊN ô nhập — trang vẫn chạy, chỉ là
 | bố cục vỡ. Chép đúng toạ độ của mục 18 để không xê dịch.
 */
.field-icon > .ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--chu-nhat);
    opacity: .85;
    pointer-events: none;
    z-index: 1;
}
.eye .ico            { font-size: 18px; }
.tabbar a .ico       { font-size: 24px; }
.tabbar a.on .ico    { font-size: 26px; }
.tat .ico            { font-size: 30px; }
/*
 | Nút mạng xã hội KHÔNG cần quy tắc mới: `social/facebook` và `social/google`
 | vẫn là ảnh PNG như cũ, nên `.mxh img.ico` ở mục 18 vẫn đúng việc của nó.
 |
 | Giữ nguyên ảnh là cố ý — xem chú thích đầu partials/icon.blade.php: nhãn
 | thương hiệu sống bằng khối màu và hình dạng quen thuộc, vẽ lại bằng phông
 | một màu là bỏ đi chính thứ làm chúng có ích.
 */
.way-icon .ico,
.pay .ico            { font-size: 30px; }
.denom .ico,
.pick .ico           { font-size: 30px; }
.empty .ico          { font-size: 34px; opacity: .35; }
.contact-item .ico   { font-size: 20px; }
.sua .ico            { font-size: 14px; }
.steps .st i .ico    { font-size: 13px; }
.lang-btn .ico       { font-size: 11px; }


/* ------------- 23.2 Trả ô đánh dấu và vòng tròn bước về vẽ bằng CSS ----- */

/*
 | Hai thứ này KHÔNG đi qua `partials/icon.blade.php` — chúng là ảnh nền trong
 | CSS, nên phép đổi sang Font Awesome không chạm tới:
 |
 |     ui/checkbox-off.png, ui/checkbox-on.png      ô «Ghi nhớ đăng nhập»
 |     badges/step-circle{,-idle,-done}.png         vòng tròn 1-2-3
 |
 | Cả năm tấm đều là ảnh tô sẵn màu CAM, nên sau khi đổi tông sang xanh đen
 | chúng trở thành năm đốm cam duy nhất còn sót lại trên trang.
 |
 | May là bản CSS vẽ tay của chúng vẫn còn nguyên ở mục 6 và mục 15 — mục 18
 | chỉ ghi đè lên chứ không xoá. Nên ở đây chỉ cần HOÀN TÁC phần ghi đè ấy là
 | hình vẽ bằng gradient trở lại, và vì nó ăn theo biến `--cam-*`, `--vien-dam`,
 | `--ok` nên tự động đúng tông xanh đen.
 |
 | Năm tệp PNG nói trên nay không còn chỗ nào trỏ tới. Xoá được.
 */

/* ---- Ô đánh dấu: về ô vuông viền + dấu tích vẽ bằng hai cạnh viền ---- */
.check .box {
    background: #fff;
    border: 1.5px solid var(--vien-dam);
    box-shadow: none;
}

.check input:checked + .box {
    background: linear-gradient(180deg, var(--cam-sang), var(--cam));
    border-color: var(--cam-tham);
}

/* Bật lại dấu tích của mục 6 — mục 18 đã tắt nó vì ảnh có sẵn tích. */
.check input:checked + .box::after { display: block; }

/* ---- Vòng tròn ba bước: về hình tròn gradient ---- */
.steps .st i {
    background: #fff;
    background-size: auto;
    border: 2px solid var(--vien-dam);
    color: var(--chu-nhat);
    font-size: 12.5px;
}

.steps .st.on i {
    background: linear-gradient(180deg, var(--cam-sang), var(--cam));
    border-color: var(--cam-tham);
    color: #fff;
}

/*
 | Bước ĐÃ XONG: nền lục, dấu tích là biểu tượng Font Awesome bên trong.
 |
 | Mục 18 đặt `font-size: 0` để giấu con số vì ảnh đã vẽ sẵn dấu tích. Nay
 | không còn ảnh, và thứ nằm trong `<i>` chính là dấu tích — nên phải trả
 | font-size về, nếu không dấu tích co lại bằng không và ô tròn rỗng trơn.
 */
.steps .st.xong i {
    background: var(--ok);
    background-size: auto;
    border-color: var(--ok);
    color: #fff;
    font-size: 12.5px;
}

.steps .st.xong i .ico { display: inline-block; font-size: 13px; }

/* ------------------------------- 23.3 Ví Coin (.purse) ------------------ */

/*
 | Khối ví là mảng màu LỚN NHẤT trên trang tài khoản, và nó vẫn còn nguyên
 | tông cũ: một dải ĐỎ GẠCH `#C2532E → #A63C1E → #86290F`.
 |
 | Vì sao phép đổi tông ở mục 22 không chạm tới nó: luật đổi chỉ nhắm sắc độ
 | 20–70 (vàng, cam, kem). Ba mã trên nằm ở sắc độ 13–15, tức là ĐỎ — cùng
 | họ với `--do` (màu tiêu đề) và với `--loi` (màu báo lỗi), nên chúng được
 | cố ý giữ lại. Đúng cho tiêu đề và báo lỗi, nhưng khối ví thì không phải
 | báo lỗi gì cả: nó thành mảng đỏ duy nhất giữa một trang xanh đen.
 |
 | Nay dựng lại bằng chính thang màu đo từ ảnh nền, đậm hơn nền trang một bậc
 | để cái ví vẫn là thứ bắt mắt đầu tiên.
 */
.purse {
    background: linear-gradient(135deg, #2F5789 0%, #1D3760 55%, #122544 100%);

    /*
     | Viền SÁNG hơn nền, không phải đậm hơn.
     |
     | Viền cũ dùng `--kim-tham`, vốn là vàng đậm nên nổi trên nền đỏ. Sau khi
     | đổi tông, `--kim-tham` thành #1D3760 — đúng bằng màu giữa của chính dải
     | nền này, nên viền biến mất và khối ví trôi vào nền trang.
     */
    border-color: var(--kim);
}

/*
 | Vầng sáng tròn ở góc đổi thành BIỂU TƯỢNG TÚI TIỀN mờ.
 |
 | Vầng sáng suông trên nền đỏ thì ra vẻ ánh kim; trên nền xanh đen nó chỉ
 | còn là một vệt xám nhạt không nói lên điều gì. Túi tiền thì nói ngay khối
 | này là cái ví, kể cả khi người dùng chưa đọc chữ.
 |
 | Dùng `::after` nên KHÔNG phải sửa ba tệp Blade đang gọi `.purse`.
 |
 | Mã `\f81d` là fa-sack-dollar, đã nằm sẵn trong bộ phông đã cắt ở mục 23 —
 | thêm một biểu tượng khác vào đây mà quên cắt lại phông thì góc này trống
 | trơn, xem cảnh báo ở đầu mục 23.
 */
.purse::after {
    content: "\f81d";
    font-family: "FA6 Solid";
    font-weight: 900;
    line-height: 1;

    right: -14px;
    top: -10px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;

    font-size: 104px;
    color: #FFFFFF;
    opacity: .10;
    transform: rotate(-12deg);
    pointer-events: none;
}

/*
 | Nút «Nạp Coin» BÊN TRONG ví phải đảo màu.
 |
 | Nút chính vốn là xanh đen (#2B5B95) — đúng trên thẻ trắng, nhưng đặt lên
 | nền ví (#1D3760) thì tỉ lệ tương phản chỉ còn 1,7 : 1. Nút vẫn bấm được và
 | chữ trắng vẫn đọc được, nhưng HÌNH DÁNG cái nút gần như tan vào nền — người
 | dùng không thấy ở đó có nút, và đây lại đúng là nút dẫn tới trang nạp tiền.
 |
 | Đảo thành nền trắng chữ xanh đậm: 12,7 : 1 với nền ví, và 11,9 : 1 giữa chữ
 | với nút. Đây là quy ước chung — nút nằm trên mảng màu đậm thì đổi chiều
 | sáng-tối, chứ không đổi sắc độ.
 */
.purse .btn-primary {
    background: #fff;
    color: var(--do);
    text-shadow: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .22);
}

.purse .btn-primary:hover:not(:disabled) { filter: brightness(.96); }


/* =============================================================================
   LỊCH SỬ NHẬP CODE — thẻ có nhãn cho từng giá trị
   -----------------------------------------------------------------------------
   Không dùng table.data: bảng ở đây luôn gập thành thẻ và ẩn tiêu đề cột, nên
   "123 / 1231 / 803" đứng trơ không nhãn. Mỗi giá trị ở đây đi kèm nhãn của nó.
   ========================================================================== */

.gc-ds { display: grid; gap: 10px; padding: 12px; }

.gc-the {
    background: var(--giay);
    border: 1px solid var(--vien-dam);
    border-radius: var(--bo-goc-nho);
    box-shadow: var(--bong-nho);
    overflow: hidden;
}

.gc-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--giay-dam);
    border-bottom: 1px solid var(--vien);
}

.gc-ma-khoi { display: flex; flex-direction: column; min-width: 0; }

.gc-nhan-nho {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--chu-nhat);
}

.gc-ma {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--kim-tham);
    letter-spacing: .06em;
    word-break: break-all;
}

.gc-dau .pill { flex: 0 0 auto; }

/* Nhãn bên trái, giá trị bên phải — đọc như một phiếu. */
.gc-bang {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;   /* nhãn thẳng cột giữa các thẻ */
    gap: 7px 14px;
    margin: 0;
    padding: 12px 14px;
    font-size: 13.5px;
}
.gc-bang dt { color: var(--chu-mo); }
.gc-bang dd { margin: 0; color: var(--chu); font-weight: 600; min-width: 0; word-break: break-word; }
.gc-bang dd.muted { font-weight: 400; color: var(--chu-mo); }

.gc-qua-ds { display: flex; flex-wrap: wrap; gap: 6px; }

/* Món quà: chữ ĐẬM trên nền sáng — .pill-grey cũ chữ nhạt màu, đọc như nút bị vô hiệu. */
.gc-qua {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--kim-sang);
    background: var(--lam-nhat);
    color: var(--kim-tham);
    font-size: 12.5px;
    font-weight: 600;
}
.gc-qua b { color: var(--cam); }


/* =============================================================================
   ĐƠN NẠP THẺ — dùng chung khung phiếu .gc-* của lịch sử nhập code, thêm vài chi tiết
   ========================================================================== */
.don-menh-gia { font-size: 18px; font-weight: 800; color: var(--kim-tham); }
.don-menh-gia small { font-size: 13px; font-weight: 700; margin-left: 2px; color: var(--chu-mo); }
.don-coin { color: var(--luc-tham); font-weight: 800; }
.don-so { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.don-ghi-chu {
    margin: 0 14px 12px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.don-ghi-chu.loi { background: var(--loi-nhat); color: #9A2A20; border: 1px solid #F0B4AE; }
.don-ghi-chu.cho { background: var(--lam-nhat); color: var(--kim-tham); border: 1px solid var(--kim-sang); }

/* =============================================================================
   SỰ KIỆN TÍCH NẠP — thanh tiến độ tổng + hộp quà từng mốc
   ========================================================================== */
.tn-tong { margin-top: 12px; }
.tn-thanh {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
    margin-bottom: 6px;
}
.tn-thanh > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--luc-sang), var(--luc));
    transition: width .4s ease;
}

.tn-qua {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    margin: 10px 0 4px;
}
.tn-mon { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.tn-anh {
    position: relative;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 2px solid var(--vien-dam);
    background: var(--giay-dam);
    overflow: hidden;
}
.tn-anh img { max-width: 88%; max-height: 88%; display: block; }
.tn-so {
    position: absolute; right: 2px; bottom: 1px;
    font-size: 11px; font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.8);
}
.tn-ten {
    font-size: 11px; line-height: 1.25; text-align: center;
    color: var(--chu-mo);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Viền theo phẩm chất — cùng bảng màu GameItem::qualityColor() ở trang quản trị. */
.tn-anh.pham-2 { border-color: #3E9B4F; }
.tn-anh.pham-3 { border-color: #3B7DD8; }
.tn-anh.pham-4 { border-color: #9B51E0; }
.tn-anh.pham-5 { border-color: #E08B1F; }
.tn-anh.pham-6 { border-color: #D6373A; }

/* ------------------------------------------- Logo game trang đăng nhập --- */

.gate-logo {
    text-align: center;
    margin: 0 0 10px;
}

.gate-logo img {
    display: inline-block;
    width: 78%;
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(60, 0, 0, .35));
}

/* ----------------------------------- Logo kênh trong hộp khuyến mãi ------ */

.alert .km-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    align-self: center;
}

/* ------------------- Màu nút theo nhiệm vụ: xanh lá / xanh dương / đỏ ---- */

/*
 | Cùng một kiểu phẳng (chữ trắng, không đổ bóng), chỉ khác màu:
 |   xanh lá    .btn-green   — xác nhận, gửi, đăng nhập, nạp, nhận
 |   xanh dương .btn-primary — điều hướng: quay lại, đổi mật khẩu, đổi email
 |   đỏ         .btn-red     — hủy, để sau, đăng xuất
 | Có `.purse` để thắng quy tắc nút-trắng-trên-nền-ví ở mục trên.
 */
.btn,
.btn.btn-primary, .btn.btn-green, .btn.btn-ok, .btn.btn-red, .btn.btn-ghost,
.purse .btn, .purse .btn-primary {
    color: #fff;
    border: 0;
    box-shadow: none;
    text-shadow: none;
}

.btn.btn-green, .btn.btn-ok, .purse .btn-green { background: #3F9B4B; }
.btn.btn-primary, .purse .btn-primary          { background: #2F6FB5; }
.btn.btn-red                                   { background: #C0574D; }

.btn.btn-green:hover:not(:disabled), .btn.btn-ok:hover:not(:disabled) { background: #34853F; filter: none; }
.btn.btn-primary:hover:not(:disabled), .purse .btn-primary:hover:not(:disabled) { background: #255C99; filter: none; }
.btn.btn-red:hover:not(:disabled)   { background: #AD4A41; filter: none; }

.btn:active:not(:disabled) { filter: brightness(.92); }

/* ------------------------------- Nút: góc bo nhẹ, có biểu tượng đứng trước --- */

.btn,
.btn-sm {
    border-radius: 8px;
}

.btn .ico {
    font-size: 1.1em;
    margin: 0;
    color: inherit;
}

/* ------------- Thanh trên: nút ngôn ngữ ít bo, nút đăng xuất không tràn --- */

/* Tên game dài ("SAMKOK: Immortal Path") phải là bên NHƯỜNG chỗ: cho nó co
   và xuống dòng, còn nút ngôn ngữ / đăng xuất luôn giữ nguyên kích thước. */
.topbar-inner .brand      { flex: 0 1 auto; min-width: 0; }
.topbar-inner .brand-text { min-width: 0; }
.topbar-inner .brand-text b {
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.topbar-inner .lang,
.topbar-inner form,
.topbar-inner > .btn { flex: 0 0 auto; }
.topbar-inner .btn-sm { padding: 7px 11px; font-size: 12.5px; }

.lang-btn { border-radius: 8px; }
.lang-menu { border-radius: 8px; }

/* =========================================================================
   TRANG TÀI KHOẢN — bố cục mới (biển quảng bá, thẻ người chơi, lối tắt, chi tiết)
   ========================================================================= */


.ac-user, .ac-tiles, .ac-details { margin-bottom: 14px; }
.ac-user { padding: 16px; }

.ac-who { display: flex; align-items: center; gap: 12px; }
.ac-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
    color: var(--cam); background: var(--giay-tham);
}
.ac-name  { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--chu); overflow-wrap: anywhere; }
.ac-sub   { font-size: 12.5px; color: var(--chu-mo); }

.ac-strip {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 9px 12px;
    font-size: 13.5px; color: var(--chu-mo);
    background: var(--lam-nhat); border: 1px dashed #A9CDE9; border-radius: 8px;
}
.ac-strip b { margin-left: auto; font-size: 16px; color: var(--chu); }

.ac-balance {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vien);
}
.ac-balance > div { flex: 1 1 auto; min-width: 0; }
.ac-balance .btn { flex: 0 0 auto; }
.ac-money { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--do); }

.ac-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.ac-tile {
    position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 10px; color: #fff; text-decoration: none;
    background: var(--giay-tham); box-shadow: var(--bong-nho);
}
.ac-tile:hover { text-decoration: none; filter: brightness(1.06); }
.ac-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-tile span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 5px 2px; text-align: center;
    font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));
}

.ac-details .card-body { padding-top: 4px; }
.ac-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--vien);
}
.ac-row:last-of-type { border-bottom: 0; }
.ac-ico {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
    color: var(--cam); background: var(--giay-tham);
}
.ac-txt { flex: 1 1 auto; min-width: 0; }
.ac-k { font-size: 12.5px; color: var(--chu-mo); }
.ac-v { font-size: 16px; font-weight: 700; color: var(--chu); overflow-wrap: anywhere; }
.ac-row .btn { flex: 0 0 auto; }

/* ---------------- Thanh trên và thanh dưới: xanh đậm, không còn trắng ---------------- */

.topbar {
    background: linear-gradient(180deg, #2B5B95, #1D3760);
    border-bottom: 0;
    box-shadow: 0 2px 10px rgba(17, 39, 66, .35);
    backdrop-filter: none;
}
.topbar .brand-text b    { color: #fff; }
.topbar .brand-text span { color: #A9C6E4; }

.tabbar {
    background: linear-gradient(180deg, #2B5B95, #1D3760);
    border-top: 0;
    box-shadow: 0 -4px 18px rgba(17, 39, 66, .35);
}
.tabbar a      { color: #A9C6E4; }
.tabbar a.on   { color: #fff; background: rgba(255, 255, 255, .16); }
.tabbar a.on svg, .tabbar a.on .ico { filter: none; }

/* ------------------------------ Banner thông báo luân phiên ------------------------------ */

.ac-banner { position: relative; margin: 0 0 14px; border-radius: 10px; overflow: hidden; box-shadow: var(--bong-nho); touch-action: pan-y; }
.ac-track  { display: flex; transition: transform .5s ease; will-change: transform; }
.ac-slide  { flex: 0 0 100%; min-width: 0; }
.ac-slide a, .ac-slide img { display: block; width: 100%; height: auto; }

.ac-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    color: #fff; background: rgba(17, 39, 66, .45); cursor: pointer;
}
.ac-nav:hover { background: rgba(17, 39, 66, .7); }
.ac-nav.prev { left: 8px; }
.ac-nav.next { right: 8px; }

.ac-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 6px; }
.ac-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px;
    background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .2s ease, background .2s ease;
}
.ac-dots button.on { width: 20px; background: #fff; }

@media (prefers-reduced-motion: reduce) { .ac-track { transition: none; } }

/* Dải "Limited" chéo ở góc trái trên của ô Sự kiện. */
.ac-ribbon {
    position: absolute; top: 9px; left: -24px; width: 86px;
    padding: 2px 0; transform: rotate(-45deg);
    font-size: 9px; font-style: normal; font-weight: 800; line-height: 1.3;
    text-align: center; text-transform: uppercase; letter-spacing: .3px;
    color: #fff; background: #C0574D;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    pointer-events: none;
}

/* =========================================================================
   TRANG NẠP — khung gộp: tiêu đề, thanh kênh, lưới gói, thanh nhắc + bảng hướng dẫn
   ========================================================================= */

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

.tp .card-body { padding: 16px 14px; }

.tp-top { display: flex; align-items: center; gap: 10px; }
.tp-back {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
    color: var(--cam); background: var(--giay-tham); border: 1px solid var(--vien-dam);
}
.tp-back:hover { text-decoration: none; filter: brightness(.96); }
.tp-title {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1 1 auto; margin: 0; font-size: 24px; font-weight: 800; color: var(--do);
}
.tp-top-end { flex: 0 0 38px; }
.tp-sub { margin: 4px 0 14px; text-align: center; font-size: 13.5px; font-style: italic; color: var(--chu-mo); }

.tp-tabs {
    display: flex; gap: 8px; margin-bottom: 14px; padding: 8px;
    overflow-x: auto; background: var(--giay-dam); border: 1px solid var(--vien-dam); border-radius: 12px;
}
.tp-tab {
    flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border: 2px solid transparent; border-radius: 10px;
    font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--chu-mo);
}
.tp-tab:hover { text-decoration: none; background: rgba(255, 255, 255, .6); }
.tp-tab img { width: 52px; height: 40px; object-fit: contain; }
.tp-tab.on { color: var(--do); background: #fff; border-color: var(--cam); box-shadow: var(--bong-nho); }

/* ---- Lưới gói ---- */

.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pkg {
    position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    background: #fff; border: 2px solid var(--vien); border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.pkg input { position: absolute; opacity: 0; pointer-events: none; }
.pkg:active { transform: scale(.98); }
.pkg:has(input:checked) { border-color: var(--cam); box-shadow: 0 0 0 2px rgba(43, 91, 149, .25), var(--bong-nho); }
.pkg:has(input:focus-visible) { outline: 2px solid var(--cam); outline-offset: 2px; }

.pkg-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #4a3a96; }
.pkg-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pkg-badge {
    position: absolute; top: 6px; right: 6px; z-index: 1;
    padding: 2px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 800; color: #fff; background: rgba(40, 30, 20, .78);
}

.pkg-coin, .pkg-price { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.pkg-coin  { font-size: 14px; color: var(--chu); border-bottom: 1px solid var(--vien); }
.pkg-coin img { flex: 0 0 auto; }
.pkg-coin b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.pkg-coin { gap: 5px; padding-inline: 6px; }
.pkg-price { font-size: 13px; font-weight: 700; color: var(--chu-mo); }
.pkg-price .ico { color: var(--chu-nhat); }

/* ---- Thanh nhắc cố định phía trên thanh tab ---- */

.tp-bar {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 34; display: flex; align-items: center; gap: 8px;
    width: 100%; max-width: var(--may); padding: 8px 12px;
    font-size: 12px; font-weight: 700; color: #7A4B00;
    background: #FBE8B8; border-top: 2px solid #E0B24C;
}
.tp-bar > span { flex: 1 1 auto; min-width: 0; }
.tp-bar .btn { flex: 0 0 auto; }
.tp-bar .ico { color: #C0574D; }
body:has(.tp-bar) .foot { padding-bottom: 150px; }

/* ---- Bảng hướng dẫn trượt từ dưới lên ---- */

.sheet-bg { align-items: flex-end; padding: 0; }
.sheet {
    max-width: var(--may); max-height: 78vh; border-bottom: 0;
    border-radius: 18px 18px 0 0; animation: sheetUp .28s ease-out;
}
.sheet-grip { width: 44px; height: 5px; margin: 8px auto 0; border-radius: 99px; background: var(--vien-dam); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

.tp-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--chu); }
.tp-steps li { margin-bottom: 8px; }

.copy-btn { white-space: nowrap; flex: 0 0 auto; }

/* ---- Bảng thông tin nạp (mở sau khi chọn gói) ---- */

.sheet { max-height: 88vh; }
.sheet-head { justify-content: center; text-align: center; }
.sheet-head h2 { flex: 1 1 auto; text-align: center; font-size: 20px; color: var(--do); }
.sheet-head .topbar-spacer { display: none; }
.sheet-head .copy-btn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.sheet-pick { display: flex; justify-content: center; padding: 0 14px 12px; border-bottom: 1px solid var(--vien); }
.pkg-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 14px; border-radius: 99px;
    font-size: 16px; font-weight: 800; color: var(--do);
    background: var(--lam-nhat); border: 1px solid #A9CDE9;
}
.sheet .card-body { padding: 14px; }
.tp-pay { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--chu-mo); }
.tp-pay b { font-size: 24px; font-weight: 800; color: var(--do); }

/* ---- Nội dung bảng nạp kiểu nộp bill: QR, địa chỉ ví, tài khoản nhận ---- */

.sheet .buoc-nhan { margin-top: 0; }
.sheet .buoc-nhan.mt-24 { margin-top: 22px; }

.tp-qr {
    display: flex; justify-content: center; margin: 4px 0 12px; padding: 12px;
    background: #fff; border: 1px solid var(--vien-dam); border-radius: 12px;
}
.tp-qr img { display: block; width: 100%; max-width: 220px; height: auto; }

.tp-chip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
    margin-bottom: 12px; padding: 9px 12px; font-size: 13px;
    color: var(--chu-mo); background: var(--lam-nhat); border: 1px solid #A9CDE9; border-radius: 8px;
}
.tp-chip b { color: var(--do); font-size: 13.5px; }

.tp-addr { padding: 10px 12px; background: var(--giay-dam); border: 1px dashed var(--vien-dam); border-radius: 8px; }
.tp-addr-k { margin-bottom: 6px; font-size: 12.5px; color: var(--chu-mo); }
.tp-addr-v { display: flex; align-items: center; gap: 10px; }
.tp-addr-v code {
    flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 13px; font-weight: 700;
    line-height: 1.4; color: var(--chu); word-break: break-all;
}

.tp-rows { border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; }
.tp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--vien); }
.tp-row:last-child { border-bottom: 0; }
.tp-row .k { flex: 0 0 38%; font-size: 12.5px; color: var(--chu-mo); }
.tp-row .v { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--chu); word-break: break-word; }
.tp-row .copy-btn { flex: 0 0 auto; }

/* Số xu dài ("20.000 + 8.000"): phần thưởng tự xuống dòng thay vì bị cắt. */
.pkg-coin { flex-wrap: wrap; row-gap: 0; }
.pkg-bonus { font-style: normal; font-size: 12.5px; font-weight: 800; color: #2E9E5B; white-space: nowrap; }
.pkg-price { margin-top: auto; }

/* Câu thanh toán kiểu «Nạp Viettel 50.000đ và nhận 50 [xu]». */
.tp-pay-line { flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; line-height: 1.5; }
.tp-pay-line b { font-size: 20px; }
.tp-coin-ico { display: inline-block; width: 24px; height: 24px; margin-left: 2px; vertical-align: middle; }

/* Khối «Mua thẻ» trong popup nạp thẻ cào. */
.tp-buy { margin-bottom: 16px; padding: 12px; background: var(--lam-nhat); border: 1px solid #A9CDE9; border-radius: 10px; }
.tp-buy p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--chu-mo); }
.tp-buy[hidden] { display: none; }

/* Ngân hàng nhận tiền: logo + tên. */
.tp-bank {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px;
    background: var(--giay-dam); border: 1px solid var(--vien-dam); border-radius: 12px;
}
.tp-bank img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.tp-bank b { display: block; font-size: 15px; color: var(--do); }
.tp-bank span { display: block; font-size: 12.5px; color: var(--chu-mo); }

/* Giá dài (26.000.000 đ) không xuống dòng. */
.pkg-price { white-space: nowrap; font-size: 12.5px; gap: 4px; padding-inline: 7px; }

/* ---- Khối hỗ trợ cuối popup nạp ---- */
.tp-support {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    margin-top: 16px; padding: 12px;
    background: var(--lam-nhat); border: 1px solid #A9CDE9; border-radius: 10px;
}
.tp-support > .ico { flex: 0 0 auto; color: var(--cam); }
.tp-support p { flex: 1 1 160px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--chu-mo); }
.tp-fb {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto;
    padding: 10px 16px; border-radius: 8px;
    font-size: 13.5px; font-weight: 800; color: #fff; background: #1877F2; text-decoration: none;
}
.tp-fb:hover { text-decoration: none; background: #1468D8; }
@media (max-width: 400px) { .tp-fb { flex: 1 1 100%; } }

/* Thanh chọn quốc gia IP giả lập — chỉ render trên máy local. */
.tp-dev {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px;
    padding: 6px 8px; font-size: 11.5px; color: #7A4B00;
    background: #FFF4D6; border: 1px dashed #E0B24C; border-radius: 8px;
}
.tp-dev a { padding: 2px 8px; border-radius: 99px; color: #7A4B00; background: #fff; border: 1px solid #E0B24C; text-decoration: none; }
.tp-dev a.on { color: #fff; background: #C0574D; border-color: #C0574D; }