.tl-cn {
  --s: min(80vmin, 470px);
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 46%, rgba(6, 22, 36, 0.7), rgba(2, 6, 12, 0.93) 72%);
  font-family: var(--font-serif, Georgia, serif);
  animation: tl-cn-vao 0.28s ease-out;
}
.tl-cn.hidden, .tl-man.hidden, .tl-cn .hidden { display: none; }
@keyframes tl-cn-vao { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.tl-cn-hop { position: relative; width: var(--s); height: var(--s); margin-bottom: calc(var(--s) * 0.07); }
.tl-cn-vong { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-cn-cung { filter: drop-shadow(0 0 5px rgba(90, 210, 255, 0.95)) drop-shadow(0 0 16px rgba(30, 130, 255, 0.55)); }
.tl-cn.khan .tl-cn-cung { animation: tl-cn-khan 0.45s ease-in-out infinite alternate; }
@keyframes tl-cn-khan {
  to { filter: drop-shadow(0 0 5px rgba(255, 160, 90, 0.95)) drop-shadow(0 0 16px rgba(255, 90, 50, 0.6)); }
}
.tl-cn-giua {
  position: absolute; left: 14%; right: 14%; top: 13%; bottom: 31%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #f4edd9; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.tl-cn-bieu { width: calc(var(--s) * 0.175); height: calc(var(--s) * 0.175); margin-bottom: calc(var(--s) * 0.035); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.tl-cn-bieu svg { display: block; width: 100%; height: 100%; }
.tl-cn-tieude {
  margin: 0; font-weight: 700; font-size: calc(var(--s) * 0.066); line-height: 1.08; letter-spacing: 0.045em;
  font-family: var(--font-serif, Georgia, serif);
}
.tl-cn-phu {
  margin: calc(var(--s) * 0.022) 0 0; font-weight: 600; font-size: calc(var(--s) * 0.026); line-height: 1.25;
  letter-spacing: 0.12em; color: #b3c3c6; text-transform: uppercase;
}
.tl-cn-chip { display: flex; gap: calc(var(--s) * 0.012); margin-top: calc(var(--s) * 0.028); min-height: calc(var(--s) * 0.03); flex-wrap: wrap; justify-content: center; }
.tl-cn-chip span { width: calc(var(--s) * 0.03); height: calc(var(--s) * 0.03); border-radius: 2px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.tl-cn-chip span.on { background: linear-gradient(#8aeaff, #2aa6d8); border-color: #c2f5ff; box-shadow: 0 0 7px rgba(80, 210, 255, 0.85); }
.tl-cn-dem { margin: calc(var(--s) * 0.014) 0 0; font-size: calc(var(--s) * 0.026); letter-spacing: 0.04em; color: #96aab0; font-variant-numeric: tabular-nums; }
.tl-cn.ket .tl-cn-tieude { color: #ffb69b; }
.tl-cn.ket .tl-cn-bieu { filter: grayscale(0.7) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.tl-cn.chia .tl-cn-chip span { animation: tl-cn-chia 1.1s ease-in-out infinite; }
@keyframes tl-cn-chia { 50% { transform: translateY(-40%); opacity: 0.5; } }
.tl-cn-nut {
  position: absolute; left: 50%; bottom: calc(var(--s) * 0.02); transform: translateX(-50%);
  width: calc(var(--s) * 0.5); height: calc(var(--s) * 0.115); padding: 0; border: 0; background: none; cursor: pointer;
  color: #f1ebd6; font-weight: 700; font-size: calc(var(--s) * 0.04); line-height: 1; letter-spacing: 0.1em;
  font-family: var(--font-serif, Georgia, serif); text-shadow: 0 1px 3px #000;
  -webkit-tap-highlight-color: transparent;
}
.tl-cn-nut::before, .tl-cn-nut::after {
  content: ''; position: absolute; clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}
.tl-cn-nut::before { inset: 0; background: linear-gradient(#dcbd6e, #86672a); }
.tl-cn-nut::after { inset: 2px; background: linear-gradient(#37596f, #1c3140 55%, #14242f); transition: background 0.15s ease; }
.tl-cn-nut span { position: relative; z-index: 1; }
.tl-cn-nut:not(:disabled) { animation: tl-cn-nhip 1.5s ease-in-out infinite; }
.tl-cn-nut:not(:disabled):hover::after, .tl-cn-nut:not(:disabled):focus-visible::after { background: linear-gradient(#4b7a96, #254a5f 55%, #193645); }
.tl-cn-nut:not(:disabled):active { transform: translateX(-50%) translateY(1px) scale(0.99); }
.tl-cn-nut:disabled { cursor: default; filter: grayscale(0.55) brightness(0.8); }
.tl-cn-nut.da::after { background: linear-gradient(#3b4751, #222b33); }
@keyframes tl-cn-nhip { 50% { filter: drop-shadow(0 0 9px rgba(90, 205, 255, 0.85)); } }
.tl-cn-tu {
  position: absolute; left: 50%; bottom: calc(var(--s) * -0.085); transform: translateX(-50%);
  min-width: calc(var(--s) * 0.26); height: calc(var(--s) * 0.066); padding: 0 14px;
  font-weight: 700; font-size: calc(var(--s) * 0.025); line-height: 1; letter-spacing: 0.14em; white-space: nowrap;
  font-family: var(--font-serif, Georgia, serif); color: #b5ab8e; cursor: pointer;
  background: rgba(8, 14, 20, 0.92); border: 1px solid #6e603f;
  transition: color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tl-cn-tu:hover, .tl-cn-tu:focus-visible { color: #f0e6c4; border-color: #b9a064; }
.tl-man {
  --cw: 150px; --ch: 208px; --gap: 8px; --k: 5;
  position: fixed; inset: 0; z-index: 1190;
  display: flex; flex-direction: column;
  background: #050f14; color: #ece4cc; overflow: hidden;
  font-family: var(--font-serif, Georgia, serif);
  animation: tl-man-vao 0.35s ease-out;
}
.tl-man.dong { opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
@keyframes tl-man-vao { from { opacity: 0; } to { opacity: 1; } }
.tl-man-nen { position: absolute; inset: 0; }
.tl-man-nen svg { display: block; width: 100%; height: 100%; }
.tl-man-suong {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 10, 14, 0.6), rgba(3, 10, 14, 0.12) 30%, rgba(3, 10, 14, 0.12) 70%, rgba(3, 10, 14, 0.65));
}
.tl-man-dau { position: relative; z-index: 1; text-align: center; padding: max(8px, env(safe-area-inset-top, 0px)) 12px 0; }
.tl-man-dau strong { display: block; font-size: clamp(12px, 2.6vmin, 20px); letter-spacing: 0.22em; color: #e0c986; text-shadow: 0 2px 8px #000; }
.tl-man-dau small { display: block; margin-top: 2px; font-size: clamp(10px, 1.9vmin, 14px); letter-spacing: 0.08em; color: #aebfc2; text-shadow: 0 1px 4px #000; }
.tl-man-san { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 1vh, 10px); }
.tl-man-doi { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: calc(var(--k, 5) * var(--cw) + (var(--k, 5) - 1) * var(--gap)); max-width: 100%; }
.tl-man-vs { display: flex; align-items: center; gap: 12px; width: min(92%, 860px); }
.tl-man-vs i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #b99a4c, transparent); }
.tl-man-vs b { font-size: clamp(12px, 2.6vmin, 22px); letter-spacing: 0.22em; color: #e6cf88; text-shadow: 0 2px 8px #000; }
.tl-man-chan { position: relative; z-index: 1; padding: 6px 16px max(10px, env(safe-area-inset-bottom, 0px)); text-align: center; }
.tl-man-thanh { width: min(72%, 560px); height: 4px; margin: 0 auto 5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.14); }
.tl-man-thanh i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2a9ed6, #a2ecff); box-shadow: 0 0 8px rgba(100, 210, 255, 0.8); transition: width 0.25s linear; }
.tl-man-chan span { font-size: clamp(10px, 1.9vmin, 14px); letter-spacing: 0.1em; color: #b7c6c9; text-shadow: 0 1px 4px #000; font-variant-numeric: tabular-nums; }
.tl-the {
  position: relative; flex: none; width: var(--cw); height: var(--ch); padding: 2px; border-radius: 7px;
  background: linear-gradient(155deg, var(--v2), var(--v1) 38%, #2b2314 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.6);
  font-size: max(8px, calc(var(--cw) * 0.088));
  animation: tl-the-vao 0.5s ease-out both;
}
.tl-the.d0 { --v1: #2f74c6; --v2: #a7d4ff; --n1: #0c2342; --n2: #1d5aa6; --glow: rgba(90, 170, 255, 0.55); }
.tl-the.d1 { --v1: #c4452f; --v2: #ffbfae; --n1: #3f110d; --n2: #a02d1a; --glow: rgba(255, 120, 90, 0.55); }
.tl-the.la-minh { box-shadow: 0 0 0 2px #f2d27a, 0 0 18px 2px rgba(255, 214, 120, 0.6), 0 6px 20px rgba(0, 0, 0, 0.65); }
.tl-man-doi .tl-the:nth-child(2) { animation-delay: 0.05s; }
.tl-man-doi .tl-the:nth-child(3) { animation-delay: 0.1s; }
.tl-man-doi .tl-the:nth-child(4) { animation-delay: 0.15s; }
.tl-man-doi .tl-the:nth-child(5) { animation-delay: 0.2s; }
.tl-man-doi .tl-the:nth-child(6) { animation-delay: 0.25s; }
@keyframes tl-the-vao { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.tl-the-trong { position: absolute; inset: 2px; border-radius: 5px; overflow: hidden; background: #0a1118; }
.tl-the-nen { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 64%, var(--glow), transparent 62%), linear-gradient(180deg, var(--n1), var(--n2) 88%); }
.tl-the-nen::after {                                   
  content: ''; position: absolute; left: 50%; bottom: 17%; width: 30%; height: 54%; transform: translateX(-50%);
  border-radius: 42% 42% 8% 8%; background: rgba(0, 0, 0, 0.32); filter: blur(2px); animation: tl-the-nhap 1.2s ease-in-out infinite;
}
.tl-the.co-hinh .tl-the-nen::after { display: none; }
@keyframes tl-the-nhap { 50% { opacity: 0.45; } }
.tl-the-tong { position: absolute; left: 50%; top: 42%; width: 74%; height: auto; transform: translate(-50%, -50%); opacity: 0.16; image-rendering: pixelated; pointer-events: none; }
.tl-the-hinh {
  position: absolute; left: 50%; bottom: 17%; height: 62%; width: auto; transform: translateX(-50%);
  image-rendering: pixelated; opacity: 0; transition: opacity 0.35s ease; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}
.tl-the.co-hinh .tl-the-hinh { opacity: 1; }
.tl-the-tren {
  position: absolute; left: 0; right: 0; top: 0; padding: 0.5em 0.5em 1.1em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.72em; letter-spacing: 0.1em; color: #e8dcb4; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
}
.tl-the-tren .tl-the-canh { display: block; overflow: hidden; text-overflow: ellipsis; }
.tl-the-tai {
  position: absolute; left: 0.5em; top: 2em; width: 2.2em; height: 2.2em; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.22); border-top-color: #8fe4ff; background: rgba(0, 0, 0, 0.5);
  animation: tl-quay 0.9s linear infinite; display: flex; align-items: center; justify-content: center;
}
.tl-the-tai::after { content: attr(data-pc); position: absolute; font-style: normal; font-size: 0.52em; font-weight: 700; color: #d6f4ff; animation: tl-quay-nguoc 0.9s linear infinite; }
.tl-the.tai .tl-the-tai { animation: none; border-color: #6ee7a8; background: rgba(8, 60, 40, 0.75); }
.tl-the.tai .tl-the-tai::after { content: '✓'; animation: none; font-size: 0.95em; color: #b8ffd9; }
@keyframes tl-quay { to { transform: rotate(360deg); } }
@keyframes tl-quay-nguoc { to { transform: rotate(-360deg); } }
.tl-the-hang {
  position: absolute; right: 0.45em; top: 2.05em; padding: 0.12em 0.5em; border-radius: 3px; font-style: normal; font-weight: 700; font-size: 0.7em;
  background: linear-gradient(#e9cb6b, #a17d28); color: #2a1d06; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.tl-the-hang.moi { background: linear-gradient(#90b6c6, #4c6b7a); color: #06151d; }
.tl-the-ban {
  position: absolute; left: 50%; top: 2.05em; transform: translateX(-50%); padding: 0.06em 0.6em; border-radius: 2px;
  font-style: normal; font-weight: 800; font-size: 0.6em; letter-spacing: 0.2em; background: #f2d27a; color: #2a1d06;
}
.tl-the-duoi {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5em; padding: 0.7em 0.55em 0.55em;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.62) 72%, transparent);
}
.tl-the-cap {
  flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95em; font-weight: 700;
  background: radial-gradient(circle at 35% 30%, #1b3d57, #0a1824); border: 2px solid #b79a4a; color: #f3e6b4; box-shadow: 0 0 8px var(--glow);
}
.tl-the-ten { min-width: 0; flex: 1; line-height: 1.15; text-align: left; }
.tl-the-ten strong { display: block; font-size: 0.92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-shadow: 0 1px 3px #000; }
.tl-the-ten small { display: block; font-size: 0.62em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c8d4d8; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .tl-cn, .tl-man, .tl-the, .tl-cn-nut:not(:disabled), .tl-cn.khan .tl-cn-cung, .tl-the-nen::after,
  .tl-cn.chia .tl-cn-chip span { animation: none; }
  .tl-the-tai { animation-duration: 2.4s; }
}