/* Trang game Đoán Ý Cả Lớp (/doan-y/) – chỉ nạp ở trang này, dùng chung token của app.css.
   Lớp đều có tiền tố g- để không đụng lớp của trang chủ. Bước 1 màu đỏ nhạt, bước 2 màu tối (anh Lâm 2026-10-20). */
#game{--g2:#0E7C7B;--g2-soft:#E3F4F3;--g2-grad:linear-gradient(150deg,#1BA39C 0%,#0E7C7B 60%,#0A6463 100%);position:relative;isolation:isolate;overflow:hidden;min-height:70vh}
.g-in{max-width:520px;margin:0 auto;padding:14px var(--gut-r) 40px var(--gut-l);display:flex;flex-direction:column;gap:14px}
.g-in>*{flex-shrink:0}
.g-k{font:700 10.5px/1.25 var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.g-h{font:200 31px/1.06 var(--f-d);letter-spacing:-.05em}
.g-h b{font-weight:400}
.g-sub{color:var(--mute);font-size:13.5px}
.g-card{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 28px rgba(160,40,30,.09);border-radius:20px;padding:15px}
.g-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border-radius:999px;background:linear-gradient(180deg,#E0140E,#C00A05);color:#fff;font:800 15.5px/1.1 var(--f-b);box-shadow:0 12px 26px rgba(206,12,7,.28);text-decoration:none;padding:0 18px;text-align:center}
.g-cta[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.g-cta:active,.g-ghost:active{transform:scale(.98)}
.g-ghost{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border-radius:999px;border:1px solid rgba(27,30,43,.12);background:#fff;color:var(--ink);font:700 13.5px/1.1 var(--f-b);text-decoration:none;padding:0 14px;text-align:center}
.g-links{display:flex;gap:8px}
.g-links .g-ghost{flex:1}
.g-err{color:var(--red);font-size:13px;font-weight:700;min-height:18px}
.g-note{font-size:11.5px;color:var(--mute);text-align:center}
.g-demo{background:#FFF1D6;color:#6B4700;font:700 12px/1.3 var(--f-b);text-align:center;padding:8px 14px}

/* thẻ quà */
.g-prz{position:relative;overflow:hidden;border-radius:24px;padding:17px 17px 15px;color:#fff;background:radial-gradient(90% 80% at 100% 0%,#FF7A5C 0,transparent 60%),linear-gradient(150deg,#E8352A,#B80904 70%);box-shadow:0 18px 36px rgba(206,12,7,.32)}
.g-prz .k{font:800 11px/1.2 var(--f-b);letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.g-prz .big{display:flex;align-items:flex-end;gap:10px;margin:2px 0 4px}
.g-prz .big b{font:600 78px/.9 var(--f-d);letter-spacing:-.06em;text-shadow:0 6px 24px rgba(90,0,0,.35)}
.g-prz .big span{font:500 15px/1.15 var(--f-d);padding-bottom:8px}
.g-prz .big span em{display:block;font:800 27px/1 var(--f-d);font-style:normal}
.g-prz p{font-size:13px;line-height:1.45;opacity:.96}
.g-prz .sh{position:absolute;top:-40%;left:-60%;width:60%;height:180%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(18deg);animation:g-sh 3.6s ease-in-out infinite;pointer-events:none}
@keyframes g-sh{0%,55%{left:-60%}100%{left:130%}}
@media (max-width:359px){.g-prz .big b{font-size:64px}}

/* 2 bước */
.g-how{display:grid;gap:11px}
.g-how h3,.g-pt h3{font:400 16.5px/1.2 var(--f-d);letter-spacing:-.01em}
.g-stp{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start}
.g-stp em{font-style:normal;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font:500 18px/1 var(--f-d)}
.g-stp.s1 em{background:var(--red-soft);color:var(--red)}
.g-stp.s2 em{background:var(--g2);color:#fff}
.g-stp b{display:block;font:500 15px/1.3 var(--f-d)}
.g-stp span{font-size:13px;color:var(--mute);line-height:1.45}

/* số liệu đang mở */
.g-live{display:grid;gap:8px}
.g-live .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.g-live .num{font:300 30px/1 var(--f-d);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.g-live .cd{font:400 14.5px/1.2 var(--f-d);font-variant-numeric:tabular-nums;color:var(--red);text-align:right}
.g-feed{display:grid;gap:5px;font-size:12.5px;color:var(--mute)}
.g-feed div{display:flex;gap:8px;align-items:center;min-width:0}
.g-feed div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-feed i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.g-heat{display:grid;gap:5px;font-size:12.5px}
.g-heat div{display:flex;justify-content:space-between;gap:8px}
.g-heat span:last-child{font-weight:700;text-align:right}

/* ví dụ tính điểm + thước lệch */
.g-pt{display:grid;gap:10px;font-size:13px;line-height:1.45}
.g-pt .lb{font:800 10.5px/1.2 var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.g-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.g-mini span{border-radius:10px;padding:6px 4px;text-align:center;background:#F6F3F4;font:600 11.5px/1.25 var(--f-b)}
.g-mini span b{display:block;font:500 15px/1.1 var(--f-d)}
.g-mini span.top{background:var(--red);color:#fff}
.g-tick{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start}
.g-tick i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 11px/1 var(--f-b)}
.g-tick i.y{background:#1E7A4C;color:#fff}.g-tick i.n{background:#EDE9EA;color:var(--mute)}
.g-ruler{position:relative;height:58px;margin:2px 8px 0}
.g-ruler .tr{position:absolute;left:0;right:0;top:27px;height:6px;border-radius:6px;background:#EFEAEB}
.g-ruler .gap{position:absolute;top:24px;height:12px;border-radius:6px;background:repeating-linear-gradient(45deg,#FFB3AA 0 4px,#FFD6D1 4px 8px)}
.g-ruler .mk{position:absolute;top:0;bottom:0;width:0}
.g-ruler .mk::before{content:"";position:absolute;left:-1.5px;top:20px;width:3px;height:20px;border-radius:2px;background:currentColor}
.g-ruler .mk span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:800 10.5px/1 var(--f-b)}
.g-ruler .mk.real{color:var(--red)}.g-ruler .mk.real span{bottom:0}
.g-ruler .mk.you{color:var(--hl)}.g-ruler .mk.you span{top:4px}
.g-vs{display:grid;gap:4px}
.g-vs div{display:grid;grid-template-columns:1fr 46px 46px;gap:6px;padding:6px 8px;border-radius:10px;background:#F7F5F6;font-variant-numeric:tabular-nums}
.g-vs div.w{background:#EAF6EF}
.g-vs div span:nth-child(n+2){text-align:right}
.g-vs div.h{background:none;font-weight:800;color:var(--mute);font-size:11px}
details.g-full{font-size:13px;color:var(--mute)}
details.g-full summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:28px}
details.g-full ul{padding-left:18px;margin:8px 0 0;display:grid;gap:5px}

/* nhập thông tin */
.g-field{display:grid;gap:6px}
.g-field label{font:700 12.5px/1 var(--f-b)}
.g-field small{font-size:12px;color:var(--mute)}
.g-field input{height:50px;border-radius:14px;border:1px solid rgba(27,30,43,.14);padding:0 14px;font:500 16px var(--f-b);color:var(--ink);background:#fff;width:100%}
.g-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.g-as{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:11px 12px;border-radius:16px;font-size:12.5px;line-height:1.4}
.g-as svg{width:34px;height:34px}
.g-as b{display:block;font:500 14px/1.25 var(--f-d)}
.g-as.lock{background:#EAF6EF;color:#14502F}
.g-as.one{background:var(--red-soft);color:#7A1410}

/* bước 1 – bước 2 */
.g-duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.g-duo span{display:flex;align-items:center;justify-content:center;height:36px;border-radius:999px;font:700 12px/1 var(--f-b);background:#F3F1F2;color:var(--mute)}
.g-duo span.on1{background:var(--red);color:#fff}
.g-duo span.on2{background:var(--g2);color:#fff}
.g-duo span.done{background:var(--red-soft);color:var(--red)}
.g-who{border-radius:20px;padding:14px;display:grid;gap:6px}
.g-who.me{background:var(--red-soft)}
.g-who .big{font:500 23px/1.1 var(--f-d);letter-spacing:-.03em}
.g-who.me .big{color:var(--red)}
.g-who.crowd{background:var(--g2-grad);color:#fff;box-shadow:0 14px 30px rgba(14,124,123,.22)}
.g-who p{font-size:13px;line-height:1.45}
.g-who.crowd p{color:rgba(255,255,255,.8)}
.g-who.crowd .g-k{color:rgba(255,255,255,.7)}
.g-who.me .g-k{color:#B0261F}
.g-ppl{display:flex}
.g-ppl i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-6px;background:linear-gradient(135deg,#FF9A8A,#E8352A)}
.g-ppl i:first-child{margin-left:0}
.g-ppl i:nth-child(2){background:linear-gradient(135deg,#FFD0A6,#FF7A5C)}.g-ppl i:nth-child(3){background:linear-gradient(135deg,#F6B6C8,#E8265A)}.g-ppl i:nth-child(4){background:linear-gradient(135deg,#D8CFF5,#8E7BE0)}
.g-q{display:grid;gap:10px}
.g-q h2{font:400 18px/1.3 var(--f-d);letter-spacing:-.015em}
.g-qn{font:700 11.5px/1.35 var(--f-b);color:var(--mute)}
.g-opts{display:grid;gap:8px}
.g-opt{text-align:left;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:12px;border-radius:16px;border:1px solid rgba(27,30,43,.1);background:#fff;color:var(--ink);font:600 14px/1.38 var(--f-b);min-height:56px}
.g-opt em{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font:500 13px/1 var(--f-d)}
.g-opt[aria-pressed="true"]{border-color:var(--red);background:#FFF5F3}
.g-opt[aria-pressed="true"] em{background:var(--red);color:#fff}
.g-c2 .g-opt em{background:var(--g2-soft);color:var(--g2)}
.g-c2 .g-opt[aria-pressed="true"]{border-color:var(--g2);background:var(--g2-soft)}
.g-c2 .g-opt[aria-pressed="true"] em{background:var(--g2);color:#fff}
.g-opt small{display:block;font:700 11px/1.2 var(--f-b);color:var(--red);margin-top:3px}
.g-pts{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.g-pts b{font:500 13px/1 var(--f-d);color:#fff;background:var(--g2);border-radius:999px;padding:6px 10px}
.g-pct{display:grid;gap:6px;padding:12px;border-radius:16px;border:1px dashed rgba(27,30,43,.18)}
.g-pct label{font-size:13px;font-weight:700}
.g-pct small{font-size:12px;color:var(--mute)}
.g-pct .r{display:flex;align-items:center;gap:10px}
.g-pct input[type=range]{flex:1;accent-color:#0E7C7B;height:32px}
.g-pct output{font:400 21px/1 var(--f-d);min-width:54px;text-align:right;font-variant-numeric:tabular-nums}

/* đã gửi */
.g-share{border-radius:24px;padding:16px;color:#fff;background:radial-gradient(80% 70% at 100% 0%,#FF7A5C 0,transparent 60%),linear-gradient(150deg,#E8352A,#B80904 70%);display:grid;gap:9px;box-shadow:0 18px 36px rgba(206,12,7,.28)}
.g-share b{font:400 21px/1.18 var(--f-d);letter-spacing:-.03em}
.g-share p{font-size:13px;line-height:1.45;opacity:.96}
.g-share button{min-height:50px;border-radius:999px;background:#fff;color:var(--red);font:800 15px/1 var(--f-b)}
.g-share small{font-size:12px;opacity:.92;min-height:15px}
.g-sum{display:grid;gap:6px;font-size:13px}
.g-sum div{display:flex;justify-content:space-between;gap:10px}
.g-sum span:first-child{color:var(--mute);flex:none}
.g-sum span:last-child{text-align:right}

/* chờ */
.g-wait{display:grid;gap:12px;justify-items:center;text-align:center;padding-top:24px}
.g-spin{width:54px;height:54px;border-radius:50%;border:3px solid var(--red-soft);border-top-color:var(--red);animation:g-sp 1.1s linear infinite}
@keyframes g-sp{to{transform:rotate(360deg)}}

/* kết quả */
.g-won{border-radius:20px;padding:15px;background:linear-gradient(150deg,#E8352A,#B80904);color:#fff;display:grid;gap:6px}
.g-won b{font:400 21px/1.15 var(--f-d)}
.g-won p{font-size:13px;opacity:.96}
.g-score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.g-score b{font:300 44px/1 var(--f-d);letter-spacing:-.04em}
.g-calc{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.g-calc th,.g-calc td{padding:7px 4px;border-bottom:1px solid rgba(27,30,43,.08);text-align:left}
.g-calc th{font-weight:700;color:var(--mute)}
.g-calc td:nth-child(n+4),.g-calc th:nth-child(n+4){text-align:right}
.g-calc tr:last-child td{border-bottom:0;font-weight:800}
.g-form{font-size:12px;line-height:1.45;color:var(--mute);background:#F7F5F6;border-radius:12px;padding:9px 11px}
.g-form b{color:var(--ink)}
.g-bars{display:grid;gap:8px}
.g-bar{display:grid;grid-template-columns:20px 1fr 42px;gap:8px;align-items:end;font-size:12.5px}
.g-bar>div{display:grid;gap:3px;min-width:0}
.g-bar small{font:600 12px/1.3 var(--f-b);color:var(--ink)}
.g-bar.lead small{color:var(--red);font-weight:800}
.g-bar .t{height:10px;border-radius:6px;background:var(--red-soft);position:relative;overflow:hidden}
.g-bar .t i{position:absolute;inset:0 auto 0 0;background:#FFB3AA;border-radius:6px}
.g-bar.lead .t i{background:var(--red)}
.g-bar b{font-variant-numeric:tabular-nums;text-align:right}
.g-you{font-size:12.5px;color:var(--mute)}
.g-you b{color:var(--ink)}
.g-lb{display:grid;gap:4px;font-size:13px}
.g-lb div{display:grid;grid-template-columns:26px 1fr 40px 50px;gap:6px;padding:8px;border-radius:10px;font-variant-numeric:tabular-nums}
.g-lb div span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-lb div.win{background:#FFF5F3}
.g-lb div.me{outline:1.5px solid var(--red)}
.g-lb span:nth-child(3),.g-lb span:nth-child(4){text-align:right}
.g-lb div.h{font-weight:700;color:var(--mute);font-size:11.5px}

@media (prefers-reduced-motion:reduce){.g-prz .sh{display:none;animation:none}.g-spin{animation:none}}
@media (min-width:760px){.g-in{padding-top:28px}.g-h{font-size:38px}}


/* màn chuyển tiếp bước 1 → bước 2 (anh Lâm 2026-10-20) */
.g-bridge{display:grid;gap:14px}
.g-flow{display:grid;grid-template-columns:1fr 26px 1fr;gap:6px;align-items:stretch}
.g-flow>div{border-radius:18px;padding:12px;display:grid;gap:4px;align-content:start}
.g-flow .f1{background:var(--red-soft);color:#7A1410}
.g-flow .f2{background:var(--g2-grad);color:#fff}
.g-flow b{font:500 15px/1.2 var(--f-d)}
.g-flow small{font-size:12px;line-height:1.35;opacity:.92}
.g-flow .ar{display:grid;place-items:center;color:var(--mute);font:500 20px/1 var(--f-d)}
.g-flow .tag{font:800 10px/1.2 var(--f-b);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.g-rules{display:grid;gap:8px;font-size:13.5px;line-height:1.45;padding:0;margin:0;list-style:none}
.g-rules li{display:grid;grid-template-columns:24px 1fr;gap:8px}
.g-rules li i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--g2-soft);color:var(--g2);font:800 11px/1 var(--f-b)}
.g-cta.g2{background:var(--g2-grad);box-shadow:0 12px 26px rgba(14,124,123,.28)}
/* chừa chỗ cho nút nổi của Netlify ở góc phải dưới, không che nút bấm cuối trang */
.g-in{padding-bottom:96px}

/* màn đầu chia tầng + chơi thử (anh Lâm 2026-10-20) */
.g-prz .hook{display:block;font:500 19px/1.15 var(--f-d);letter-spacing:-.02em}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.g-3>div{display:grid;gap:4px;align-content:start;text-align:center;justify-items:center}
.g-3 em{font-style:normal;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font:500 17px/1 var(--f-d)}
.g-3 .i1{background:var(--red-soft);color:var(--red)}.g-3 .i2{background:var(--g2-soft);color:var(--g2)}.g-3 .i3{background:linear-gradient(150deg,#E8352A,#B80904);color:#fff}
.g-3 b{font:500 13.5px/1.2 var(--f-d)}
.g-3 span{font-size:11.5px;line-height:1.35;color:var(--mute)}
.g-try{display:grid;gap:10px;border:1.5px dashed rgba(14,124,123,.35)}
.g-try .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.g-try h3{font:400 16.5px/1.2 var(--f-d)}
.g-try .tag{font:800 10.5px/1 var(--f-b);letter-spacing:.06em;padding:5px 8px;border-radius:999px;background:var(--g2-soft);color:var(--g2);white-space:nowrap}
.g-try .g-qn{font:500 15px/1.35 var(--f-d);color:var(--ink)}
.g-try .step{font-size:13px;line-height:1.4}
.g-try .step.s1 b{color:var(--red)}.g-try .step.s2 b{color:var(--g2)}
.g-opts.sm .g-opt{min-height:46px;padding:9px 10px;font-size:13px}
.g-opts.sm .g-opt em{width:26px;height:26px}
.g-res{display:grid;gap:3px;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.4}
.g-res b{font:500 18px/1.1 var(--f-d)}
.g-res.y{background:#EAF6EF;color:#14502F}.g-res.n{background:#F6F3F4;color:var(--ink)}
.g-more{display:grid;gap:12px;margin-top:10px}
.g-more>.g-card{box-shadow:none;border:1px solid rgba(27,30,43,.08);padding:13px}
.g-gift{display:grid;gap:8px}
.g-gift h3{font:400 16.5px/1.2 var(--f-d)}
.g-gift ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13px;line-height:1.45}
details.g-full summary{color:var(--g2)}

/* luật 2: thanh tiến độ 4 chặng, câu phụ đoán số người (anh Lâm 2026-10-20) */
.g-prog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.g-prog i{height:5px;border-radius:5px;background:#EDE9EA}
.g-prog i.on{background:var(--red)}
.g-who.me .big{font-size:21px}
.g-mine{display:grid;gap:6px}
.g-mine>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.g-mine>div>span{display:grid;gap:2px;justify-items:center;border-radius:14px;padding:8px;background:var(--red-soft)}
.g-mine>div small{font:700 11px/1 var(--f-b);color:var(--mute)}
.g-mine>div b{font:500 20px/1 var(--f-d);color:var(--red)}
.g-so{display:grid;gap:8px;padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(14,124,123,.25)}
.g-so label{font:700 13px/1.2 var(--f-b)}
.g-so .r{display:grid;grid-template-columns:52px 1fr 52px;gap:8px}
.g-so .st{height:52px;border-radius:14px;background:var(--g2-soft);color:var(--g2);font:500 26px/1 var(--f-d)}
.g-so input{height:52px;border-radius:14px;border:1.5px solid rgba(14,124,123,.4);text-align:center;font:500 24px var(--f-d);color:var(--ink);width:100%;-moz-appearance:textfield}
.g-so input::-webkit-outer-spin-button,.g-so input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.g-so .q{display:flex;gap:6px;flex-wrap:wrap}
.g-so .q button{flex:1;min-width:48px;height:40px;border-radius:999px;border:1px solid rgba(27,30,43,.12);background:#fff;font:700 14px/1 var(--f-b)}
.g-so .q button[aria-pressed="true"]{background:var(--g2);border-color:var(--g2);color:#fff}
.g-so small{font-size:12px;color:var(--mute)}