/* Xưởng Trò Chơi — bộ khung chung
   Bảng màu sơn mài: đen then, son đỏ, vàng ta, xanh ngọc, vỏ trứng.
   Chủ ý dùng một tông tối duy nhất cho toàn bộ game — mọi màu đều đặt tường minh. */

:root{
  --lac:#12100E;
  --lac-2:#1C1916;
  --lac-3:#28231E;
  --lac-4:#37302A;
  --son:#D6452F;
  --son-dim:#9E3323;
  --vang:#E0B23C;
  --ngoc:#3E9B84;
  --trung:#F0E6D2;
  --trung-2:#B5A992;
  --trung-3:#7B7364;
  --warn:#C4633A;
  --r:4px;
  --shell:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  margin:0;color:var(--trung);
  background:var(--lac) radial-gradient(1100px 640px at 50% -12%, #1B1712, var(--lac) 62%) fixed;
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:var(--vang);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--vang);outline-offset:2px}

/* ---------- vỏ chung ---------- */
.shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{
  height:var(--shell);flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:0 14px;border-bottom:1px solid var(--lac-3);background:var(--lac-2);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;font-size:.95rem;color:var(--trung);min-height:44px}
.topbar .mark{width:22px;height:22px;flex:0 0 auto;display:block}
.topbar .spacer{flex:1}
@media (max-width:460px){.brand span{display:none}}
.tb-btn{
  font-size:.78rem;font-weight:600;color:var(--trung-2);
  border:1px solid var(--lac-4);border-radius:var(--r);padding:0 11px;transition:.15s;
  min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
}
.tb-btn.icon{padding:0 9px}
.tb-btn:active{transform:scale(.96)}
.tb-btn:hover{color:var(--trung);border-color:var(--trung-3)}
.tb-btn.on{color:var(--lac);background:var(--vang);border-color:var(--vang)}

.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px;gap:12px;min-height:0}

