#tl-toast-clock { flex: none; color: #ffe08a; font-size: 17px; font-variant-numeric: tabular-nums; }
#tl-toast.urgent #tl-toast-clock, #tl-toast.urgent .dh-toast-pill b { color: #ff9f7a; }
#tamlo .btn-main, #tamlo .btn-sub, #tl-ketqua .btn-main {
  margin: 10px 0 0; border-radius: 6px; letter-spacing: 0.02em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.08s ease, opacity 0.2s ease;
}
#tamlo .btn-main, #tl-ketqua .btn-main { color: #fff0ca; background: #2f4a3a; border: 1px solid #6f8f67; box-shadow: none; }
#tamlo .btn-main:hover, #tamlo .btn-main:focus-visible, #tl-ketqua .btn-main:hover, #tl-ketqua .btn-main:focus-visible { background: #3b5c47; filter: none; }
#tamlo .btn-sub { color: #423321; background: linear-gradient(#dfd0ad, #c8b58e); border: 1px solid #8c7045; }
#tamlo .btn-sub:hover, #tamlo .btn-sub:focus-visible { background: #eadcb8; filter: none; }
#tamlo .btn-main:active, #tamlo .btn-sub:active, #tl-ketqua .btn-main:active { transform: scale(0.985); }
#tl-act[disabled] { opacity: 0.5; cursor: default; filter: none; }
@media (max-height: 520px), (max-width: 520px) {
  #tamlo .daihoi-panel > #tl-close, #tl-ketqua .daihoi-panel > #tl-kq-dong { position: sticky; bottom: 4px; z-index: 3; margin-bottom: 0; box-shadow: 0 -10px 12px -6px rgba(41, 32, 23, 0.95), 0 4px 0 0 #1d150e; }
  #tamlo .daihoi-panel, #tl-ketqua .daihoi-panel { padding-bottom: 0; }
}
.tl-kq-d0 { color: #a6d3ff; }
.tl-kq-d1 { color: #ffb597; }
#tl-hud {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px);
  transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  max-width: calc(100vw - 16px);
  font: 700 12px/1.2 var(--font-serif, serif); color: #f1e3c0; text-shadow: 0 1px 2px #000;
}
.tl-diem { display: flex; align-items: stretch; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(185, 138, 62, 0.75); background: rgba(20, 14, 9, 0.88); }
.tl-doi { display: flex; align-items: baseline; gap: 3px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.tl-doi b { font-size: 18px; line-height: 1; }
.tl-doi i { font-style: normal; font-size: 13px; margin-left: 5px; opacity: 0.92; }
.tl-doi small { font-size: 9px; opacity: 0.75; letter-spacing: 0.04em; }
.tl-doi.d0 { background: linear-gradient(90deg, rgba(40, 110, 220, 0.55), rgba(40, 110, 220, 0.12)); color: #cfe6ff; }
.tl-doi.d1 { background: linear-gradient(270deg, rgba(220, 70, 50, 0.55), rgba(220, 70, 50, 0.12)); color: #ffd4c8; }
#tl-dong { padding: 3px 12px; font-size: 16px; font-variant-numeric: tabular-nums; color: #ffe08a; min-width: 62px; text-align: center; display: flex; align-items: center; justify-content: center; }
.tl-nha { display: flex; width: 100%; gap: 6px; }
.tl-nhabar { flex: 1; height: 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.6); }
.tl-nhabar i { display: block; height: 100%; width: 100%; transition: width 0.4s ease; }
.tl-nhabar.d0 i { background: #4a9bff; }
.tl-nhabar.d1 i { background: #ff6a52; }
.tl-nhabar.d1 { direction: rtl; }
.tl-muctieu { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.tl-chip {
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; font: inherit; font-size: 11px; font-variant-numeric: tabular-nums;
  background: rgba(28, 19, 12, 0.86); border: 1px solid rgba(185, 138, 62, 0.7); color: #f1e3c0;
}
.tl-chip:empty { display: none; }
.tl-chip.rong { border-color: #e08a4a; color: #ffd0a8; }
.tl-chip.baron { border-color: #a878d8; color: #e2ccff; }
.tl-chip.song { animation: tl-nhap 1s ease-in-out infinite; }
.tl-chip.nut { pointer-events: auto; cursor: pointer; }
@keyframes tl-nhap { 50% { filter: brightness(1.5); } }
.tl-buff { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tl-buff:empty { display: none; }
.tl-bf { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; background: rgba(28, 19, 12, 0.86); border: 1px solid #b98a3e; }
.tl-bf.satKhi { border-color: #e0604a; color: #ffb4a0; }
.tl-bf.lam { border-color: #5fb4ff; color: #bfe0ff; }
.tl-bf.xich { border-color: #ff7a5a; color: #ffc4b0; }
.tl-bf.long { border-color: #e0a04a; color: #ffdca0; }
.tl-bf.baron { border-color: #b890f0; color: #e4d2ff; }
@media (max-width: 520px) {
  #tl-hud { top: calc(env(safe-area-inset-top, 0px) + 150px); }
}
#tl-bang {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 125; pointer-events: auto;
  background: rgba(16, 12, 8, 0.93); border: 1px solid #b98a3e; border-radius: 8px; padding: 6px 10px;
  font: 700 12px var(--font-serif, serif); color: #f1e3c0; min-width: 260px; max-width: calc(100vw - 20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
#tl-bang table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#tl-bang th { font-size: 10px; color: #cdb88f; text-align: right; padding: 2px 4px; letter-spacing: 0.06em; }
#tl-bang th:first-child { text-align: left; }
#tl-bang td { padding: 2px 4px; text-align: right; }
#tl-bang td:first-child { text-align: left; }
#tl-bang small { font-size: 9px; opacity: 0.7; }
#tl-bang tr.d0 td { color: #cfe6ff; }
#tl-bang tr.d1 td { color: #ffd4c8; }
#tl-bang tr.chet td { opacity: 0.5; }
#tl-bang tr.tl-bang-doi td { font-size: 11px; letter-spacing: 0.08em; padding-top: 5px; border-bottom: 1px solid rgba(185, 138, 62, 0.4); }
@media (max-height: 520px) {
  #tl-bang { top: calc(env(safe-area-inset-top, 0px) + 88px); max-height: calc(var(--ui-vh, 100vh) - 88px - 64px); overflow-y: auto; padding: 3px 8px; font-size: 10px; line-height: 1.2; }
  #tl-bang th { font-size: 9px; padding: 1px 4px; }
  #tl-bang td { padding: 0 4px; }
  #tl-bang tr.tl-bang-doi td { font-size: 10px; padding-top: 2px; }
}
#tl-dem {
  position: fixed; left: 50%; top: 38%; z-index: 300; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--font-serif, serif); font-weight: 700; font-size: 96px; line-height: 1; color: #ffe08a;
  text-shadow: 0 0 18px rgba(255, 170, 60, 0.75), 0 4px 0 #3a2410, 0 0 4px #000;
}
#tl-dem.go { font-size: 56px; color: #ff8a5a; }
#tl-dem.pop { animation: tl-dem-pop 420ms ease-out; }
@keyframes tl-dem-pop { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#tl-ghep {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 54px); transform: translateX(-50%); z-index: 29; pointer-events: none;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px);
}
.tl-gh-doi { display: flex; flex-direction: column; gap: 1px; padding: 5px 10px; border-radius: 8px; background: rgba(16, 12, 8, 0.88); border: 1px solid #b98a3e; font: 700 12px var(--font-serif, serif); min-width: 130px; }
.tl-gh-doi strong { font-size: 11px; letter-spacing: 0.06em; margin-bottom: 2px; }
.tl-gh-doi small { font-size: 9px; opacity: 0.7; }
.tl-gh-doi.d0 strong { color: #8fc4ff; } .tl-gh-doi.d0 span { color: #dcecff; }
.tl-gh-doi.d1 strong { color: #ff9a82; } .tl-gh-doi.d1 span { color: #ffe0d4; }
@media (max-width: 520px) { #tl-ghep { top: calc(env(safe-area-inset-top, 0px) + 196px); } .tl-gh-doi { min-width: 110px; padding: 3px 8px; } }
#tl-banner {
  position: fixed; left: 50%; top: 24%; z-index: 300; transform: translate(-50%, -50%); pointer-events: none;
  max-width: calc(100vw - 24px); text-align: center; font-family: var(--font-serif, serif);
}
#tl-banner strong { display: block; font-size: clamp(22px, 5vw, 38px); line-height: 1.15; color: #ffe08a; text-shadow: 0 0 14px rgba(255, 170, 60, 0.7), 0 3px 0 #3a2410, 0 0 4px #000; }
#tl-banner small { display: block; margin-top: 4px; font-size: 14px; color: #f1e3c0; text-shadow: 0 1px 3px #000; }
#tl-banner.pop { animation: tl-banner-pop 450ms ease-out; }
@keyframes tl-banner-pop { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#tl-guc { position: fixed; left: 50%; top: 56%; z-index: 120; transform: translateX(-50%); pointer-events: none; text-align: center; font-family: var(--font-serif, serif); }
#tl-guc strong { display: block; font-size: clamp(22px, 5vw, 32px); color: #ff8f8f; text-shadow: 0 2px 0 #3a1010, 0 0 6px #000; }
#tl-guc small { display: block; margin-top: 3px; font-size: 14px; color: #f1e3c0; text-shadow: 0 1px 3px #000; }
#tl-bao {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 78px); transform: translateX(-50%);
  z-index: 29; pointer-events: none; width: min(440px, calc(100vw - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tl-tin { padding: 1px 9px; border-radius: 4px; font: 700 11px/1.3 var(--font-serif, serif); color: #f1e3c0; background: rgba(28, 19, 12, 0.72); text-shadow: 0 1px 2px #000; animation: tl-tin-vao 200ms ease-out; }
.tl-tin.xanh { color: #cfe6ff; background: rgba(20, 60, 120, 0.8); }
.tl-tin.do { color: #ffd9cf; background: rgba(120, 36, 26, 0.82); }
.tl-tin.warn { color: #ffd5cc; background: rgba(110, 34, 28, 0.82); }
@keyframes tl-tin-vao { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { #tl-bao { top: calc(env(safe-area-inset-top, 0px) + 236px); } }
#tl-ve {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%);
  z-index: 35; min-width: 120px; min-height: 40px; padding: 6px 16px; cursor: pointer; overflow: hidden;
  color: #20140a; background: linear-gradient(180deg, #9fd0ff, #4a8ed6); border: 1px solid #bfe0ff; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); font: 700 14px var(--font-serif, serif);
}
#tl-ve span { position: relative; z-index: 1; }
#tl-ve i { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #fff3c4; transition: width 0.1s linear; }
#tl-ve.dang { background: linear-gradient(180deg, #ffe08a, #d39a36); border-color: #f2c76a; }
#tl-ve:active { transform: translateX(-50%) translateY(1px); }
body.tl-tran #btn-meditate-touch { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tl-chip.song, #tl-dem.pop, #tl-banner.pop, .tl-tin { animation: none; }
}
body.tl-tran #minimap { width: 168px; height: 168px; }
@media (max-width: 520px) { body.tl-tran #minimap { width: 124px; height: 124px; } }
@media (orientation: landscape) and (max-height: 400px) { body.tl-tran #minimap { width: 76px; height: 76px; } }
@media (orientation: landscape) and (min-height: 401px) and (max-height: 520px) { body.tl-tran #minimap { width: 88px; height: 88px; } }
.tl-tabs { display: flex; gap: 4px; margin: 8px 0 6px; }
.tl-tabs button {
  flex: 1; padding: 6px 4px; font: 700 13px/1.1 var(--font-ui, sans-serif); color: #d9c79d; cursor: pointer;
  background: rgba(28, 19, 12, 0.7); border: 1px solid rgba(140, 112, 69, 0.6); border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tl-tabs button:hover { background: rgba(60, 44, 26, 0.85); }
.tl-tabs button.on { color: #2c2113; background: linear-gradient(#e8d9b3, #cdb98e); border-color: #b4965a; }
#tamlo section.hidden { display: none; }
.tl-tom { padding: 6px 8px; margin-bottom: 6px; border-radius: 6px; background: rgba(47, 74, 58, 0.55); color: #fff0ca; font-size: 13px; }
.tl-bxh, .tl-quay { max-height: min(46vh, 380px); overflow-y: auto; font-size: 13px; }
.tl-hang { display: grid; grid-template-columns: 34px 1fr 52px 52px 40px; gap: 4px; padding: 4px 6px; border-bottom: 1px solid rgba(140, 112, 69, 0.25); align-items: center; }
.tl-hang span.n { text-align: right; font-variant-numeric: tabular-nums; }
.tl-hang span.h { text-align: center; font-variant-numeric: tabular-nums; }
.tl-hang span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-hang.tl-dau { position: sticky; top: 0; background: #3a2c1b; color: #e8d3a0; font-size: 11px; letter-spacing: 0.04em; z-index: 1; }
.tl-hang.h1 span.h { color: #ffd24a; font-weight: 800; }
.tl-hang.h2 span.h { color: #d8dee8; font-weight: 800; }
.tl-hang.h3 span.h { color: #d99a62; font-weight: 800; }
.tl-hang.h1 { background: rgba(255, 210, 74, 0.10); }
.tl-hang.la { background: rgba(110, 180, 255, 0.16); outline: 1px solid rgba(110, 180, 255, 0.5); }
.tl-hang.ngoai { margin-top: 6px; }
.tl-rong, .tl-ghi { padding: 8px 6px; opacity: 0.8; font-size: 12px; }
.tl-mon { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(140, 112, 69, 0.25); }
.tl-mon canvas { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.tl-mon-ten { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.tl-mon-ten small { opacity: 0.75; font-size: 11px; }
#tamlo .tl-doi-nut { width: auto; min-width: 52px; margin: 0; padding: 6px 10px; flex: none; }
#tamlo .tl-doi-nut[disabled] { opacity: 0.45; cursor: default; }
.tl-chip.dh { border-color: #9a5a4a; color: #e8c4b8; }
.tl-chip.dh.hoi { border-color: #ff7a5a; color: #fff; background: rgba(120, 36, 26, 0.92); }
#tl-dh {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); transform: translateX(-50%);
  z-index: 36; display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; overflow: hidden;
  background: rgba(16, 12, 8, 0.93); border: 1px solid #b98a3e; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  font: 700 13px var(--font-serif, serif); color: #f1e3c0; white-space: nowrap; max-width: calc(100vw - 16px);
}
#tl-dh strong { color: #ffb4a0; }
#tl-dh span { font-variant-numeric: tabular-nums; }
#tl-dh button {
  min-height: 32px; padding: 4px 12px; border-radius: 6px; cursor: pointer; font: inherit;
  color: #fff0ca; background: #2f4a3a; border: 1px solid #6f8f67;
}
#tl-dh button.khong { color: #423321; background: linear-gradient(#dfd0ad, #c8b58e); border-color: #8c7045; }
#tl-dh.da button { display: none; }
#tl-dh i { position: absolute; left: 0; bottom: 0; height: 3px; background: #ffb4a0; transition: width 0.1s linear; }