/* LÕI — hệ thiết kế dùng chung. Xem HOP-DONG.md mục 4. */
:root {
  --nen: #5b3df5; --nen-2: #1fb6ff;
  --mat: #ffffff; --mat-2: #f3f1ff;
  --chu: #23194d; --chu-nhat: #6b6493;
  --chinh: #7c5cff; --phu: #ff5ca8; --xanh: #1fb6ff; --la: #20c997; --vang: #ffd43b; --cam: #ff922b; --do: #fa5252;
  --ban-go: #e9b872; --ban-go-dam: #b9783a;
  --ni: #148a5c; --ni-dam: #0b5e3e;
  --bo: 14px; --bo-lon: 24px;
  --bong: 0 4px 14px rgba(35, 25, 77, .18);
  --bong-lon: 0 14px 40px rgba(35, 25, 77, .30);
  --font: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mau-ghe-0: #ff5c5c; --mau-ghe-1: #2f7cff; --mau-ghe-2: #20c997; --mau-ghe-3: #ffb020; --mau-ghe-4: #b45cff; --mau-ghe-5: #ff7ac8;
  --rong-bai: 80px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--chu); overflow: hidden;
  background: radial-gradient(1200px 700px at 15% 10%, #8a6bff 0%, transparent 60%),
              radial-gradient(900px 600px at 90% 90%, #29d3ff 0%, transparent 60%),
              linear-gradient(135deg, var(--nen), var(--nen-2));
  -webkit-tap-highlight-color: transparent; user-select: none;
}
button { font-family: inherit; }

/* Nút */
.th-nut {
  --c: var(--chinh);
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  border: 0; border-radius: 999px; padding: .7em 1.4em; font-weight: 700; font-size: 1rem;
  color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 65%, #000), var(--bong);
  cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s;
}
.th-nut:hover { filter: brightness(1.07); transform: translateY(-1px); }
.th-nut:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 65%, #000), var(--bong); }
.th-nut:disabled { filter: grayscale(.8) opacity(.6); cursor: default; transform: none; }
.th-nut.phu { --c: var(--phu); } .th-nut.la { --c: var(--la); } .th-nut.cam { --c: var(--cam); } .th-nut.do { --c: var(--do); }
.th-nut.vien { background: var(--mat); color: var(--chinh); box-shadow: inset 0 0 0 2px var(--chinh), var(--bong); }
.th-nut.nho { padding: .45em .9em; font-size: .88rem; }
.th-nut.lon { padding: .9em 2em; font-size: 1.2rem; }
.th-nut.tron { width: 2.6em; height: 2.6em; padding: 0; }

.th-the { background: var(--mat); border-radius: var(--bo-lon); box-shadow: var(--bong-lon); padding: 18px; }
.th-ban-go {
  background: repeating-linear-gradient(92deg, rgba(0,0,0,.035) 0 3px, transparent 3px 11px),
              linear-gradient(135deg, #f1c98a, var(--ban-go) 55%, #d9a05c);
  box-shadow: inset 0 0 0 6px var(--ban-go-dam), var(--bong-lon); border-radius: var(--bo);
}
.th-ni { background: radial-gradient(ellipse at center, #1db574 0%, var(--ni) 55%, var(--ni-dam) 100%); }
.th-token {
  --c: var(--mau-ghe-0);
  border-radius: 50%; aspect-ratio: 1;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 -3px 4px rgba(0,0,0,.2);
}
.th-hop-nen { position: fixed; inset: 0; background: rgba(20, 10, 60, .45); display: flex; align-items: center; justify-content: center; z-index: 900; backdrop-filter: blur(3px); }
.th-hop { background: var(--mat); border-radius: var(--bo-lon); box-shadow: var(--bong-lon); padding: 22px 24px; min-width: min(360px, 92vw); max-width: 92vw; max-height: 90vh; overflow: auto; }
.th-hop h2 { margin: 0 0 10px; font-size: 1.35rem; }
.th-hop .nut-hang { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.th-o-nhap { font: inherit; padding: .65em .9em; border-radius: 12px; border: 2px solid #ddd8ff; width: 100%; outline: none; color: var(--chu); }
.th-o-nhap:focus { border-color: var(--chinh); }

/* Thông báo */
#th-thong-bao { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.th-tb { background: rgba(35,25,77,.92); color: #fff; padding: .6em 1.2em; border-radius: 999px; font-weight: 600; box-shadow: var(--bong); }

/* Lớp hiệu ứng */
#th-fx { position: fixed; inset: 0; pointer-events: none; z-index: 950; overflow: hidden; }
.th-chu-noi { position: absolute; font-weight: 800; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.25); white-space: nowrap; }
.th-hat { position: absolute; width: 10px; height: 10px; border-radius: 2px; will-change: transform, opacity; }

/* Lá bài tây */
.th-bai { width: var(--rong-bai); aspect-ratio: 5/7; position: relative; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.3,.5,1); flex: none; }
.th-bai.up { transform: rotateY(180deg); }
.th-bai > .mat, .th-bai > .lung { position: absolute; inset: 0; border-radius: calc(var(--rong-bai) * .09); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.th-bai > .lung { background: repeating-linear-gradient(45deg, #ff5ca8 0 6px, #e8418f 6px 12px); border: calc(var(--rong-bai) * .05) solid #fff; }
.th-bai > .lung::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: calc(var(--rong-bai) * .4); opacity: .85; }
.th-bai > .mat { background: linear-gradient(160deg, #fff, #f4f2fb); transform: rotateY(180deg); color: #1d1d1d; font-weight: 800; }
.th-bai > .mat.do { color: #e8212e; }
.th-bai .goc { position: absolute; left: 7%; top: 4%; line-height: .95; text-align: center; font-size: calc(var(--rong-bai) * .22); }
.th-bai .goc.duoi { left: auto; top: auto; right: 7%; bottom: 4%; transform: rotate(180deg); }
.th-bai .goc small { display: block; font-size: .8em; }
.th-bai .giua { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--rong-bai) * .5); }
.th-bai .giua.mat-nguoi { font-size: calc(var(--rong-bai) * .42); }
.th-bai.chon { transform: rotateY(180deg) translateY(-18%); }
.th-bai.chon > .mat { box-shadow: 0 0 0 3px var(--vang), 0 8px 14px rgba(0,0,0,.35); }

/* Xúc xắc */
.th-xx { --s: 56px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); }
.th-xx .m { position: absolute; inset: 0; background: linear-gradient(145deg, #fff, #ece8ff); border-radius: 18%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; }
.th-xx .m span { display: flex; align-items: center; justify-content: center; }
.th-xx .m i { width: 70%; aspect-ratio: 1; border-radius: 50%; background: #2b2250; place-self: center; }
.th-xx .m.m1 i { background: var(--do); width: 85%; }
.th-xx .m1 { transform: translateZ(calc(var(--s)/2)); }
.th-xx .m6 { transform: rotateY(180deg) translateZ(calc(var(--s)/2)); }
.th-xx .m2 { transform: rotateY(90deg) translateZ(calc(var(--s)/2)); }
.th-xx .m5 { transform: rotateY(-90deg) translateZ(calc(var(--s)/2)); }
.th-xx .m3 { transform: rotateX(90deg) translateZ(calc(var(--s)/2)); }
.th-xx .m4 { transform: rotateX(-90deg) translateZ(calc(var(--s)/2)); }
.cl0 .th-xx .m { box-shadow: none; }
.cl0 *, .cl0 *::before, .cl0 *::after { backdrop-filter: none !important; }
/* Lá bài dùng ảnh Blender */
.th-bai > .lung.anh, .th-bai > .mat.anh { background-color: transparent; border: 0; background-repeat: no-repeat; }
.th-bai > .lung.anh::after { content: none; }