/* ---------- bảng số liệu ---------- */
.hud{display:flex;gap:8px;width:100%;max-width:520px}
.stat{
  flex:1;background:var(--lac-2);border:1px solid var(--lac-3);border-radius:var(--r);
  padding:7px 11px;min-width:0;
}
.stat .k{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--trung-3);font-weight:600}
.stat .v{font-family:"IBM Plex Mono",monospace;font-size:1.3rem;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.stat.hi .v{color:var(--vang)}
.stat.day .v{color:var(--ngoc);font-size:.95rem;padding-top:5px}

/* ---------- khung game ---------- */
.board{
  position:relative;background:var(--lac-2);border:1px solid var(--lac-3);
  border-radius:var(--r);overflow:hidden;touch-action:none;
  box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(240,230,210,.05);
}
canvas{display:block;width:100%;height:100%}

.over{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(18,16,14,.93);padding:24px;text-align:center;
}
.over.show{display:flex;animation:overIn .26s cubic-bezier(.2,.9,.3,1)}
@keyframes overIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.over .big{animation:pop .34s cubic-bezier(.2,1.5,.4,1) .06s backwards}
@keyframes pop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
.over h2{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.over .big{font-family:"IBM Plex Mono",monospace;font-size:3rem;font-weight:600;line-height:1;color:var(--vang)}
.over p{margin:0;color:var(--trung-2);font-size:.9rem;max-width:32ch}
.row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.btn{
  font-size:.88rem;font-weight:700;padding:0 20px;border-radius:var(--r);
  background:var(--son);color:#fff;transition:transform .12s cubic-bezier(.2,.9,.3,1),background .15s;
  min-height:46px;display:inline-flex;align-items:center;justify-content:center;
}
.btn:active{transform:scale(.96)}
.btn:hover{background:#E4553E}
.btn.ghost{background:transparent;color:var(--trung-2);border:1px solid var(--lac-4)}
.btn.ghost:hover{color:var(--trung);border-color:var(--trung-3)}

.hint{font-size:.78rem;color:var(--trung-3);text-align:center;max-width:44ch}

/* ---------- dải game khác ---------- */
.more{width:100%;max-width:760px;margin:6px auto 0;padding:14px;border-top:1px solid var(--lac-3)}
.more h3{margin:0 0 10px;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--trung-3);font-weight:700}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.tile{
  display:flex;align-items:center;gap:9px;min-height:52px;background:var(--lac-2);border:1px solid var(--lac-3);
  border-radius:var(--r);padding:9px 11px;transition:.15s;color:var(--trung);
}
.tile:hover{border-color:var(--trung-3);background:var(--lac-3)}
.tile .ico{font-size:1.25rem;line-height:1}
.tile .nm{font-size:.84rem;font-weight:600;line-height:1.2;display:block}
.tile .sb{font-size:.68rem;color:var(--trung-3);display:block}
.tile.soon{opacity:.45;pointer-events:none}

/* ---------- thông báo ---------- */
#toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);
  background:var(--vang);color:var(--lac);font-weight:700;font-size:.82rem;
  padding:9px 16px;border-radius:var(--r);opacity:0;pointer-events:none;transition:.22s;z-index:50;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- trang tổng ---------- */
.hero{max-width:760px;margin:0 auto;padding:40px 16px 18px}
.hero h1{margin:0;font-size:clamp(1.9rem,6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--son)}
.hero p{margin:14px 0 0;color:var(--trung-2);max-width:52ch;font-size:1rem}
.hero .seed{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ngoc);border:1px solid var(--lac-4);border-radius:var(--r);padding:5px 11px}
.grid{max-width:760px;margin:0 auto;padding:18px 16px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.card{
  display:block;background:linear-gradient(165deg,var(--lac-3),var(--lac-2) 55%);
  border:1px solid var(--lac-3);border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.05), 0 6px 18px rgba(0,0,0,.3);
  padding:16px 17px;transition:.18s;color:var(--trung);position:relative;overflow:hidden;
}
.card:hover{border-color:var(--trung-3);transform:translateY(-2px)}
.card:active{transform:translateY(0) scale(.99)}
.card .ico{font-size:1.9rem;line-height:1;display:block;margin-bottom:10px}
.card h2{margin:0;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.card .en{font-size:.72rem;color:var(--trung-3);margin-top:1px}
.card p{margin:9px 0 0;font-size:.84rem;color:var(--trung-2);line-height:1.45}
.card .best{margin-top:11px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--vang)}
.card.soon{opacity:.42}
.card.soon:hover{transform:none;border-color:var(--lac-3)}
.card .flag{position:absolute;top:12px;right:12px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--trung-3);border:1px solid var(--lac-4);border-radius:2px;padding:2px 6px}
.foot{max-width:760px;margin:0 auto;padding:0 16px 50px;font-size:.78rem;color:var(--trung-3);border-top:1px solid var(--lac-3);padding-top:16px}

.card{animation:cardIn .34s cubic-bezier(.2,.9,.3,1) backwards}
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.05s}
.card:nth-child(3){animation-delay:.08s}.card:nth-child(4){animation-delay:.11s}
.card:nth-child(5){animation-delay:.14s}.card:nth-child(6){animation-delay:.17s}
.card:nth-child(7){animation-delay:.20s}.card:nth-child(8){animation-delay:.23s}
.card:nth-child(9){animation-delay:.26s}.card:nth-child(10){animation-delay:.29s}
.card:nth-child(11){animation-delay:.32s}.card:nth-child(12){animation-delay:.35s}
.card:nth-child(13){animation-delay:.38s}.card:nth-child(14){animation-delay:.41s}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Bảng thang quả / tiến độ dùng chung */
.ladder{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:520px;width:100%}
.ladder span{width:13px;height:13px;border-radius:50%;border:1px solid var(--lac-4);transition:.25s}
.ladder span.on{border-color:transparent;transform:scale(1.12)}

/* ---------- Chia Chỗ: giao diện bằng DOM để dùng được bàn phím ---------- */
.seatgame{width:100%;max-width:520px;display:flex;flex-direction:column;gap:13px}
.bus{background:var(--lac-2);border:1px solid var(--lac-3);border-radius:var(--r);padding:14px 12px;transition:border-color .3s}
.busline{height:3px;background:linear-gradient(90deg,transparent,var(--ngoc),transparent);opacity:.5;margin:0 0 11px;border-radius:2px}
.seats{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.seat{width:50px;height:56px;min-height:56px;border:1px solid var(--lac-4);border-radius:7px;
  background:linear-gradient(180deg,var(--lac-4),var(--lac-3) 55%);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.08), 0 3px 8px rgba(0,0,0,.3);
  position:relative;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.seat.win{border-top:3px solid var(--ngoc)}
.seat.hot{border-color:var(--vang);background:var(--lac-4)}
.seat:active{transform:scale(.95)}
.seat em{position:absolute;bottom:3px;right:5px;font-style:normal;font-size:.58rem;color:var(--trung-3);
  font-family:"IBM Plex Mono",monospace}
.pg{width:26px;height:26px;display:inline-block}
.pg.tron{border-radius:50%}
.pg.vuong{border-radius:3px}
.pg.tamgiac{clip-path:polygon(50% 4%,100% 100%,0 100%)}
.pg.sm{width:15px;height:15px;flex:0 0 auto}
.bench{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;min-height:52px;align-items:center}
.chip{width:48px;height:48px;min-height:48px;border:1px solid var(--lac-4);border-radius:8px;
  background:linear-gradient(180deg,var(--lac-3),var(--lac-2));
  box-shadow:inset 0 1px 0 rgba(240,230,210,.07), 0 3px 8px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.chip.sel{border-color:var(--vang);background:var(--lac-3);transform:translateY(-3px)}
.allin{font-size:.8rem;color:var(--trung-3)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.rules li{display:flex;align-items:center;gap:9px;font-size:.85rem;background:var(--lac-2);
  border:1px solid var(--lac-3);border-radius:var(--r);padding:7px 10px;color:var(--trung-2);transition:.2s}
.rules li.ok{border-color:#2C7355;color:var(--trung)}
.rules li b{margin-left:auto;color:var(--trung-3);font-size:.9rem}
.rules li.ok b{color:#5CB98E}
.seatgame.won .bus{border-color:var(--vang)}

/* ---------- góc riêng trên trang tổng ---------- */
.gift-wrap{max-width:760px;margin:0 auto;padding:8px 16px 40px}
.gift-wrap h2{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--trung-3);
  font-weight:700;margin:0 0 10px}
.gift{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(150deg,#241A2A,#1A1512);
  border:1px solid #4A3A58;border-radius:var(--r);padding:18px 19px;color:var(--trung);transition:.18s}
.gift:hover{border-color:#8C6A9E;transform:translateY(-2px)}
.gift .ico{font-size:2rem;line-height:1;flex:0 0 auto}
.gift h3{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.gift .en{font-size:.72rem;color:#9E86AC;margin-top:1px}
.gift .ded{margin:9px 0 0;font-size:.86rem;color:#C9AFD4;line-height:1.5}
.gift .go{margin-top:10px;font-size:.78rem;color:#C297B1;font-weight:600}

/* ---------- trang Làm thế nào ---------- */
.mk{max-width:720px;margin:0 auto;padding:34px 16px 70px}
.mk .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--trung-3);margin:0 0 10px}
.mk h1{margin:0;font-size:clamp(1.8rem,5.5vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.mk .lede{margin:14px 0 0;color:var(--trung-2);max-width:58ch;font-size:1rem;line-height:1.6}
.mk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:24px 0 8px}
.mk-stats div{background:var(--lac-2);border:1px solid var(--lac-3);border-radius:var(--r);padding:11px 13px}
.mk-stats b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.55rem;font-weight:600;
  line-height:1;color:var(--vang);font-variant-numeric:tabular-nums}
.mk-stats span{display:block;font-size:.74rem;color:var(--trung-3);margin-top:5px;line-height:1.3}
.mk-batch{margin-top:44px}
.mk-batch h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;
  padding-bottom:9px;border-bottom:2px solid var(--lac-4)}
.mk-batch h2 span{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;
  color:var(--trung-3);margin-left:7px;letter-spacing:0}
.mk-game{background:var(--lac-2);border:1px solid var(--lac-3);border-radius:var(--r);
  padding:15px 17px;margin-top:12px}
.mk-g-top{display:flex;align-items:baseline;gap:10px}
.mk-game h3{margin:0;font-size:1.02rem;font-weight:700}
.mk-lines{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--vang)}
.mk-block{margin-top:11px}
.mk-block b{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--trung-3);font-weight:700;margin-bottom:4px}
.mk-block blockquote{margin:0;padding:9px 12px;background:var(--lac-3);border-left:3px solid var(--ngoc);
  border-radius:0 var(--r) var(--r) 0;font-size:.9rem;line-height:1.5;color:var(--trung)}
.mk-block p{margin:0;font-size:.9rem;line-height:1.55;color:var(--trung-2)}
.mk-note{margin:14px 0 0;font-size:.88rem;color:var(--trung-2);line-height:1.55;
  border-left:2px solid var(--lac-4);padding-left:12px}
.mk-shared{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mk-shared li{display:flex;align-items:center;gap:12px;background:var(--lac-2);border:1px solid var(--lac-3);
  border-radius:var(--r);padding:9px 12px;font-size:.86rem}
.mk-shared code{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--vang);flex:0 0 auto}
.mk-shared span{color:var(--trung-2);line-height:1.35}
.mk-shared b{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--trung-3);flex:0 0 auto}
.mk-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--lac-3);
  font-size:.82rem;color:var(--trung-3);line-height:1.55}

/* ---------- Ghép Chữ ---------- */
.craft{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.bowl{display:flex;align-items:center;gap:8px;background:var(--lac-2);border:1px solid var(--lac-3);
  border-radius:var(--r);padding:12px 13px;flex-wrap:wrap;justify-content:center}
.slot,.out{flex:1 1 120px;min-height:56px;border:1px dashed var(--lac-4);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 8px;
  background:var(--lac);transition:.16s}
.slot.filled{border-style:solid;border-color:var(--trung-3)}
.out{border-style:solid;border-color:var(--lac-3)}
.out.good{border-color:#2C7355;background:#16241D}
.out.bad{border-color:var(--warn)}
.out.fresh{animation:pop .38s cubic-bezier(.2,1.5,.4,1)}
.bowl .plus,.bowl .eq{font-family:"IBM Plex Mono",monospace;color:var(--trung-3);font-size:1rem;flex:0 0 auto}
.ic{font-size:1.35rem;line-height:1.1}
.nm{font-size:.76rem;font-weight:600;text-align:center;line-height:1.2}
.ph{font-size:.72rem;color:var(--trung-3)}
.out .new{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vang);font-weight:700}
.craft-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.craft-bar input,.wbar input{flex:1 1 150px;min-height:44px;background:var(--lac-2);color:var(--trung);
  border:1px solid var(--lac-4);border-radius:var(--r);padding:0 12px;font-family:inherit;font-size:.86rem}
.craft-bar input::placeholder,.wbar input::placeholder{color:var(--trung-3)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;
  max-height:44vh;overflow-y:auto;padding-right:2px}
.el{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:62px;padding:7px 5px;
  background:linear-gradient(180deg,var(--lac-3),var(--lac-2));border:1px solid var(--lac-3);
  border-radius:var(--r);color:var(--trung);transition:.14s;
  box-shadow:inset 0 1px 0 rgba(240,230,210,.06), 0 2px 6px rgba(0,0,0,.25)}
.el:hover{border-color:var(--trung-3);background:var(--lac-3)}
.el:active{transform:scale(.95)}

/* ---------- Ngăn Nắp ---------- */
.tidy{width:100%;max-width:520px;background:var(--lac-2);border:1px solid var(--lac-3);
  border-radius:var(--r);padding:16px 14px;display:flex;flex-direction:column;gap:14px;transition:border-color .3s}
.tidy.won{border-color:var(--vang)}
.tidy h3{margin:0;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--trung-3);font-weight:700;text-align:center}
.shelf-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;align-items:flex-end;
  border-bottom:2px solid var(--lac-4);padding-bottom:9px}
.pslot{width:56px;height:64px;min-height:64px;border:1px dashed var(--lac-4);border-radius:6px;
  background:linear-gradient(180deg,#100E0B,var(--lac));box-shadow:inset 0 3px 9px rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center;padding:5px;transition:.15s}
.pslot.hot{border-color:var(--vang)}
.pslot.done{border-style:solid;border-color:#2C7355}
.pile{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:64px;align-items:flex-end}
.pitem{width:56px;height:64px;min-height:64px;border:1px solid var(--lac-4);border-radius:6px;
  background:linear-gradient(180deg,var(--lac-4),var(--lac-3));
  box-shadow:inset 0 1px 0 rgba(240,230,210,.07), 0 3px 8px rgba(0,0,0,.3);display:flex;align-items:flex-end;justify-content:center;padding:5px;transition:.15s}
.pitem.sel{border-color:var(--vang);transform:translateY(-4px)}
.ob{display:flex;align-items:center;justify-content:center}
.dots{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:5px}
.dots i{width:5px;height:5px;border-radius:50%;background:#2A2118;display:block}

/* ---------- Lối Tắt ---------- */
.wiki{width:100%;max-width:560px;display:flex;flex-direction:column;gap:10px}
.wtarget{display:flex;align-items:center;gap:9px;justify-content:center;flex-wrap:wrap;
  background:var(--lac-2);border:1px solid var(--lac-3);border-radius:var(--r);padding:10px 12px}
.wtarget .from{font-size:.9rem;font-weight:600;color:var(--trung-2)}
.wtarget .arrow{color:var(--trung-3)}
.wtarget .to{font-size:.95rem;font-weight:800;color:var(--vang)}
.wtrail{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:.74rem;color:var(--trung-3);
  font-family:"IBM Plex Mono",monospace}
.wtrail .hop.now{color:var(--ngoc)}
.wart{background:var(--lac-2);border:1px solid var(--lac-3);border-radius:var(--r);padding:13px 15px;
  min-height:96px}
.wart h3{margin:0 0 7px;font-size:1.06rem;font-weight:700}
.wart p{margin:0;font-size:.87rem;line-height:1.55;color:var(--trung-2)}
.wart .wwin{color:var(--vang);font-weight:600}
.wart .werr{color:var(--warn)}
.wart .wload{color:var(--trung-3)}
.wbar{display:flex;gap:9px;align-items:center}
.wcount{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--trung-3);flex:0 0 auto}
.wlinks{display:flex;flex-wrap:wrap;gap:5px;max-height:36vh;overflow-y:auto}
.wl{font-size:.82rem;padding:0 11px;min-height:36px;display:inline-flex;align-items:center;
  background:var(--lac-2);border:1px solid var(--lac-3);border-radius:16px;color:var(--trung-2);transition:.14s}
.wl:hover{border-color:var(--trung-3);color:var(--trung)}
.wl.goal{border-color:var(--vang);color:var(--vang);font-weight:700}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Đợt đồ họa 2 — cảnh cho 4 game DOM + trang tổng.
   Nguyên tắc như đợt 1: nguồn sáng trên-trái, bóng tiếp đất,
   gradient trên vật thể, chuyển động nhỏ và có chủ đích.
   ============================================================ */

/* ---------- trang tổng: lớp không khí + ánh đèn ---------- */
.hubfx{position:fixed;inset:0;z-index:0;pointer-events:none}
.hero,.grid,.gift-wrap,.foot{position:relative;z-index:1}
.hero{padding-top:48px}
.hero::before{
  content:"";position:absolute;top:-30px;left:8%;width:min(430px,72vw);height:230px;
  background:radial-gradient(closest-side,rgba(224,178,60,.13),transparent 70%);
  pointer-events:none;filter:blur(2px);
}
.hero h1 em{
  background:linear-gradient(100deg,var(--son) 20%,#E4553E 45%,var(--vang) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--son);
}
.hero .seed{position:relative;box-shadow:inset 0 1px 0 rgba(240,230,210,.05)}
.hero .seed::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ngoc);flex:0 0 auto;
  box-shadow:0 0 8px rgba(62,155,132,.8);animation:seedPulse 2.6s ease-in-out infinite;
}
@keyframes seedPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

.card{will-change:transform}
.card .ico{filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.card:hover .ico{transform:translateY(-2px) scale(1.06)}
.card::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(240,230,210,.05),transparent);
  transform:skewX(-18deg);transition:left .5s ease;pointer-events:none;
}
.card:hover::after{left:130%}
.card:hover{box-shadow:inset 0 1px 0 rgba(240,230,210,.07), 0 12px 30px rgba(0,0,0,.45)}
.gift .ico{filter:drop-shadow(0 0 10px rgba(140,106,158,.55));animation:giftGlow 3.4s ease-in-out infinite}
@keyframes giftGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(140,106,158,.35))}50%{filter:drop-shadow(0 0 14px rgba(140,106,158,.7))}}

/* ---------- Chia Chỗ: chuyến xe đêm ---------- */
.bus{
  border-radius:14px 14px 6px 6px;padding-top:10px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#211C17,var(--lac-2) 46%);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.06), 0 14px 34px rgba(0,0,0,.45);
}
.buswin{
  position:relative;height:46px;margin:0 2px 10px;border-radius:8px;overflow:hidden;
  border:1px solid #2E2822;
  background:
    radial-gradient(1.4px 1.4px at 12% 26%,rgba(240,230,210,.8),transparent 55%),
    radial-gradient(1.1px 1.1px at 33% 14%,rgba(240,230,210,.6),transparent 55%),
    radial-gradient(1.3px 1.3px at 56% 30%,rgba(240,230,210,.7),transparent 55%),
    radial-gradient(1px 1px at 76% 12%,rgba(240,230,210,.55),transparent 55%),
    radial-gradient(1.3px 1.3px at 91% 24%,rgba(240,230,210,.65),transparent 55%),
    linear-gradient(180deg,#0E1220,#18202B 70%,#131A22);
}
.buswin i{position:absolute;inset:0;background-repeat:repeat-x;background-position:0 100%}
.buswin .l1{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 44 Q30 26 60 40 T120 36 T180 44 T240 32 V60 H0 Z' fill='%231C2420'/%3E%3C/svg%3E");
  background-size:240px 46px;animation:busFar 26s linear infinite;opacity:.9;
}
.buswin .l2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60'%3E%3Cpath d='M0 52 Q25 38 50 48 T100 46 T150 52 T200 42 V60 H0 Z' fill='%23121712'/%3E%3C/svg%3E");
  background-size:200px 46px;animation:busNear 11s linear infinite;
}
@keyframes busFar{from{background-position-x:0}to{background-position-x:-240px}}
@keyframes busNear{from{background-position-x:0}to{background-position-x:-200px}}
.buswin .moon{
  position:absolute;top:6px;right:14%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#F4ECD9,#D9C89B 68%,#B9A97E);
  box-shadow:0 0 12px rgba(240,230,210,.4);
}
.busline{margin:0 2px 11px;background:repeating-linear-gradient(90deg,var(--ngoc) 0 14px,transparent 14px 26px);
  opacity:.45;animation:roadMove 1.1s linear infinite}
@keyframes roadMove{from{background-position-x:0}to{background-position-x:-26px}}
.seatgame.won .busline{animation-duration:.35s;opacity:.8}
.seatgame.won .buswin .l2{animation-duration:3.5s}
.seatgame.won .buswin .l1{animation-duration:9s}
.seat{
  background:linear-gradient(180deg,#453A30 0%,#37302A 34%,var(--lac-3) 100%);
  box-shadow:inset 0 2px 0 rgba(240,230,210,.1), inset 0 -6px 8px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.35);
}
.seat::before{
  content:"";position:absolute;top:6px;left:6px;right:6px;height:8px;border-radius:4px;
  background:linear-gradient(180deg,rgba(240,230,210,.09),transparent);pointer-events:none;
}
.seat.win{border-top:3px solid var(--ngoc);box-shadow:inset 0 2px 0 rgba(62,155,132,.25), inset 0 -6px 8px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.35)}
.seat.hot{border-color:var(--vang);box-shadow:inset 0 0 0 1px rgba(224,178,60,.35), inset 0 -6px 8px rgba(0,0,0,.3), 0 5px 12px rgba(0,0,0,.4);animation:seatHot 1s ease-in-out infinite}
@keyframes seatHot{0%,100%{border-color:var(--vang)}50%{border-color:#8A6E2A}}
.pg{
  box-shadow:inset -4px -5px 7px rgba(0,0,0,.30), inset 3px 4px 6px rgba(255,255,255,.20);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.32));
}
.pg.tamgiac{filter:drop-shadow(0 3px 2px rgba(0,0,0,.32))}
.chip.sel{animation:chipBob 1.1s ease-in-out infinite}
@keyframes chipBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(-6px)}}
.rules li.ok b{animation:pop .3s cubic-bezier(.2,1.5,.4,1)}

