/* Màn hình phát livestream.
 *
 * Là LỚP PHỦ toàn màn hình chứ không phải một "view" của bộ định tuyến trong index.html.
 * Lý do: nó chiếm trọn màn hình, giữ camera đang bật, và luôn đóng về đúng chỗ vừa mở ra —
 * đưa vào router thì phải thêm id vào FULL_PAGE_VIEWS, thêm nhánh popstate, thêm đường
 * dẫn riêng, mà chẳng được gì vì đây không phải trang để chia sẻ link hay bấm nút lùi.
 */

.gl {
    position: fixed;
    inset: 0;
    /* Phải cao hơn MỌI thứ đang có, nếu không màn hình phát nằm dưới trang livestream và
       coi như không mở ra gì. Các mốc hiện có: thanh livestream 10060 (goldenLivestream.css),
       nút gọi Zalo/điện thoại và #spinner 99999 (style.css). Đây là màn hình chiếm trọn
       máy nên đứng trên tất cả là đúng — kể cả nút gọi, vì đang phát sóng mà có cái nút
       điện thoại nổi giữa khung hình thì vừa vướng vừa dễ bấm nhầm. */
    z-index: 100000;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gl[hidden] { display: none; }

/* Camera nằm trọn trong màn hình, các lớp điều khiển nổi lên trên.
 *
 * 'contain' chứ không phải 'cover', và đây là đánh đổi cố ý — đừng đổi lại mà không đọc hết:
 *
 * Cảm biến camera trước cho khung 4:3 với góc nhìn CỐ ĐỊNH. Nhét khung 4:3 đó vào màn hình
 * dọc (~9:19.5) bằng 'cover' thì trình duyệt phải cắt hơn nửa bề ngang để lấp kín — người
 * phát chỉ còn thấy một dải hẹp giữa khung, mặt bị phóng sát. 'contain' giữ nguyên trọn
 * khung camera, đổi lại có viền đen trên/dưới vì 4:3 không lấp kín được màn hình dọc.
 *
 * Không có cách nào vừa rộng vừa kín màn hình: góc nhìn là hằng số của phần cứng, muốn thấy
 * nhiều hơn thì phải chấp nhận viền đen. Xin getUserMedia tỉ lệ 9:16 KHÔNG giải quyết được —
 * đã thử và hỏng: Safari không "thấy" rộng ra được, nó chỉ cắt bớt hai bên khung 4:3 cho
 * đủ tỉ lệ, nên hình còn hẹp hơn cả 'cover'.
 *
 * Đây là khung xem trước của NGƯỜI PHÁT. Khung của người xem cũng để 'contain' — cả ba nơi
 * và luồng gửi đi là canvas trong lam-min-da.js — cả hai không chịu ảnh hưởng của rule này.
 */
.gl-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Camera trước lật gương. Người xem cũng được lật đúng như vậy — js/go-live.js gửi trạng
   thái qua sự kiện 'camera-flipped', index.js áp transform ở đầu người xem. Sửa một bên mà
   quên bên kia là hai đầu nhìn thấy hai hình ngược nhau. */
.gl-video.gl-lat { transform: scaleX(-1); }

/* Nền mờ dùng chung cho các mảng điều khiển. Đặt một chỗ để chỉnh một lần là đồng bộ. */
.gl-mo { background: rgba(118, 118, 122, .62); }

/* Nền của các mảng nổi lúc đang phát. Xám-đen chứ KHÔNG phải đen trong suốt: khung camera
   để 'contain' nên hai đầu màn hình là dải đen tuyền, mà nền đen mờ đặt trên nền đen thì
   biến mất sạch — thanh chủ kênh và hàng thẻ trông như chữ trôi lơ lửng. */
.gl-lv-nen { background: rgba(62, 62, 66, .58); }

/* --- Hàng trên --------------------------------------------------------------- */

.gl-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-top) + 12px) 12px 0;
}