/* ---------- Ngăn Nắp: tủ gỗ dưới ánh đèn ---------- */
.tidy{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#231B12,#1A140D 78%);
  border-color:#3A2F21;
  box-shadow:inset 0 1px 0 rgba(240,230,210,.06), 0 14px 34px rgba(0,0,0,.5);
}
.tidy::before{
  content:"";position:absolute;top:-46px;left:16%;width:60%;height:120px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(224,178,60,.11),transparent 72%);
}
.shelf-row{
  border-bottom:0;padding-bottom:12px;position:relative;
}
.shelf-row::after{
  content:"";position:absolute;left:-6px;right:-6px;bottom:0;height:9px;border-radius:2px;
  background:linear-gradient(180deg,#6B5138,#584430 45%,#3E301F);
  box-shadow:0 4px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(240,230,210,.14);
}
.pslot{background:linear-gradient(180deg,#0E0B08,#141009);box-shadow:inset 0 4px 10px rgba(0,0,0,.55), inset 0 -1px 0 rgba(240,230,210,.03)}
.pslot .ob,.pitem .ob{filter:drop-shadow(0 4px 3px rgba(0,0,0,.4))}
.pslot.land .ob{animation:obLand .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes obLand{from{transform:translateY(-12px) scale(.9);opacity:.4}to{transform:none;opacity:1}}
.pitem{background:linear-gradient(180deg,#3E342A,#2B241D);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.09), 0 4px 9px rgba(0,0,0,.35)}
.pitem.sel{animation:chipBob 1.1s ease-in-out infinite}
.tidy.won::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(224,178,60,.12),transparent);
  transform:skewX(-16deg);animation:tidySweep .9s ease forwards;
}
@keyframes tidySweep{to{left:130%}}

/* ---------- Ghép Chữ: bàn pha chế ---------- */
.bowl{
  position:relative;overflow:hidden;
  background:radial-gradient(420px 130px at 50% 10%,rgba(224,178,60,.07),transparent 70%),var(--lac-2);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.06), 0 10px 26px rgba(0,0,0,.4);
}
.ic{filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.slot.filled{background:linear-gradient(180deg,#16130F,var(--lac));box-shadow:inset 0 3px 8px rgba(0,0,0,.4)}
.out.good{animation:outGood .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes outGood{
  0%{box-shadow:0 0 0 rgba(224,178,60,0)}
  35%{box-shadow:0 0 22px rgba(224,178,60,.4), inset 0 0 14px rgba(224,178,60,.12);transform:scale(1.04)}
  100%{box-shadow:0 0 0 rgba(224,178,60,0);transform:none}
}
.out.fresh{position:relative;overflow:hidden}
.out.fresh::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;
  background:linear-gradient(100deg,transparent,rgba(224,178,60,.22),transparent);
  transform:skewX(-18deg);animation:tidySweep .7s ease .1s forwards;pointer-events:none;
}
.el{position:relative}
.el:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(240,230,210,.08), 0 6px 12px rgba(0,0,0,.35)}
.el:active{transform:scale(.95)}

/* ---------- Lối Tắt: bàn đọc đêm ---------- */
.wtarget{
  background:linear-gradient(165deg,var(--lac-3),var(--lac-2) 60%);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.06), 0 8px 20px rgba(0,0,0,.35);
}
.wtarget .to{text-shadow:0 0 14px rgba(224,178,60,.35)}
.wtrail .hop{
  background:var(--lac-2);border:1px solid var(--lac-3);border-radius:12px;
  padding:2px 9px;transition:.2s;
}
.wtrail .hop.now{border-color:var(--ngoc);color:var(--ngoc);box-shadow:0 0 10px rgba(62,155,132,.25)}
.wtrail .sep{opacity:.5;padding:0 1px}
.wart{
  border-left:3px solid var(--ngoc);
  background:linear-gradient(180deg,#1E1A16,var(--lac-2) 42%);
  box-shadow:inset 0 1px 0 rgba(240,230,210,.05), 0 8px 22px rgba(0,0,0,.35);
}
.wart .wload{position:relative;overflow:hidden;display:block;padding-bottom:14px}
.wart .wload::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ngoc),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:wloadBar 1.1s ease-in-out infinite;opacity:.6;
}
@keyframes wloadBar{0%{background-position-x:-40%}100%{background-position-x:140%}}
.wl{box-shadow:0 2px 6px rgba(0,0,0,.22)}
.wl:hover{transform:translateY(-1px);box-shadow:0 5px 10px rgba(0,0,0,.3)}
.wl.goal{animation:goalPulse 1.8s ease-in-out infinite}
@keyframes goalPulse{0%,100%{box-shadow:0 0 0 rgba(224,178,60,0)}50%{box-shadow:0 0 14px rgba(224,178,60,.35)}}
.wiki.won .wtrail .hop{border-color:var(--vang);color:var(--vang);animation:hopGold .4s cubic-bezier(.2,1.4,.4,1) backwards}
.wiki.won .wtrail .hop:nth-child(odd){animation-delay:.05s}
.wiki.won .wtrail .hop:nth-child(1){animation-delay:0s}.wiki.won .wtrail .hop:nth-child(3){animation-delay:.08s}
.wiki.won .wtrail .hop:nth-child(5){animation-delay:.16s}.wiki.won .wtrail .hop:nth-child(7){animation-delay:.24s}
.wiki.won .wtrail .hop:nth-child(9){animation-delay:.32s}.wiki.won .wtrail .hop:nth-child(11){animation-delay:.40s}
@keyframes hopGold{from{transform:scale(.85)}to{transform:none}}