.gl-x {
    flex: none;
    width: 34px; height: 34px;
    border: 0; padding: 0;
    background: transparent;
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-x svg {
    width: 21px; height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* Dải phần thưởng: co lại được và cắt bằng "…" — chữ dài mà không cắt thì nó đẩy hai nút
   tròn bên phải văng ra khỏi màn hình. */
.gl-thuong {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    /* Sát chữ như bản thiết kế — icon TV là một phần của cụm chữ, tách xa ra thì nhìn như
       hai thứ rời nhau nằm chung một viên. */
    gap: 5px;
    height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-ico-thuong {
    flex: none;
    width: 17px; height: 17px;
    color: #fff;
}

.gl-thuong span { overflow: hidden; text-overflow: ellipsis; }

.gl-tron {
    flex: none;
    width: 34px; height: 34px;
    border: 0; padding: 0;
    border-radius: 50%;
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-ico-tron { width: 19px; height: 19px; }

/* --- Mách nước --------------------------------------------------------------- */

.gl-mach {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 52px);
    left: 12px; right: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 11px 11px 13px;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
}

/* Mũi nhọn chỉ lên nút Tiến độ, cho thấy lời mách này nói về cái nút nào.
   right: nút Tiến độ nằm cách mép phải 12px (padding .gl-top) + nửa nút 17px = 29px; khối
   .gl-mach đã thụt vào 12px nên còn 17px, trừ nửa bề ngang mũi nhọn (6px) ra 11px. */
.gl-mach::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 11px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: rgba(118, 118, 122, .62);
}

.gl-mach[hidden] { display: none; }
.gl-mach p { flex: 1; margin: 0; }
.gl-mach .gl-may { font-size: 18px; transform: rotate(-12deg); }

.gl-mach-x {
    flex: none;
    width: 19px; height: 19px;
    border: 0; padding: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/* --- Khối dưới --------------------------------------------------------------- */

/* Khối dưới là phần tử THƯỜNG trong dòng chảy flex, không phải absolute bottom:0. Để
   absolute thì thanh tab đáy (nền đen đặc) nằm đè lên, nuốt mất hàng "Camera thiết bị".
   margin-top:auto đẩy cả khối xuống sát thanh tab. */
.gl-duoi {
    position: relative;
    z-index: 1;
    margin-top: auto;
    /* Cộng lề an toàn đáy máy: thanh tab ĐĂNG/TẠO/LIVE trước đây gánh phần này, bỏ nó đi
       rồi thì hàng "Camera thiết bị" nằm đè lên thanh gạt của iPhone. */
    padding: 0 12px calc(env(safe-area-inset-bottom) + 12px);
}

.gl-vuot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.gl-vuot i { font-size: 11px; }

/* Hàng công cụ: năm mục chia đều, icon trên chữ dưới. */
.gl-cong-cu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.gl-cc {
    flex: 1;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.gl-cc i { font-size: 20px; }
.gl-cc:active { opacity: .6; }

/* Thẻ nhập tiêu đề + nút phát. */
.gl-the {
    border-radius: 12px;
    padding: 11px;
    margin-bottom: 4px;
}

.gl-tieu-de {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
}

.gl-avatar {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, .25);
}

.gl-tieu-de input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    outline: none;
}

.gl-tieu-de input::placeholder { color: rgba(255, 255, 255, .85); }

.gl-vi-tri {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-bottom: 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

/* Nút phát. Đỏ hồng như bản thiết kế; lúc đang phát thì đổi chữ và chuyển xám để không ai
   bấm nhầm tưởng là phát lại lần nữa. */
.gl-phat {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #fe2c55;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.gl-phat:active { background: #e01f45; }
.gl-phat.dang-phat { background: rgba(30, 30, 32, .85); }

/* Nguồn phát: Camera thiết bị / Trò chơi di động. */
.gl-nguon {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 8px 0 2px;
}

.gl-ng {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.gl-ng.is-active { color: #fff; }

/* --- Bảng Làm đẹp ------------------------------------------------------------- */

/* Luồng thô từ camera: phải ở lại trong trang và đang giải mã thì canvas WebGL mới lấy
   được khung hình. display:none thì trình duyệt ngừng giải mã và hình đứng im, nên giấu
   bằng cách thu nhỏ và cho trong suốt. */
.gl-nguon-tho {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gl-bang {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gl-bang[hidden] { display: none; }

/* Mở bảng thì giấu hẳn khối điều khiển: thanh trượt nằm ngay trên bảng nên sẽ đè lên hàng
   công cụ, mà để hai thứ chồng nhau thì vừa rối vừa dễ bấm nhầm sang nút Phát LIVE. */
.gl.dang-mo-bang .gl-duoi { display: none; }

/* Thanh trượt nổi trên khung hình, ngay phía trên bảng — kéo tới đâu thấy mặt mình đổi
   tới đó, không bị chính bảng che mất. */
/* Bảng Làm đẹp mở ra thì dọn thanh trên cùng và lời mách đi: bản thiết kế để trống hẳn
   phần trên cho người phát soi mặt mình, mà mấy mảng đó cũng chẳng liên quan gì lúc đang
   chỉnh da. */
.gl.dang-mo-bang .gl-top,
.gl.dang-mo-bang .gl-mach { display: none; }

.gl-truot-hang {
    position: relative;
    padding: 0 16px 14px;
}

/* Số mức, nổi trên núm kéo. --gl-truot-x do JS đặt (0..1) — dùng biến CSS thay vì gán
   thẳng left để phần canh giữa và phần bù bề rộng núm nằm gọn ở đây, JS chỉ lo con số. */
.gl-truot-so {
    position: absolute;
    left: calc(16px + 10px + (100% - 32px - 20px) * var(--gl-truot-x, 0));
    bottom: 30px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    pointer-events: none;
}

.gl-truot-so[hidden] { display: none; }

.gl-truot {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    outline: none;
}

.gl-truot::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.gl-truot::-moz-range-thumb {
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.gl-bang-than {
    background: #1a1a1c;
    border-radius: 14px 14px 0 0;
    padding: 14px 0 calc(env(safe-area-inset-bottom) + 14px);
}

.gl-bang-tab {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 14px 12px;
}

.gl-bt {
    position: relative;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    font-weight: 600;
    padding: 0 0 6px;
    cursor: pointer;
    /* Bốn tab tiếng Việt đều hai chữ; không chặn xuống dòng thì "Tối ưu hóa" gãy thành
       hai dòng và cả hàng cao gấp đôi. */
    white-space: nowrap;
}

.gl-bt.is-active { color: #fff; }

/* Gạch chân mục đang chọn. */
.gl-bt.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

/* Mục khoá: mờ hẳn và con trỏ báo không bấm được. Không dùng pointer-events:none để
   thuộc tính title vẫn hiện ra khi rê chuột, nói rõ vì sao chưa dùng được. */
.gl-bt[disabled], .gl-m[disabled] {
    opacity: .38;
    cursor: not-allowed;
}

.gl-bt-vach {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .25);
}

.gl-dat-lai {
    margin-left: auto;
    width: 30px; height: 30px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    display: grid; place-items: center;
    cursor: pointer;
}

/* Hàng mục cuộn ngang: sáu mục không vừa bề ngang điện thoại, mà bóp nhỏ lại cho vừa thì
   chữ "Gương mặt" bị cắt. Cho cuộn là đúng hơn. */
.gl-muc {
    display: flex;
    gap: 14px;
    padding: 4px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.gl-muc::-webkit-scrollbar { display: none; }

.gl-m {
    flex: none;
    width: 62px;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.gl-m-o {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #3a3a3c;
    display: grid; place-items: center;
}

/* Icon nét, cùng quy ước với .ico của khu quản trị: không tô, chỉ vẽ viền theo màu chữ. */
.gl-ico {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gl-m.is-active .gl-m-o { border-color: #fff; background: transparent; }

.gl-m-ten {
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chấm dưới mục: xám là chưa dùng, trắng là đang có tác dụng. */
.gl-m-cham {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}

.gl-m.co-tac-dung .gl-m-cham { background: #fff; }

/* Chấm cạnh nút "Làm đẹp" ngoài màn hình chính. */
.gl-cc { position: relative; }

.gl-cham {
    position: absolute;
    top: -2px;
    right: 50%;
    margin-right: -16px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fe2c55;
}

.gl-cham[hidden] { display: none; }

/* --- Trạng thái --------------------------------------------------------------- */

/* Báo lỗi (không có camera, bị từ chối quyền…) đè giữa khung hình. */
.gl-loi {
    position: absolute;
    left: 16px; right: 16px;
    top: 45%;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.gl-loi[hidden] { display: none; }

/* Chấm ĐANG PHÁT ở giữa trên khung hình. */
.gl-song {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 64px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fe2c55;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.gl-song[hidden] { display: none; }

/* --- Đếm ngược 3-2-1 ---------------------------------------------------------- */

/* Che kín màn hình, kể cả khung camera. Để hở camera thì ba giây này thành ba giây soi
   gương chỉnh tóc, mất hẳn tác dụng "chuẩn bị, sắp lên sóng". */
.gl-dem {
    position: absolute;
    inset: 0;
    /* Trên cả bảng Làm đẹp (z-index 2): đang đếm thì không còn gì để chỉnh nữa. */
    z-index: 3;
    display: grid;
    place-items: center;
    background: #000;
}

.gl-dem[hidden] { display: none; }

.gl-dem span {
    color: #fff;
    font-size: 128px;
    font-weight: 300;
    line-height: 1;
    animation: gl-dem-nhay .9s ease-out both;
}

/* Bung ra rồi GIỮ trắng gần hết nhịp, chỉ mờ đi ở đoạn cuối. Mờ dần đều suốt 900ms thì
   phần lớn thời gian con số đã xám nhạt — nhìn như màn hình đang hỏng chứ không như một
   nhịp đếm. */
@keyframes gl-dem-nhay {
    0%   { opacity: 0; transform: scale(1.5); }
    14%  { opacity: 1; transform: scale(1); }
    72%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.94); }
}

/* --- Đang phát ---------------------------------------------------------------- */

/* Lên sóng rồi thì cả khối chuẩn bị phải biến mất: ô tiêu đề, chọn nguồn, hàng công cụ,
   dải phần thưởng — tất cả chỉ có nghĩa lúc chưa phát. Ẩn bằng MỘT class trên thẻ cha chứ
   không sửa hidden của từng phần tử trong JS: thêm bớt nút sau này chỉ phải sửa ở đây.
   Nút X đóng cũng ẩn — lúc đang phát thì lối ra là nút nguồn ở góc phải, để không ai đóng
   nhầm màn hình lúc đang có người xem. */
/* Ẩn CẢ .gl-top chứ không liệt kê từng con.
   Trước đây chỉ ẩn .gl-x và .gl-thuong nên hai nút tròn (huy hiệu, tiến độ) nằm lại, đè
   lên thanh chủ kênh của chế độ phát — người phát thấy một vòng tròn có tam giác vô nghĩa
   ngay cạnh tên mình. Cả hàng trên đó là của màn hình CHUẨN BỊ, lên sóng rồi thì không còn
   mục nào ở đấy có nghĩa; liệt kê từng con là thêm nút mới lại quên một cái nữa. */
.gl.dang-phat .gl-top,
.gl.dang-phat .gl-duoi,
.gl.dang-phat .gl-mach,
.gl.dang-phat .gl-song { display: none; }

/* Lớp phủ trong suốt với chuột/ngón tay, chỉ các mảng con mới nhận chạm — nếu không thì
   cả khung hình bị một tấm kính vô hình chắn ngang. */
.gl-lv {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.gl-lv[hidden] { display: none; }
.gl-lv > * { pointer-events: auto; }

/* Hàng trên: chủ kênh — số người xem — nút tắt. */
.gl-lv-tren {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 10px);
    left: 10px; right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gl-lv-chu {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 60%;
    padding: 4px 13px 4px 4px;
    border-radius: 999px;
}

.gl-lv-anh {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.gl-lv-anh img { width: 100%; height: 100%; object-fit: cover; }

.gl-lv-ten {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.gl-lv-ten b {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-lv-ten em {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-style: normal;
}

.gl-lv-ten em i { color: #fe2c55; font-size: 10px; }

.gl-lv-xem {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
}

.gl-lv-xem i { font-size: 11px; }

.gl-lv-tat {
    flex: none;
    width: 32px; height: 32px;
    border: 0; padding: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-lv-tat:active { background: #fe2c55; }

/* Hàng thẻ. Cuộn ngang được và KHÔNG hiện thanh cuộn: trên điện thoại thanh cuộn vừa
   chiếm chỗ vừa lộ ra một vệt xám giữa khung hình. */
.gl-lv-pills {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 52px);
    left: 10px; right: 10px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gl-lv-pills::-webkit-scrollbar { display: none; }

.gl-lv-pill {
    flex: none;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 12.5px;
    white-space: nowrap;
}

.gl-lv-pill[disabled] { opacity: .72; cursor: default; }

/* Tin nhắn: dồn xuống đáy, tin mới đẩy tin cũ lên trên như mọi khung chat live.
   Kiểu của TỪNG DÒNG (.chat-msg/.cmsg-*) nằm ở css/goldenLivestream.css, dùng chung với
   khung chat của người xem — ở đây chỉ lo chỗ đặt khung. */
.gl-lv-tin {
    position: absolute;
    left: 12px; right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 64px);
    max-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    overflow-y: auto;
    scrollbar-width: none;
}

.gl-lv-tin::-webkit-scrollbar { display: none; }

/* Thông báo của hệ thống, không phải của ai cả — ô tròn để xám trung tính thay cho màu
   sinh từ tên người gửi. */
.chat-msg--he-thong .cmsg-av { background: rgba(255, 255, 255, .2); }

/* Hàng nút lúc đang phát: hai mục khoá bên trái, bốn mục làm được thật bên phải. */
.gl-lv-duoi {
    position: absolute;
    left: 12px; right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    display: flex;
    justify-content: space-between;
}

.gl-lv-nhom {
    display: flex;
    gap: 9px;
}

.gl-lv-nut {
    position: relative;
    width: 42px; height: 42px;
    border: 0; padding: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-lv-nut:active { opacity: .65; }

/* Khai gradient dùng chung. Không được display:none — Safari bỏ luôn cả <defs> bên trong
   và mọi icon trỏ tới url(#glLvMau) mất sạch nét, thành ô tròn trống. */
.gl-lv-defs {
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
}

/* Icon nét, cùng kiểu với .gl-ico của bảng Làm đẹp. */
.gl-lv-ico {
    width: 23px; height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gl-lv-ico--mau { stroke: url(#glLvMau); stroke-width: 1.9; }
.gl-lv-ico--dac { fill: currentColor; stroke: none; }

/* Mục đã khoá: giữ nguyên độ rõ của icon, chỉ ổ khoá nói lên là chưa bấm được. Làm mờ cả
   nút thì nhìn như hỏng, mà bản thiết kế cũng để icon sáng nguyên. */
.gl-lv-khoa { cursor: default; }

.gl-lv-oKhoa {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #1c1c1e;
    display: grid; place-items: center;
}

.gl-lv-oKhoa svg {
    width: 10px; height: 10px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Bảng tuỳ chọn của nút "…" ------------------------------------------------- */

/* .gl-bang-them chứ KHÔNG phải .gl-bt: '.gl-bt' đã là class của NÚT TAB trong bảng Làm
   đẹp (xem quy tắc cùng tên ở trên). Đặt trùng thì luật này — đứng sau nên thắng — biến
   mỗi nút tab thành một khối phủ kín màn hình, và bảng Làm đẹp vỡ hẳn: bốn chữ Tối ưu hóa
   / Làm đẹp / Trang điểm / Bộ lọc chồng lên nhau ở đáy màn hình. */
.gl-bang-them {
    position: absolute;
    inset: 0;
    /* Trên lớp điều khiển (1) và bảng Làm đẹp (2), dưới màn đếm ngược (3) — đang đếm thì
       không còn gì để chỉnh nữa. */
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gl-bang-them[hidden] { display: none; }

/* Nền KHÔNG tối đi: bản thiết kế để nguyên khung hình phía trên cho người phát vẫn thấy
   mình trong lúc chỉnh. Vẫn phải có thẻ này để bấm ra ngoài là đóng. */
.gl-bt-nen {
    position: absolute;
    inset: 0;
}

.gl-bt-hop {
    position: relative;
    max-height: 88%;
    overflow-y: auto;
    padding: 16px 12px calc(env(safe-area-inset-bottom) + 14px);
    border-radius: 22px 22px 0 0;
    background: #f1f1f4;
    color: #111;
    animation: gl-bt-len .22s ease-out;
}

@keyframes gl-bt-len {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gl-bt-hop { animation: none; }
}

/* Hàng nút tròn trên cùng. */
.gl-bt-hang {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.gl-bt-tron {
    flex: none;
    width: 54px; height: 54px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: rgba(120, 120, 128, .16);
    color: #1c1c1e;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-bt-tron svg {
    width: 26px; height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gl-bt-tron:active { background: rgba(120, 120, 128, .28); }
.gl-bt-tron[disabled] { opacity: .35; cursor: default; }

/* Nền đậm = đang ở trạng thái KHÁC THƯỜNG, thứ đáng để mắt tới: micrô đang tắt, hình đang
   dừng, hoặc loa tự nghe đang bật (quên tai nghe là hú). KHÔNG áp cho nút Lật gương: soi
   gương là trạng thái mặc định nên nút sẽ đen ngay từ lúc mở bảng, nhìn như đang có gì đó
   bị tắt. Lật gương tự nó đã có phản hồi rõ — khung hình đảo ngay trước mắt. */
#glBtMic[aria-pressed="true"],
#glBtTam[aria-pressed="true"],
#glBtLoa[aria-pressed="true"] { background: #1c1c1e; color: #fff; }

/* Gạch chéo của icon micrô: chỉ hiện khi đang tắt tiếng. */
.gl-bt-gach { display: none; }
#glBtMic[aria-pressed="true"] .gl-bt-gach { display: block; }

/* Loa tự nghe đi NGƯỢC micrô vì mặc định là tắt: lúc chưa bật thì gạch chéo hiện sẵn và
   sóng âm ẩn đi, bật lên mới thành cái loa đang kêu. */
#glBtLoa[aria-pressed="false"] .gl-bt-gach { display: block; }
#glBtLoa[aria-pressed="false"] .gl-bt-song { display: none; }

/* Thẻ danh sách. */
.gl-bt-the {
    margin-bottom: 12px;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.gl-bt-dong {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 15px;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

/* Vạch ngăn thụt vào cho thẳng cột chữ, không cắt ngang qua icon. */
.gl-bt-dong + .gl-bt-dong { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .07); }
.gl-bt-dong:active { background: rgba(0, 0, 0, .04); }
.gl-bt-dong[disabled] { cursor: default; }
.gl-bt-dong[disabled] span, .gl-bt-dong[disabled] .gl-bt-ico { opacity: .45; }

.gl-bt-ico {
    flex: none;
    width: 23px; height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gl-bt-dong > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-bt-phu {
    flex: none;
    max-width: 42%;
    color: rgba(60, 60, 67, .6);
    font-size: 15px;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mũi nhọn ">" vẽ bằng viền, khỏi kéo thêm icon cho một hình đơn giản thế này. */
.gl-bt-mui {
    flex: none;
    width: 8px; height: 8px;
    border: 2px solid rgba(60, 60, 67, .35);
    border-left: 0; border-bottom: 0;
    transform: rotate(45deg);
}

/* Nút gạt. */
.gl-bt-dong--gat { cursor: default; }

.gl-gat {
    flex: none;
    width: 51px; height: 31px;
    padding: 2px;
    border: 0;
    border-radius: 999px;
    background: rgba(120, 120, 128, .32);
    cursor: pointer;
    transition: background .18s ease;
}

.gl-gat > span {
    display: block;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    transition: transform .18s ease;
}

.gl-gat[aria-checked="true"] { background: #34c759; }
.gl-gat[aria-checked="true"] > span { transform: translateX(20px); }
.gl-gat[disabled] { opacity: .4; cursor: default; }

.gl-bt-chan {
    margin: 4px 0 0;
    text-align: center;
    color: rgba(60, 60, 67, .6);
    font-size: 14px;
}

.gl-bt-chan a { color: #111; font-weight: 600; text-decoration: none; }

/* Màn hình thấp (iPhone SE…): thu bớt cho vừa, nếu không thẻ nhập tiêu đề bị nút phát
   đẩy tụt xuống dưới mép màn hình. */
@media (max-height: 700px) {
    .gl-cc i { font-size: 18px; }
    .gl-cong-cu { margin-bottom: 9px; }
    .gl-vuot { margin-bottom: 7px; }
    .gl-tieu-de input { font-size: 14px; }
    .gl-phat { height: 40px; }
    .gl-dem span { font-size: 84px; }
}

/* --- Ô nhập bình luận của người phát ------------------------------------------ */

.gl-nhap {
    position: absolute;
    inset: 0;
    /* Trên bảng "…" (4) vì bảng chính là chỗ mở nó ra; dưới màn đếm ngược (3)? Không —
       đếm ngược chỉ chạy lúc CHƯA phát, còn ô nhập chỉ mở lúc ĐANG phát, hai thứ không
       bao giờ cùng trên màn hình. Đặt 5 cho rành mạch thứ tự với bảng. */
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gl-nhap[hidden] { display: none; }

/* Phủ kín phần trên để chạm ra ngoài thanh là đóng. Trong suốt: bản thiết kế để nguyên
   khung hình, người phát vẫn phải thấy mình trong lúc gõ. */
.gl-nhap-nen {
    position: absolute;
    inset: 0;
}

/* Bù chiều cao bàn phím. --gl-ban-phim do js/go-live.js đặt từ visualViewport: #golive là
   position:fixed nên bàn phím bung ra KHÔNG đẩy nó lên, thanh nhập nằm khuất sau bàn phím. */
.gl-nhap-duoi {
    position: relative;
    margin-bottom: var(--gl-ban-phim, 0px);
    padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px);
    background: #fff;
    transition: margin-bottom .12s ease-out;
}

.gl-nhap-hang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gl-nhap-o {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 42px;
    padding: 0 8px 0 14px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .12);
}

.gl-nhap-o input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 16px;   /* dưới 16px là iOS tự phóng to cả trang khi chạm vào ô nhập */
    outline: none;
}

.gl-nhap-o input::placeholder { color: rgba(60, 60, 67, .45); }

.gl-nhap-nut {
    flex: none;
    width: 32px; height: 32px;
    border: 0; padding: 0;
    background: transparent;
    color: #1c1c1e;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-nhap-nut svg,
.gl-nhap-gui svg {
    width: 24px; height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gl-nhap-gui {
    flex: none;
    width: 40px; height: 40px;
    border: 0; padding: 0;
    background: transparent;
    color: #1c1c1e;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-nhap-gui svg { fill: currentColor; stroke: none; }

/* Ô trống thì nút gửi mờ đi và không bấm được — bấm gửi một chuỗi rỗng chỉ tạo ra một
   dòng trắng trong khung chat của mọi người xem. */
.gl-nhap-gui[disabled] { opacity: .3; cursor: default; }

/* Bảng sticker. Bốn cột vừa đúng bề ngang màn hình, CHỈ cuộn lên xuống; cao tối đa 42vh
   để trên máy màn hình thấp thanh nhập vẫn còn chỗ.

   minmax(0, 1fr) chứ KHÔNG phải 1fr: '1fr' là viết tắt của minmax(AUTO, 1fr), mà mức tối
   thiểu 'auto' của một ô lưới là min-content của nó — với thẻ <img> thì min-content chính
   là bề rộng GỐC của ảnh (sticker khoảng 240px). Bốn cột như thế thành ~960px, tràn ra
   ngoài màn hình và cột thứ tư bị cắt cụt. Đặt mức tối thiểu về 0 thì cột co lại được.
   overflow-x: hidden là chốt chặn cuối: có lọt phần tử rộng nào nữa cũng không đẻ ra
   thanh cuộn ngang. */
.gl-nhap-sticker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    max-height: 42vh;
    padding: 6px 2px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.gl-nhap-sticker::-webkit-scrollbar { display: none; }
.gl-nhap-sticker[hidden] { display: none; }

.gl-nhap-sticker button {
    min-width: 0;      /* cùng lẽ với minmax(0,...) ở trên: nút cũng phải co được */
    aspect-ratio: 1;
    border: 0;
    border-radius: 12px;
    background: transparent;
    padding: 5px;
    cursor: pointer;
}

.gl-nhap-sticker button:active { background: rgba(120, 120, 128, .16); }

.gl-nhap-sticker img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Lúc đang tải và lúc hỏng: chiếm trọn bề ngang lưới, không nằm lọt thỏm trong một ô. */
.gl-nhap-sticker p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 26px 0;
    text-align: center;
    color: rgba(60, 60, 67, .6);
    font-size: 14px;
}

/* Tim bay ở màn hình phát. Chỉ còn phần VỊ TRÍ; dáng và chuyển động lấy từ .tim-bay
   trong css/style.css.

   Trước đây khối này tự khai @keyframes riêng, với lý do ghi rõ là "không mượn floatHeart
   của chat.js vì cái đó nằm trong thẻ <style> dựng lúc chạy, dựa vào nó thì màn hình phát
   hỏng lặng lẽ nếu ai đó dọn hoặc đổi tên". Lo ngại ấy đúng — và cách chữa là đưa định
   nghĩa vào một tệp CSS tĩnh, chứ không phải mỗi màn hình tự khai một kiểu bay khác nhau.
   Nhánh prefers-reduced-motion cũng chuyển về đó, nay áp dụng cho cả ba màn hình. */
.gl-tim {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom) + 68px);
    z-index: 2;
}

/* --- Bảng Cài đặt -------------------------------------------------------------- */

/* Chỉ thêm phần bảng "…" chưa có: đầu bảng và dòng hai tầng chữ. Thân bảng, thẻ, dòng, ô
   gạt đều dùng lại .gl-bt-* — hai bảng là cùng một kiểu, tách ra hai bộ luật là sớm muộn
   lệch nhau. */
.gl-cd-dau {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 2px 0 14px;
}

/* PHẢI khai lại font-family và letter-spacing, không chỉ cỡ với độ đậm.
   style.css gán cho MỌI h1..h6 của site font 'Cormorant Garamond' serif ở weight 500 —
   hợp với tiêu đề trang giới thiệu, nhưng đặt vào một bảng cài đặt thì ra chữ mảnh kiểu
   sách, lạc hẳn với các dòng bên dưới vốn dùng font sans của body. */
.gl-cd-dau h2 {
    margin: 0;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: normal;
    color: #111;
}

.gl-cd-x {
    position: absolute;
    right: 0;
    width: 34px; height: 34px;
    border: 0; padding: 0;
    background: transparent;
    color: #111;
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-cd-x svg {
    width: 23px; height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
}

/* Dòng hai tầng: tên ở trên, câu giải thích ở dưới. Phải để chữ XUỐNG DÒNG được — luật
   .gl-bt-dong > span cắt bằng "…" trên MỘT dòng, áp vào đây thì câu giải thích mất gần hết. */
/* Chọn qua '.gl-bt-dong >' cho ĐỦ ĐỘ ƯU TIÊN: luật cần ghi đè là '.gl-bt-dong > span'
   (một class + một tên thẻ), '.gl-bt-cot' trơn chỉ có một class nên thua. */
.gl-bt-dong > .gl-bt-cot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Gỡ lại nowrap. .gl-bt-cot cũng là một <span> con trực tiếp của .gl-bt-dong nên dính
       luật '.gl-bt-dong > span { white-space: nowrap }' ở trên, và nowrap thì DI TRUYỀN
       xuống <b>/<em> bên trong — câu giải thích hai dòng bị ép thành một dòng cắt cụt. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.gl-bt-cot b {
    font-size: 16px;
    font-weight: 400;
    color: #111;
}

.gl-bt-cot em {
    font-size: 13px;
    font-style: normal;
    line-height: 1.35;
    color: rgba(60, 60, 67, .6);
}

/* Dòng có hai tầng chữ thì canh icon và mũi nhọn lên đầu dòng, không để chúng trôi ra
   giữa khối chữ hai dòng. */
.gl-bt-dong:has(.gl-bt-cot) { align-items: flex-start; }
.gl-bt-dong:has(.gl-bt-cot) .gl-bt-ico { margin-top: 1px; }
.gl-bt-dong:has(.gl-bt-cot) .gl-bt-mui { margin-top: 8px; }
.gl-bt-dong:has(.gl-bt-cot) .gl-gat { margin-top: 2px; }

.gl-bt-dong[disabled] .gl-bt-cot b,
.gl-bt-dong[disabled] .gl-bt-cot em { opacity: .45; }

/* --- Dải báo ngắn -------------------------------------------------------------- */

/* Trên MỌI bảng (bảng "…" 4, ô nhập 5): lời báo hay bật ra đúng lúc một bảng đang mở —
   "máy này không xoá được tạp âm" chỉ xuất hiện khi người dùng vừa gạt trong bảng. Nằm
   dưới bảng thì báo xong chẳng ai thấy. */
.gl-nhac {
    position: absolute;
    z-index: 6;
    top: calc(env(safe-area-inset-top) + 92px);
    left: 16px; right: 16px;
    margin: 0 auto;
    max-width: 340px;
    padding: 11px 15px;
    border-radius: 12px;
    background: rgba(28, 28, 30, .92);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    animation: gl-nhac-hien .18s ease-out;
}

.gl-nhac[hidden] { display: none; }

@keyframes gl-nhac-hien {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gl-nhac { animation: none; }
}

/* --- Bảng công cụ (nút cây đũa) ------------------------------------------------ */

.gl-hu {
    position: absolute;
    inset: 0;
    /* Trên lớp điều khiển (1) nhưng DƯỚI bảng Làm đẹp (2): chạm "Làm đẹp" là bảng này
       đóng lại và bảng làm mịn thế chỗ, không chồng lên nhau. */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gl-hu[hidden] { display: none; }

.gl-hu-nen {
    position: absolute;
    inset: 0;
}

.gl-hu-hop {
    position: relative;
    display: grid;
    /* minmax(0,1fr) chứ không 1fr — cùng lý do đã ghi ở bảng sticker: mức tối thiểu 'auto'
       của ô lưới là min-content, đủ để đẩy cột tràn ra ngoài màn hình. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 0;
    padding: 18px 8px calc(env(safe-area-inset-bottom) + 16px);
    background: #000;
    animation: gl-bt-len .2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .gl-hu-hop { animation: none; }
}

.gl-hu-o {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

.gl-hu-o:active { opacity: .6; }
.gl-hu-o[disabled] { cursor: default; }

/* Ô chứa icon: neo tương đối để ổ khoá bám vào góc. Icon giữ nguyên độ rõ kể cả khi mục bị
   khoá — bản thiết kế cũng vậy, và làm mờ cả mục thì nhìn như hỏng. */
.gl-hu-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
}

.gl-hu-ico svg {
    width: 30px; height: 30px;
    fill: none;
    stroke: currentColor;
    /* 1.7 chứ không 1.5: ở cỡ 30px nét 1.5 mảnh hơn hẳn bản thiết kế, đứng cạnh mấy icon
       đặc ở hàng nút dưới là thấy nhạt. */
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ổ khoá ở đây nhỏ hơn và nền đen đặc cho hợp với bảng nền tối. */
.gl-hu-ico .gl-lv-oKhoa {
    right: -3px; bottom: -3px;
    width: 15px; height: 15px;
    background: #000;
}

.gl-hu-ico .gl-lv-oKhoa svg { width: 9px; height: 9px; stroke-width: 2.4; }

/* --- Bảng Hiệu ứng ------------------------------------------------------------- */

.gl-lc {
    position: absolute;
    inset: 0;
    /* Cùng tầng với bảng công cụ: mở bảng này là bảng kia đóng, không chồng nhau. */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gl-lc[hidden] { display: none; }

.gl-lc-nen {
    position: absolute;
    inset: 0;
}

.gl-lc-hop {
    position: relative;
    max-height: 62%;
    display: flex;
    flex-direction: column;
    background: #000;
    animation: gl-bt-len .2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .gl-lc-hop { animation: none; }
}

/* Thanh công cụ + tab. Cuộn ngang được vì tab có thể dài hơn màn hình. */
.gl-lc-thanh {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 10px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gl-lc-thanh::-webkit-scrollbar { display: none; }

.gl-lc-nut {
    flex: none;
    width: 36px; height: 36px;
    border: 0; padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    display: grid; place-items: center;
    cursor: pointer;
}

.gl-lc-nut svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gl-lc-nut[disabled] { opacity: .4; cursor: default; }

.gl-lc-vach {
    flex: none;
    width: 1px; height: 20px;
    margin: 0 4px;
    background: rgba(255, 255, 255, .22);
}

.gl-lc-tab {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 10px;
}

.gl-lc-t {
    flex: none;
    position: relative;
    padding: 6px 0 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
}

.gl-lc-t.is-active { color: #fff; font-weight: 600; }

/* Gạch chân của tab đang chọn, vẽ bằng ::after để không phải thêm một thẻ chỉ để làm vạch. */
.gl-lc-t.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.gl-lc-t[disabled] { cursor: default; }

/* Lưới ô hiệu ứng. minmax(0,1fr) — cùng lý do đã ghi ở bảng sticker. */
.gl-lc-luoi {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 6px;
    padding: 10px 10px calc(env(safe-area-inset-bottom) + 14px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.gl-lc-luoi::-webkit-scrollbar { display: none; }

.gl-lc-o {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

/* Ô xem trước: khung hình camera THẬT đã áp hiệu ứng, vẽ một lần lúc mở bảng. */
.gl-lc-o canvas {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: #1c1c1e;
    object-fit: cover;
}

.gl-lc-o.is-active canvas { box-shadow: 0 0 0 2px #fff; }
.gl-lc-o.is-active { color: #fff; font-weight: 600; }
.gl-lc-o span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }