/* JX NEXT - the public door (internal/web).  1219 WEBDESIGN1: the «sơn mài» look - Vietnamese lacquer: its black, cinnabar, gold
   leaf and eggshell ivory - around the owner's key art and logo (static/anh); of the reference site only the schools' pictures stay
   (docs/web/anh-mau.md).  No script at this door: the tabs, the school picker, the phone's menu and the gift code are radio buttons
   and <details>.  Phone first; the newer CSS - view transitions between pages, reveals tied to the scroll - only where the browser has
   it and the reader did not ask for less motion.  The editor's classes (mau-*, can-*) are the admin door's too (admin.css). */
@layer goc, nen, khung, khoi, trang, tien-ich;

@layer goc {
  :root {
    color-scheme: dark;
    --den: #0e0806;          /* lacquer black */
    --den-2: #160c09;
    --den-3: #21120d;
    --den-4: #2c1810;
    --son: #a8261b;          /* cinnabar */
    --son-sang: #d23b25;
    --son-dam: #5e120c;
    --vang: #e2b35c;         /* gold leaf */
    --vang-sang: #f6d993;
    --vang-dam: #9c6b25;
    --nga: #f2e6cc;          /* eggshell ivory: the text */
    --nga-mo: #c8b391;
    --nga-mo-2: #9a876a;
    --ngoc: #5fd3a0;         /* jade: open */
    --hong: #ff9a7a;         /* closed */
    --vien: rgba(226, 179, 92, .32);
    --vien-nhat: rgba(226, 179, 92, .14);
    --bong: 0 24px 60px rgba(0, 0, 0, .55);
    --bong-nho: 0 10px 28px rgba(0, 0, 0, .45);
    --chu: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --chu-dep: "Sitka Banner", "Sitka Heading", "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", "Noto Serif", Georgia, serif;
    --vang-chu: linear-gradient(180deg, #fff3cf 0%, #f4cd7a 42%, #c88f37 78%, #a4702a 100%);
    --rong: 1200px;
    --le: clamp(16px, 4.5vw, 40px);
    --bo: 16px;
    --cao-dau: 72px;
    --he-1: #f6d993;         /* a school's element: its glow (he-* below) */
    --he-2: #b9822e;
  }
  @media (max-width: 1099px) { :root { --cao-dau: 60px; } } /* the phone's bar (1251: up to 1099 px) */
  .he-kim { --he-1: #fff0bf; --he-2: #c8943c; }
  .he-moc { --he-1: #b8f0a6; --he-2: #2f8a4a; }
  .he-thuy { --he-1: #b7e6ff; --he-2: #2f78b8; }
  .he-hoa { --he-1: #ffc08a; --he-2: #c7341f; }
  .he-tho { --he-1: #f0d29c; --he-2: #8d5a2b; }
}

@layer nen {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cao-dau) + 16px); }
  body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--den); color: var(--nga);
    font: 400 1rem/1.65 var(--chu); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
  main { flex: 1 0 auto; display: block; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: var(--vang-sang); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
  a:hover { color: #fff; }
  h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; }
  :focus-visible { outline: 2px solid var(--vang); outline-offset: 3px; border-radius: 6px; }
  ::selection { background: var(--son); color: #fff; }
  [hidden] { display: none !important; }
  .i { width: 1.2em; height: 1.2em; flex: none; }
  .an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bo-qua { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--vang); color: #2b1405;
    font-weight: 700; text-decoration: none; transition: top .2s; }
  .bo-qua:focus { top: 12px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}

/* ---- the frame: the bar, the phone's menu, the buttons, the footer */
@layer khung {
  .dau { position: sticky; top: 0; z-index: 50; height: var(--cao-dau); background: linear-gradient(180deg, rgba(14, 8, 6, .94), rgba(14, 8, 6, .8));
    border-bottom: 1px solid var(--vien-nhat); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
    view-transition-name: dau; }
  .dau::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 179, 92, .55) 30%, rgba(226, 179, 92, .55) 70%, transparent); opacity: .6; }
  .dau-in { max-width: calc(var(--rong) + 160px); height: 100%; margin: 0 auto; padding: 0 var(--le); display: flex; align-items: center; gap: 14px; }
  .logo { flex: none; }
  .logo img { height: calc(var(--cao-dau) - 14px); width: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .65)); transition: transform .3s; }
  .logo:hover img { transform: scale(1.04); }
  .menu { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .menu a { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; color: var(--nga);
    text-decoration: none; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: color .2s, background-color .2s; }
  .menu a .i { width: 18px; height: 18px; opacity: .7; }
  .menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--vang), transparent); transform: scaleX(0); transition: transform .3s; }
  .menu a:hover { color: #fff; background: rgba(226, 179, 92, .07); }
  .menu a:hover::after, .menu a.on::after { transform: scaleX(1); }
  .menu a.on { color: var(--vang-sang); }
  .menu a.on .i { opacity: 1; }
  .dau-tai { flex: none; margin-left: 8px; white-space: nowrap; }
  /* 1251: the bar's "Tài khoản" is its icon at every width the bar shows it (its word read out, its title on a hover) - with six items
     and "Tải game" beside it, its word put the whole bar on two lines from 1200 px up (1249's pictures had no download button).  The
     buttons never shrink (a .nut hides what passes its edge: a shrunk one showed "Tải gam").  The public pages run no script, so the
     bar's widths are set for the widest fonts a player's system may draw them in (Arial ~ a Mac's, Verdana ~ a Linux's DejaVu Sans,
     measured): the items with their icons from 1320 px in a bar of up to 1360 px, without them (padding 10 px) from 1100 px, the
     phone's menu below 1100 px */
  .dau-tk { gap: 0; padding: 6px 10px; }
  .dau-tk span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* the phone's menu (under 1100 px): one button - the three bars and the page's name - opening a sheet under the bar */
  .menu-nho { display: none; margin-left: auto; }
  .menu-nho summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 12px; border-radius: 12px;
    border: 1px solid var(--vien); background: rgba(226, 179, 92, .06); color: var(--vang-sang); font-weight: 600; cursor: pointer;
    user-select: none; -webkit-tap-highlight-color: transparent; }
  .menu-nho summary::-webkit-details-marker { display: none; }
  .menu-nho[open] summary { background: rgba(226, 179, 92, .16); }
  .ba-gach { position: relative; flex: none; width: 20px; height: 14px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transition: border-color .2s; }
  .ba-gach::before, .ba-gach::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; transition: transform .25s; }
  .ba-gach::after { opacity: 0; }
  .menu-nho[open] .ba-gach { border-color: transparent; }
  .menu-nho[open] .ba-gach::before { transform: rotate(45deg); }
  .menu-nho[open] .ba-gach::after { opacity: 1; transform: rotate(-45deg); }
  .menu-nho nav { position: fixed; left: 0; right: 0; top: var(--cao-dau); max-height: calc(100svh - var(--cao-dau)); overflow-y: auto;
    display: grid; gap: 4px; padding: 12px var(--le) 20px; background: linear-gradient(180deg, #1a0e0a, #110907);
    border-bottom: 1px solid var(--vien); box-shadow: 0 24px 48px rgba(0, 0, 0, .6); animation: tha-xuong .28s cubic-bezier(.2, .8, .2, 1); }
  .menu-nho nav a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border-radius: 12px; color: var(--nga);
    text-decoration: none; font-weight: 600; font-size: 1.05rem; }
  .menu-nho nav a .i { color: var(--vang); opacity: .85; }
  .menu-nho nav a.on { color: var(--vang-sang); background: linear-gradient(90deg, rgba(168, 38, 27, .35), rgba(168, 38, 27, 0)); box-shadow: inset 3px 0 0 var(--vang); }
  @keyframes tha-xuong { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

  /* the buttons: gold, cinnabar, an outline - each lifts and catches a sheen of light */
  .nut { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 54px;
    padding: 10px 24px 10px 18px; border: 1px solid transparent; border-radius: 14px; font: 700 1rem/1.15 var(--chu); text-decoration: none;
    cursor: pointer; transition: transform .25s, box-shadow .25s, filter .25s, background-color .25s; -webkit-tap-highlight-color: transparent; }
  .nut .i { width: 26px; height: 26px; }
  .nut small { display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
  .nut::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: left .6s; }
  .nut:hover::before { left: 120%; }
  .nut:hover { transform: translateY(-2px); }
  .nut:active { transform: translateY(0); }
  .nut-vang { color: #2b1405; background: linear-gradient(180deg, #ffe9b0 0%, #ebb85c 48%, #c38735 100%); border-color: rgba(255, 233, 176, .7);
    box-shadow: 0 12px 30px rgba(226, 179, 92, .25), inset 0 1px 0 rgba(255, 255, 255, .65); }
  .nut-vang:hover { color: #2b1405; filter: brightness(1.06); box-shadow: 0 16px 38px rgba(226, 179, 92, .38), inset 0 1px 0 rgba(255, 255, 255, .65); }
  .nut-son { color: #fff4e2; background: linear-gradient(180deg, #e0503a 0%, #a8261b 55%, #761810 100%); border-color: rgba(255, 160, 130, .45);
    box-shadow: 0 12px 30px rgba(168, 38, 27, .35), inset 0 1px 0 rgba(255, 255, 255, .28); }
  .nut-son:hover { color: #fff; filter: brightness(1.08); }
  .nut-vien { color: var(--vang-sang); background: rgba(14, 8, 6, .55); border-color: var(--vien); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .nut-vien:hover { color: #fff; border-color: var(--vang); background: rgba(226, 179, 92, .12); }
  .nut-nho { min-height: 40px; padding: 6px 16px 6px 12px; border-radius: 12px; font-size: .92rem; gap: 8px; }
  .nut-nho .i { width: 20px; height: 20px; }

  /* the age notice (the law of the game sites: 18+, the 180 minutes) */
  .tuoi-18 { display: flex; align-items: center; gap: 12px; color: var(--nga-mo); font-size: .9rem; line-height: 1.4; }
  .so-18 { flex: none; display: grid; place-items: center; min-width: 56px; height: 40px; padding: 0 8px; border: 2px solid var(--vang); border-radius: 10px;
    color: var(--vang-sang); font: 800 1.35rem/1 var(--chu); letter-spacing: -.02em; background: rgba(226, 179, 92, .08); }

  /* the footer */
  .chan { position: relative; margin-top: 0; background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(168, 38, 27, .16), transparent 60%),
    url(/static/trang-tri/hat.svg?v=745bc472156d), #0a0504; border-top: 1px solid var(--vien-nhat); }
  .chan::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(560px, 80%); height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--vang), transparent); }
  .chan-in { max-width: var(--rong); margin: 0 auto; padding: 48px var(--le) 36px; display: grid; gap: 24px; justify-items: center; text-align: center; }
  .chan-logo img { width: 150px; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
  .chan-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
  .chan-menu a { color: var(--nga-mo); text-decoration: none; font-weight: 600; }
  .chan-menu a:hover { color: var(--vang-sang); }
  .chan-ban-quyen { color: var(--nga-mo-2); font-size: .85rem; }
  .chan .tuoi-18 { justify-content: center; text-align: left; }

  /* the shared small parts: a label row, a pinned mark, a dot of state */
  .nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--nga-mo); font-size: .86rem; }
  .nhan .loai { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; color: var(--vang-sang);
    background: rgba(226, 179, 92, .1); border: 1px solid var(--vien-nhat); font-weight: 600; letter-spacing: .02em; }
  .nhan .loai .i { width: 15px; height: 15px; }
  .ghim { display: inline-flex; align-items: center; gap: 4px; color: #ffc2a6; font-weight: 700; }
  .ghim .i { width: 15px; height: 15px; }
  .cham { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ngoc); box-shadow: 0 0 0 4px rgba(95, 211, 160, .18); }
  .duong-dan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--nga-mo-2); font-size: .88rem; }
  .duong-dan a { color: var(--nga-mo); text-decoration: none; }
  .duong-dan a:hover { color: var(--vang-sang); }
  .duong-dan .i { width: 14px; height: 14px; opacity: .6; }

  @media (min-width: 1100px) {
    .menu a.chi-nho { display: none; } /* the bar's button says it there */
  }
  @media (min-width: 1100px) and (max-width: 1319px) {
    .dau-in { gap: 10px; }
    .menu a { padding: 10px; }
    .menu a .i { display: none; }
    .menu a::after { left: 10px; right: 10px; }
  }
  @media (max-width: 1099px) {
    .dau-in > .menu, .dau-tai { display: none; }
    .menu-nho { display: block; }
  }
}

/* ---- the home page's blocks */
@layer khoi {
  /* the hero: the owner's picture, a dusk of ink over its left, embers rising, the logo and the server's state */
  .hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: clamp(560px, 94svh, 920px);
    margin-top: calc(-1 * var(--cao-dau)); padding-top: var(--cao-dau); background: var(--den); }
  .hero-anh { position: absolute; inset: 0; z-index: -2; }
  .hero-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 32%; transform-origin: 68% 40%;
    animation: hero-tho 32s ease-in-out infinite alternate; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(14, 8, 6, .94) 0%, rgba(14, 8, 6, .7) 30%, rgba(14, 8, 6, .1) 62%, rgba(14, 8, 6, 0) 75%),
      linear-gradient(0deg, var(--den) 0%, rgba(14, 8, 6, .55) 18%, rgba(14, 8, 6, 0) 42%),
      linear-gradient(180deg, rgba(14, 8, 6, .65) 0%, rgba(14, 8, 6, 0) 16%); }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: url(/static/trang-tri/hat.svg?v=745bc472156d); }
  .hero-in { width: 100%; max-width: var(--rong); margin: 0 auto; padding: 48px var(--le) clamp(84px, 13vh, 132px); }
  .hero-logo { margin: 0 0 18px -1.5%; animation: hien-len 1s .1s both; }
  .hero-logo img { width: min(540px, 86vw); filter: drop-shadow(0 14px 36px rgba(0, 0, 0, .7)); }
  .trang-thai { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 14px; border-radius: 999px; font-weight: 600; font-size: 1.02rem;
    background: rgba(14, 8, 6, .62); border: 1px solid var(--vien); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--bong-nho); animation: hien-len 1s .25s both; }
  .trang-thai b { color: var(--vang-sang); font-size: 1.3em; font-variant-numeric: tabular-nums; }
  .trang-thai.mo .cham { animation: nhip 2.4s ease-out infinite; }
  .trang-thai.dong .cham { background: var(--hong); box-shadow: 0 0 0 4px rgba(255, 154, 122, .16); }
  .gio-mo { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--nga); text-shadow: 0 2px 8px #000; animation: hien-len 1s .35s both; }
  .gio-mo .i { color: var(--vang); }
  .hero-nut { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-top: 28px; animation: hien-len 1s .45s both; }
  .cuon-xuong { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: var(--vang-sang); border: 1px solid var(--vien); background: rgba(14, 8, 6, .5); animation: nhun 2.4s ease-in-out infinite; }
  .cuon-xuong:hover { color: #fff; border-color: var(--vang); }
  @keyframes hero-tho { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, 1%); } }
  @keyframes hien-len { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes nhip { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 160, .55); } 70% { box-shadow: 0 0 0 12px rgba(95, 211, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 211, 160, 0); } }
  @keyframes nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  /* embers rising from the battle below the picture */
  .tan-lua { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .tan-lua i { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #ffe2a8 0%, #ff8a3d 45%, rgba(255, 90, 40, 0) 72%); animation: bay 11s linear infinite; }
  .tan-lua i:nth-child(1) { left: 8%; animation-delay: -1s; }
  .tan-lua i:nth-child(2) { left: 19%; animation-delay: -7s; animation-duration: 13s; width: 3px; height: 3px; }
  .tan-lua i:nth-child(3) { left: 27%; animation-delay: -4s; animation-duration: 9s; }
  .tan-lua i:nth-child(4) { left: 38%; animation-delay: -10s; animation-duration: 14s; width: 4px; height: 4px; }
  .tan-lua i:nth-child(5) { left: 47%; animation-delay: -2.5s; animation-duration: 10s; width: 6px; height: 6px; }
  .tan-lua i:nth-child(6) { left: 56%; animation-delay: -8s; animation-duration: 12s; width: 3px; height: 3px; }
  .tan-lua i:nth-child(7) { left: 63%; animation-delay: -5.5s; }
  .tan-lua i:nth-child(8) { left: 71%; animation-delay: -12s; animation-duration: 15s; width: 4px; height: 4px; }
  .tan-lua i:nth-child(9) { left: 79%; animation-delay: -3s; animation-duration: 9.5s; }
  .tan-lua i:nth-child(10) { left: 86%; animation-delay: -9s; animation-duration: 12.5s; width: 3px; height: 3px; }
  .tan-lua i:nth-child(11) { left: 92%; animation-delay: -6s; animation-duration: 10.5s; width: 6px; height: 6px; }
  .tan-lua i:nth-child(12) { left: 33%; animation-delay: -11s; animation-duration: 16s; width: 3px; height: 3px; }
  @keyframes bay {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
    12% { opacity: .95; }
    55% { opacity: .75; transform: translate3d(28px, -38vh, 0) scale(.85); }
    100% { opacity: 0; transform: translate3d(-12px, -78vh, 0) scale(.35); }
  }

  /* the gift code: a slip of ivory paper above its button (the hero clips what falls below it) */
  .qua { position: relative; }
  .qua > summary { list-style: none; }
  .qua > summary::-webkit-details-marker { display: none; }
  .qua[open] > summary { border-color: var(--vang); background: rgba(226, 179, 92, .16); }
  .qua-hop { position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 5; width: min(340px, calc(100vw - 2 * var(--le))); padding: 20px 22px;
    border-radius: 14px; color: #3a2010; background: linear-gradient(180deg, #fdf6e4, #f1e2c0); border: 1px solid #e2b35c; box-shadow: var(--bong);
    animation: hien-len .3s both; }
  .qua-hop::before { content: ""; position: absolute; left: 28px; bottom: -7px; width: 12px; height: 12px; rotate: 45deg; background: #f1e2c0;
    border-right: 1px solid #e2b35c; border-bottom: 1px solid #e2b35c; }
  .qua-chu { font-weight: 800; letter-spacing: .02em; color: #7c1b11; }
  .qua-ma { margin: 10px 0; }
  .qua-ma code { display: inline-block; padding: 8px 14px; border: 1px dashed #b07a2a; border-radius: 10px; background: #fff; color: #2b1405;
    font: 700 1.3rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; user-select: all; word-break: break-all; }
  .qua-ghi { font-size: .86rem; color: #6b4a2a; }

  /* a block's head: its number between two gold threads, its name in gold leaf, a cloud's curl under it */
  .khoi { position: relative; padding: clamp(56px, 8vw, 104px) var(--le); }
  .khoi-dau { max-width: 760px; margin: 0 auto clamp(34px, 5vw, 58px); text-align: center; }
  .khoi-so { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 14px; color: var(--vang); font: 600 .82rem/1 var(--chu); letter-spacing: .42em;
    padding-left: .42em; }
  .khoi-so::before, .khoi-so::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--vang)); }
  .khoi-so::after { background: linear-gradient(270deg, transparent, var(--vang)); }
  .khoi-chu { font: 700 clamp(2.1rem, 5.4vw, 3.6rem)/1.08 var(--chu-dep); letter-spacing: .01em; color: var(--vang-sang); background: var(--vang-chu);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55)); }
  .khoi-dau::after { content: ""; display: block; width: 220px; height: 26px; margin: 18px auto 0; background: url(/static/trang-tri/may.svg?v=1645bb8adda5) center / contain no-repeat; }
  .khoi-phu { margin-top: 12px; color: var(--nga-mo); }

  /* Tiêu Điểm Võ Lâm: the featured post, the three lists */
  .tieu-diem { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(178, 40, 28, .34), transparent 72%), url(/static/trang-tri/hat.svg?v=745bc472156d), var(--den); }
  .td-luoi { max-width: var(--rong); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .td-noi-bat { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--bo); background: var(--den-2);
    border: 1px solid var(--vien-nhat); box-shadow: var(--bong-nho); transition: border-color .3s, transform .3s, box-shadow .3s; }
  .td-noi-bat:hover { border-color: var(--vien); transform: translateY(-3px); box-shadow: var(--bong); }
  .td-bia { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 30% 30%, #3a1a10, #140a07 70%); }
  .td-bia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
  .td-noi-bat:hover .td-bia img { transform: scale(1.05); }
  .td-bia::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(0deg, var(--den-2), transparent); }
  .bia-trong { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(226, 179, 92, .45);
    background: url(/static/trang-tri/hat.svg?v=745bc472156d), radial-gradient(circle at 50% 45%, rgba(168, 38, 27, .35), transparent 65%); }
  .bia-trong .i { width: 72px; height: 72px; stroke-width: 1.2; }
  .td-bia .bia-trong { background: url(/static/anh/logo-nho.webp?v=c9c709ebeb09) center 44% / min(46%, 260px) auto no-repeat, url(/static/trang-tri/hat.svg?v=745bc472156d),
    radial-gradient(circle at 50% 45%, rgba(168, 38, 27, .45), transparent 65%); }
  .td-bia .bia-trong .i { display: none; }
  .td-noi-dung { display: grid; align-content: start; gap: 12px; padding: 4px 28px 28px; }
  .td-noi-bat h3 { font: 700 clamp(1.35rem, 2.6vw, 1.75rem)/1.25 var(--chu-dep); }
  .td-noi-bat h3 a { color: var(--nga); text-decoration: none; }
  .td-noi-bat h3 a::after { content: ""; position: absolute; inset: 0; }
  .td-noi-bat:hover h3 a { color: var(--vang-sang); }
  .td-tom-tat { color: var(--nga-mo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .doc-tiep { display: inline-flex; align-items: center; gap: 8px; color: var(--vang); font-weight: 700; }
  .doc-tiep .i { transition: transform .3s; }
  .td-noi-bat:hover .doc-tiep .i { transform: translateX(4px); }
  .td-trong { display: grid; place-items: center; min-height: 260px; color: var(--nga-mo); }
  .td-trong p { display: flex; align-items: center; gap: 10px; }

  .td-tabs { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: var(--bo); background: linear-gradient(180deg, var(--den-3), var(--den-2));
    border: 1px solid var(--vien-nhat); box-shadow: var(--bong-nho); }
  .td-r, .nm-r { position: absolute; opacity: 0; pointer-events: none; }
  .td-nhan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
  .td-nhan label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 9px;
    color: var(--nga-mo); font-weight: 600; cursor: pointer; transition: color .2s, background-color .2s; -webkit-tap-highlight-color: transparent; }
  .td-nhan label .i { width: 18px; height: 18px; }
  .td-nhan label:hover { color: var(--nga); }
  .td-r:focus-visible ~ .td-nhan label { outline-offset: -2px; }
  .td-bang { flex: 1; min-width: 0; padding: 8px 6px 4px; }
  .td-ds { display: none; height: 100%; min-width: 0; flex-direction: column; }
  .td-ds ul { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
  .td-ds li a { display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: 10px; color: var(--nga); text-decoration: none;
    border-bottom: 1px dashed var(--vien-nhat); transition: background-color .2s, color .2s; }
  .td-ds li:last-child a { border-bottom: 0; }
  .td-ds li a:hover { background: rgba(226, 179, 92, .07); color: var(--vang-sang); }
  .td-ds li a time { flex: none; min-width: 52px; padding: 3px 0; border-radius: 8px; text-align: center; color: var(--vang); background: rgba(226, 179, 92, .08);
    font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .td-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .td-ds li a .i { width: 16px; height: 16px; opacity: .45; transition: transform .2s, opacity .2s; }
  .td-ds li a:hover .i { opacity: 1; transform: translateX(3px); }
  .td-ds .td-trong { min-height: 160px; }
  .td-them { margin-top: auto; padding: 12px 10px 4px; text-align: right; }
  .td-them a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
  .td-r:nth-of-type(1):checked ~ .td-bang .td-ds:nth-child(1), .td-r:nth-of-type(2):checked ~ .td-bang .td-ds:nth-child(2),
  .td-r:nth-of-type(3):checked ~ .td-bang .td-ds:nth-child(3) { display: flex; animation: hien-len .35s both; }
  .td-r:nth-of-type(1):checked ~ .td-nhan label:nth-child(1), .td-r:nth-of-type(2):checked ~ .td-nhan label:nth-child(2),
  .td-r:nth-of-type(3):checked ~ .td-nhan label:nth-child(3) { color: #fff4e2; background: linear-gradient(180deg, #c83a26, #8f2016); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px rgba(168, 38, 27, .35); }
  .td-r:nth-of-type(1):focus-visible ~ .td-nhan label:nth-child(1), .td-r:nth-of-type(2):focus-visible ~ .td-nhan label:nth-child(2),
  .td-r:nth-of-type(3):focus-visible ~ .td-nhan label:nth-child(3) { outline: 2px solid var(--vang); outline-offset: 2px; }

  /* Nhập Môn Chính Phái: the schools' seals in a row, the chosen one's figure in its element's glow and its card */
  .mon-phai { overflow: hidden; background: radial-gradient(ellipse 72% 58% at 50% 64%, rgba(196, 48, 32, .5), transparent 72%),
    linear-gradient(180deg, var(--den) 0%, #2a0b07 28%, #3b0f09 62%, #1a0705 100%); }
  .mon-phai::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background: url(/static/trang-tri/hat.svg?v=745bc472156d); }
  .nm { position: relative; max-width: var(--rong); margin: 0 auto; }
  .nm-chon { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; max-width: 980px; margin: 0 auto; }
  .nm-chon label { display: grid; justify-items: center; gap: 12px; width: 82px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nm-chon .o, .bxh-chon .o { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-top: 6px; rotate: 45deg; border-radius: 10px;
    border: 1px solid var(--vien); background: linear-gradient(135deg, #2c1610, #120907); box-shadow: inset 0 0 0 3px rgba(14, 8, 6, .9);
    transition: background .3s, border-color .3s, box-shadow .3s, scale .3s; }
  .nm-chon .o img, .bxh-chon .o img { width: 36px; height: 36px; rotate: -45deg; }
  .o-chu { rotate: -45deg; color: var(--vang-sang); font: 700 1.3rem/1 var(--chu-dep); }
  .nm-chu { color: var(--nga-mo); font-size: .78rem; font-weight: 600; line-height: 1.25; text-align: center; transition: color .3s; }
  .nm-chon label:hover .o, .bxh-chon label:hover .o { border-color: var(--vang); scale: 1.06; }
  .nm-chon label:hover .nm-chu, .bxh-chon label:hover .nm-chu { color: var(--nga); }
  .nm-bang { position: relative; }
  .nm-phai { display: none; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px 32px; margin-top: 28px; }
  .nm-tranh { position: relative; width: min(100%, 600px); justify-self: center; aspect-ratio: 1; }
  .nm-tranh::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; opacity: .55; filter: blur(14px);
    background: radial-gradient(circle, var(--he-1) 0%, var(--he-2) 38%, transparent 70%); }
  .nm-tranh::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(226, 179, 92, .22);
    box-shadow: 0 0 0 18px rgba(226, 179, 92, .03), 0 0 0 19px rgba(226, 179, 92, .12); }
  .nm-tranh img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
  .nm-tranh-trong { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; }
  .nm-tranh-trong span { max-width: 70%; text-align: center; font: 700 clamp(2.4rem, 7vw, 4.4rem)/1.1 var(--chu-dep); color: var(--vang-sang);
    background: var(--vang-chu); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .nm-the { position: relative; display: grid; justify-items: start; gap: 12px; padding: 30px 28px 30px; border-radius: var(--bo);
    background: linear-gradient(135deg, rgba(44, 24, 16, .92), rgba(18, 9, 7, .92)); border: 1px solid var(--vien); box-shadow: var(--bong);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .nm-the::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--he-1), transparent); }
  .nm-huy-hieu { width: 108px; height: auto; margin: -78px 0 0 -6px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
  .nm-the h3 { font: 700 clamp(2rem, 4.2vw, 2.9rem)/1.1 var(--chu-dep); color: var(--vang-sang); background: var(--vang-chu); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; }
  .nm-he { position: absolute; top: -14px; right: 24px; display: grid; justify-items: center; gap: 2px; width: 54px; padding: 12px 0 14px;
    color: #ffe2a0; background: linear-gradient(180deg, #c53321, #8e1c13); font: 800 1.05rem/1.05 var(--chu-dep); text-transform: uppercase;
    letter-spacing: .04em; text-align: center; box-shadow: 0 10px 22px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 210, 140, .25);
    clip-path: polygon(0 3%, 12% 0, 30% 2%, 50% 0, 72% 2%, 90% 0, 100% 4%, 98% 30%, 100% 62%, 97% 96%, 84% 100%, 60% 98%, 38% 100%, 14% 97%, 0 100%, 2% 66%, 0 34%); }
  .nm-he span:first-child { font-size: .78rem; }
  .nm-trang-thai { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: 999px; font-weight: 700;
    color: #9ff0c8; background: rgba(95, 211, 160, .1); border: 1px solid rgba(95, 211, 160, .3); }
  .nm-trang-thai.dong { color: #ffc2a6; background: rgba(255, 154, 122, .1); border-color: rgba(255, 154, 122, .3); }
  .nm-trang-thai.dong .cham { background: var(--hong); box-shadow: 0 0 0 4px rgba(255, 154, 122, .16); }
  .nm-r:nth-of-type(1):checked ~ .nm-bang .nm-phai:nth-child(1), .nm-r:nth-of-type(2):checked ~ .nm-bang .nm-phai:nth-child(2),
  .nm-r:nth-of-type(3):checked ~ .nm-bang .nm-phai:nth-child(3), .nm-r:nth-of-type(4):checked ~ .nm-bang .nm-phai:nth-child(4),
  .nm-r:nth-of-type(5):checked ~ .nm-bang .nm-phai:nth-child(5), .nm-r:nth-of-type(6):checked ~ .nm-bang .nm-phai:nth-child(6),
  .nm-r:nth-of-type(7):checked ~ .nm-bang .nm-phai:nth-child(7), .nm-r:nth-of-type(8):checked ~ .nm-bang .nm-phai:nth-child(8),
  .nm-r:nth-of-type(9):checked ~ .nm-bang .nm-phai:nth-child(9), .nm-r:nth-of-type(10):checked ~ .nm-bang .nm-phai:nth-child(10),
  .nm-r:nth-of-type(11):checked ~ .nm-bang .nm-phai:nth-child(11), .nm-r:nth-of-type(12):checked ~ .nm-bang .nm-phai:nth-child(12),
  .nm-r:nth-of-type(13):checked ~ .nm-bang .nm-phai:nth-child(13), .nm-r:nth-of-type(14):checked ~ .nm-bang .nm-phai:nth-child(14),
  .nm-r:nth-of-type(15):checked ~ .nm-bang .nm-phai:nth-child(15), .nm-r:nth-of-type(16):checked ~ .nm-bang .nm-phai:nth-child(16) {
    display: grid; animation: hien-len .5s both; }
  .nm-r:nth-of-type(1):checked ~ .nm-chon label:nth-child(1) .o, .nm-r:nth-of-type(2):checked ~ .nm-chon label:nth-child(2) .o,
  .nm-r:nth-of-type(3):checked ~ .nm-chon label:nth-child(3) .o, .nm-r:nth-of-type(4):checked ~ .nm-chon label:nth-child(4) .o,
  .nm-r:nth-of-type(5):checked ~ .nm-chon label:nth-child(5) .o, .nm-r:nth-of-type(6):checked ~ .nm-chon label:nth-child(6) .o,
  .nm-r:nth-of-type(7):checked ~ .nm-chon label:nth-child(7) .o, .nm-r:nth-of-type(8):checked ~ .nm-chon label:nth-child(8) .o,
  .nm-r:nth-of-type(9):checked ~ .nm-chon label:nth-child(9) .o, .nm-r:nth-of-type(10):checked ~ .nm-chon label:nth-child(10) .o,
  .nm-r:nth-of-type(11):checked ~ .nm-chon label:nth-child(11) .o, .nm-r:nth-of-type(12):checked ~ .nm-chon label:nth-child(12) .o,
  .nm-r:nth-of-type(13):checked ~ .nm-chon label:nth-child(13) .o, .nm-r:nth-of-type(14):checked ~ .nm-chon label:nth-child(14) .o,
  .nm-r:nth-of-type(15):checked ~ .nm-chon label:nth-child(15) .o, .nm-r:nth-of-type(16):checked ~ .nm-chon label:nth-child(16) .o {
    border-color: var(--vang); background: linear-gradient(135deg, #d0412b, #6e140e); scale: 1.12;
    box-shadow: inset 0 0 0 3px rgba(14, 8, 6, .55), 0 0 0 5px rgba(226, 179, 92, .14), 0 0 28px rgba(210, 59, 37, .55); }
  .nm-r:nth-of-type(1):checked ~ .nm-chon label:nth-child(1) .nm-chu, .nm-r:nth-of-type(2):checked ~ .nm-chon label:nth-child(2) .nm-chu,
  .nm-r:nth-of-type(3):checked ~ .nm-chon label:nth-child(3) .nm-chu, .nm-r:nth-of-type(4):checked ~ .nm-chon label:nth-child(4) .nm-chu,
  .nm-r:nth-of-type(5):checked ~ .nm-chon label:nth-child(5) .nm-chu, .nm-r:nth-of-type(6):checked ~ .nm-chon label:nth-child(6) .nm-chu,
  .nm-r:nth-of-type(7):checked ~ .nm-chon label:nth-child(7) .nm-chu, .nm-r:nth-of-type(8):checked ~ .nm-chon label:nth-child(8) .nm-chu,
  .nm-r:nth-of-type(9):checked ~ .nm-chon label:nth-child(9) .nm-chu, .nm-r:nth-of-type(10):checked ~ .nm-chon label:nth-child(10) .nm-chu,
  .nm-r:nth-of-type(11):checked ~ .nm-chon label:nth-child(11) .nm-chu, .nm-r:nth-of-type(12):checked ~ .nm-chon label:nth-child(12) .nm-chu,
  .nm-r:nth-of-type(13):checked ~ .nm-chon label:nth-child(13) .nm-chu, .nm-r:nth-of-type(14):checked ~ .nm-chon label:nth-child(14) .nm-chu,
  .nm-r:nth-of-type(15):checked ~ .nm-chon label:nth-child(15) .nm-chu, .nm-r:nth-of-type(16):checked ~ .nm-chon label:nth-child(16) .nm-chu {
    color: var(--vang-sang); }
  .nm-r:focus-visible ~ .nm-chon { outline: 1px dashed var(--vien); outline-offset: 8px; border-radius: 12px; }

  /* 1240 Cao Thủ Võ Lâm: the world's first five of each list; a row of a board (this block, the rankings page): the place in a seal -
     gold, silver, bronze for the first three - the name and its school in its element's colour, the level or the money */
  .xep-hang { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(168, 38, 27, .32), transparent 70%), url(/static/trang-tri/hat.svg?v=745bc472156d), var(--den); }
  .xh-luoi { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .xh-cot, .bxh-bang { position: relative; min-width: 0; overflow: hidden; border-radius: var(--bo); background: linear-gradient(180deg, var(--den-3), var(--den-2));
    border: 1px solid var(--vien-nhat); box-shadow: var(--bong-nho); }
  .xh-cot::before, .bxh-bang::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; opacity: .75;
    background: linear-gradient(90deg, transparent, var(--vang), transparent); }
  .xh-cot:last-child::before, .bxh-bang.giau::before { background: linear-gradient(90deg, transparent, var(--son-sang), transparent); }
  .xh-cot h3, .bxh-dau { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--vien-nhat);
    background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(168, 38, 27, .28), transparent 70%); }
  .xh-cot h3, .bxh-dau h3 { font: 700 1.2rem/1.25 var(--chu-dep); color: var(--vang-sang); }
  .bxh-dau { justify-content: space-between; }
  .bxh-dau h3 { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .xh-cot h3 .i, .bxh-dau h3 .i { color: var(--vang); }
  .bxh-don-vi { flex: none; color: var(--nga-mo-2); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .xh-ds, .bxh-ds { list-style: none; padding: 6px 6px 10px; }
  .bxh-dong { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px 9px 8px;
    border-bottom: 1px dashed var(--vien-nhat); border-radius: 10px; transition: background-color .2s; }
  .bxh-dong:last-child { border-bottom-color: transparent; }
  .bxh-dong:hover { background: rgba(226, 179, 92, .06); }
  .bxh-hang { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; rotate: 45deg; border-radius: 8px; border: 1px solid var(--vien);
    background: linear-gradient(135deg, #2c1610, #120907); }
  .bxh-hang b { rotate: -45deg; color: var(--nga-mo); font: 700 .92rem/1 var(--chu); font-variant-numeric: tabular-nums; }
  .hang-1 .bxh-hang { border-color: #ffe7a3; background: linear-gradient(135deg, #fff0bf, #d39b3c 55%, #8a5a17); box-shadow: 0 0 20px rgba(246, 217, 147, .45); }
  .hang-2 .bxh-hang { border-color: #f4f1ea; background: linear-gradient(135deg, #fbf8f1, #bcb5a6 55%, #77705f); box-shadow: 0 0 14px rgba(244, 241, 234, .2); }
  .hang-3 .bxh-hang { border-color: #f3c49a; background: linear-gradient(135deg, #f6caa0, #b56d3b 55%, #6e3b1b); box-shadow: 0 0 14px rgba(240, 185, 138, .22); }
  .hang-1 .bxh-hang b, .hang-2 .bxh-hang b, .hang-3 .bxh-hang b { color: #24120a; }
  .bxh-nguoi { display: grid; min-width: 0; line-height: 1.35; }
  .bxh-nv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nga); font-weight: 700; }
  .hang-1 .bxh-nv { color: var(--vang-sang); }
  .bxh-phai { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--he-1); font-size: .8rem; font-weight: 600; opacity: .9; }
  .bxh-so { color: var(--vang); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
  .bxh-trong { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 18px; color: var(--nga-mo); text-align: center; }
  .xh-them { margin-top: clamp(26px, 4vw, 40px); text-align: center; }

  /* the last call: the downloads again, on cinnabar lacquer flecked with gold */
  .bat-dau { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px);
    background: radial-gradient(circle at 18% 30%, rgba(246, 217, 147, .1) 0 2px, transparent 3px), radial-gradient(circle at 72% 64%, rgba(246, 217, 147, .12) 0 1.5px, transparent 2.5px),
      radial-gradient(ellipse 80% 90% at 50% 50%, #7a1a11, #3a0b07 70%, #1c0705 100%); border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); }
  .bat-dau::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(/static/trang-tri/hat.svg?v=745bc472156d); opacity: .7; }
  .bat-dau-in { position: relative; display: grid; justify-items: center; gap: 22px; max-width: 760px; margin: 0 auto; text-align: center; }
  .bat-dau-logo { width: 180px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
  .bat-dau .hero-nut { justify-content: center; margin-top: 0; animation: none; }

  @media (min-width: 900px) {
    .td-luoi { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
    .xh-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nm-phai { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .nm-the { padding: 40px 36px; }
  }
  @media (max-width: 899px) {
    .hero { min-height: clamp(560px, 100svh, 820px); }
    .hero-anh img { object-position: 60% 20%; }
    .hero::before { background: linear-gradient(0deg, var(--den) 0%, rgba(14, 8, 6, .86) 34%, rgba(14, 8, 6, .2) 64%, rgba(14, 8, 6, .5) 100%); }
    .hero-in { padding-bottom: 92px; }
    .hero-logo { margin-left: -2%; }
    .trang-thai { font-size: .95rem; }
    .nut { min-height: 50px; padding: 8px 18px 8px 14px; }
    .hero-nut .nut, .hero-nut .qua { flex: 1 1 200px; }
    .hero-nut .qua > summary { width: 100%; }
    .nm-chon { gap: 12px 4px; }
    .nm-chon label { width: 68px; gap: 10px; }
    .nm-chon .o { width: 46px; height: 46px; }
    .nm-chon .o img { width: 30px; height: 30px; }
    .nm-chu { font-size: .72rem; }
    .nm-the { margin-top: -24px; }
    .td-noi-dung { padding: 4px 20px 24px; }
  }
  @media (max-width: 420px) {
    .td-nhan label { padding: 0 4px; font-size: .92rem; }
    .td-nhan label .i { display: none; }
  }
}

/* ---- the lists, a post, the error page */
@layer trang {
  .dau-con { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 88px) var(--le) clamp(30px, 5vw, 48px);
    background: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(168, 38, 27, .32), transparent 70%), url(/static/trang-tri/hat.svg?v=745bc472156d), var(--den);
    border-bottom: 1px solid var(--vien-nhat); }
  .dau-con::after { content: ""; position: absolute; right: max(var(--le), calc(50% - 600px)); bottom: 18px; width: 240px; height: 28px; opacity: .7;
    background: url(/static/trang-tri/may.svg?v=1645bb8adda5) center / contain no-repeat; }
  .dau-con-in { max-width: var(--rong); margin: 0 auto; display: grid; gap: 12px; }
  .dau-con-chu { font: 700 clamp(2.2rem, 6vw, 3.6rem)/1.05 var(--chu-dep); color: var(--vang-sang); background: var(--vang-chu); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; }
  .dau-con-phu { color: var(--nga-mo); }

  .ds-bai { max-width: var(--rong); margin: 0 auto; padding: 36px var(--le) 24px; display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .the-bai { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--bo); background: var(--den-2);
    border: 1px solid var(--vien-nhat); box-shadow: var(--bong-nho); transition: transform .3s, border-color .3s, box-shadow .3s; }
  .the-bai:hover { transform: translateY(-4px); border-color: var(--vien); box-shadow: var(--bong); }
  .the-bai.co-ghim { border-color: rgba(255, 154, 122, .35); }
  .the-bia { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 30% 30%, #3a1a10, #140a07 70%); }
  .the-bia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
  .the-bai:hover .the-bia img { transform: scale(1.05); }
  .the-chu { display: grid; gap: 10px; padding: 18px 22px 24px; }
  .the-bai h2 { font: 700 1.2rem/1.35 var(--chu); }
  .the-bai h2 a { color: var(--nga); text-decoration: none; }
  .the-bai h2 a::after { content: ""; position: absolute; inset: 0; }
  .the-bai:hover h2 a { color: var(--vang-sang); }
  .the-tom-tat { color: var(--nga-mo); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ds-trong { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; color: var(--nga-mo);
    border: 1px dashed var(--vien); border-radius: var(--bo); }
  .trang-so { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: var(--rong); margin: 0 auto;
    padding: 8px var(--le) 72px; }
  .trang-so a, .trang-so b, .trang-cach { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px;
    font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
  .trang-so a { color: var(--nga); border: 1px solid var(--vien-nhat); background: var(--den-2); }
  .trang-so a:hover { border-color: var(--vang); color: var(--vang-sang); }
  .trang-so b { color: #fff4e2; background: linear-gradient(180deg, #c83a26, #8f2016); }
  .trang-cach { color: var(--nga-mo-2); }

  /* 1240 the rankings: the world's two boards, then a school's two under the seals of the eleven groups (radio buttons, no script) */
  .bxh-khung { max-width: var(--rong); margin: 0 auto; padding: clamp(32px, 5vw, 52px) var(--le) 8px; }
  .bxh-khung:last-child { padding-bottom: 88px; }
  .bxh-muc { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font: 700 clamp(1.45rem, 3vw, 1.95rem)/1.2 var(--chu-dep); color: var(--nga); }
  .bxh-muc .i { width: 26px; height: 26px; color: var(--vang); }
  .bxh-muc::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--vien), transparent); }
  .bxh-doi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bxh-r { position: absolute; opacity: 0; pointer-events: none; }
  .bxh-chon { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 8px; margin: 0 auto 28px; }
  .bxh-chon label { display: grid; justify-items: center; gap: 12px; width: 82px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bxh-nhom > .bxh-doi { display: none; }
  .bxh-r:nth-of-type(1):checked ~ .bxh-nhom > .bxh-doi:nth-child(1), .bxh-r:nth-of-type(2):checked ~ .bxh-nhom > .bxh-doi:nth-child(2),
  .bxh-r:nth-of-type(3):checked ~ .bxh-nhom > .bxh-doi:nth-child(3), .bxh-r:nth-of-type(4):checked ~ .bxh-nhom > .bxh-doi:nth-child(4),
  .bxh-r:nth-of-type(5):checked ~ .bxh-nhom > .bxh-doi:nth-child(5), .bxh-r:nth-of-type(6):checked ~ .bxh-nhom > .bxh-doi:nth-child(6),
  .bxh-r:nth-of-type(7):checked ~ .bxh-nhom > .bxh-doi:nth-child(7), .bxh-r:nth-of-type(8):checked ~ .bxh-nhom > .bxh-doi:nth-child(8),
  .bxh-r:nth-of-type(9):checked ~ .bxh-nhom > .bxh-doi:nth-child(9), .bxh-r:nth-of-type(10):checked ~ .bxh-nhom > .bxh-doi:nth-child(10),
  .bxh-r:nth-of-type(11):checked ~ .bxh-nhom > .bxh-doi:nth-child(11) { display: grid; animation: hien-len .4s both; }
  .bxh-r:nth-of-type(1):checked ~ .bxh-chon label:nth-child(1) .o, .bxh-r:nth-of-type(2):checked ~ .bxh-chon label:nth-child(2) .o,
  .bxh-r:nth-of-type(3):checked ~ .bxh-chon label:nth-child(3) .o, .bxh-r:nth-of-type(4):checked ~ .bxh-chon label:nth-child(4) .o,
  .bxh-r:nth-of-type(5):checked ~ .bxh-chon label:nth-child(5) .o, .bxh-r:nth-of-type(6):checked ~ .bxh-chon label:nth-child(6) .o,
  .bxh-r:nth-of-type(7):checked ~ .bxh-chon label:nth-child(7) .o, .bxh-r:nth-of-type(8):checked ~ .bxh-chon label:nth-child(8) .o,
  .bxh-r:nth-of-type(9):checked ~ .bxh-chon label:nth-child(9) .o, .bxh-r:nth-of-type(10):checked ~ .bxh-chon label:nth-child(10) .o,
  .bxh-r:nth-of-type(11):checked ~ .bxh-chon label:nth-child(11) .o {
    border-color: var(--vang); background: linear-gradient(135deg, #d0412b, #6e140e); scale: 1.12;
    box-shadow: inset 0 0 0 3px rgba(14, 8, 6, .55), 0 0 0 5px rgba(226, 179, 92, .14), 0 0 28px rgba(210, 59, 37, .55); }
  .bxh-r:nth-of-type(1):checked ~ .bxh-chon label:nth-child(1) .nm-chu, .bxh-r:nth-of-type(2):checked ~ .bxh-chon label:nth-child(2) .nm-chu,
  .bxh-r:nth-of-type(3):checked ~ .bxh-chon label:nth-child(3) .nm-chu, .bxh-r:nth-of-type(4):checked ~ .bxh-chon label:nth-child(4) .nm-chu,
  .bxh-r:nth-of-type(5):checked ~ .bxh-chon label:nth-child(5) .nm-chu, .bxh-r:nth-of-type(6):checked ~ .bxh-chon label:nth-child(6) .nm-chu,
  .bxh-r:nth-of-type(7):checked ~ .bxh-chon label:nth-child(7) .nm-chu, .bxh-r:nth-of-type(8):checked ~ .bxh-chon label:nth-child(8) .nm-chu,
  .bxh-r:nth-of-type(9):checked ~ .bxh-chon label:nth-child(9) .nm-chu, .bxh-r:nth-of-type(10):checked ~ .bxh-chon label:nth-child(10) .nm-chu,
  .bxh-r:nth-of-type(11):checked ~ .bxh-chon label:nth-child(11) .nm-chu { color: var(--vang-sang); }
  .bxh-r:focus-visible ~ .bxh-chon { outline: 1px dashed var(--vien); outline-offset: 8px; border-radius: 12px; }

  /* 1240 the schedule: a card a group, its jobs by the hour; two columns of cards on a wide screen */
  .lich { max-width: var(--rong); margin: 0 auto; padding: clamp(28px, 5vw, 48px) var(--le) 88px; columns: 2 440px; column-gap: 24px; }
  .lich:has(> .ds-trong) { columns: auto; }
  .lich-nhom { break-inside: avoid; margin: 0 0 24px; overflow: hidden; border-radius: var(--bo); background: linear-gradient(180deg, var(--den-3), var(--den-2));
    border: 1px solid var(--vien-nhat); box-shadow: var(--bong-nho); }
  .lich-dau { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--vien-nhat);
    background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(168, 38, 27, .3), transparent 70%); }
  .lich-dau-o { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 4px; rotate: 45deg; border-radius: 10px;
    border: 1px solid rgba(255, 210, 140, .45); background: linear-gradient(135deg, #c83a26, #6e140e); box-shadow: 0 6px 16px rgba(168, 38, 27, .35); }
  .lich-dau-o .i { rotate: -45deg; width: 20px; height: 20px; color: var(--vang-sang); }
  .lich-dau h2 { flex: 1; min-width: 0; font: 700 1.22rem/1.3 var(--chu-dep); color: var(--vang-sang); }
  .lich-dem { flex: none; color: var(--nga-mo-2); font-size: .82rem; font-weight: 600; }
  .lich-ds { list-style: none; padding: 6px 8px 10px; }
  .lich-ds li { display: flex; align-items: flex-start; gap: 14px; padding: 11px 10px; border-bottom: 1px dashed var(--vien-nhat); }
  .lich-ds li:last-child { border-bottom: 0; }
  .lich-gio { flex: none; display: grid; place-items: center; min-width: 66px; height: 32px; border-radius: 9px; color: var(--vang-sang);
    background: rgba(226, 179, 92, .1); border: 1px solid var(--vien-nhat); font: 700 1rem/1 var(--chu); font-variant-numeric: tabular-nums; }
  .lich-gio-trong { color: var(--nga-mo-2); background: rgba(0, 0, 0, .25); }
  .lich-gio-trong .i { width: 17px; height: 17px; }
  .lich-chu { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
  .lich-ten { color: var(--nga); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
  .lich-lap { color: var(--nga-mo); font-size: .86rem; }

  /* 1240 the downloads: the owner's picture behind, a card a platform, what the files of the game say about the opening */
  .tai { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: calc(100svh - var(--cao-dau));
    padding: clamp(40px, 8vw, 96px) var(--le); border-bottom: 1px solid var(--vien-nhat); }
  .tai-anh { position: absolute; inset: 0; z-index: -2; }
  .tai-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 32%; }
  .tai::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(14, 8, 6, .96) 0%, rgba(14, 8, 6, .84) 45%, rgba(14, 8, 6, .35) 100%), linear-gradient(0deg, var(--den), transparent 40%); }
  .tai-in { width: 100%; max-width: var(--rong); margin: 0 auto; display: grid; justify-items: start; gap: 22px; }
  .tai-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 330px)); gap: 20px; max-width: 100%; }
  .tai-o { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 26px 24px; border-radius: var(--bo);
    background: linear-gradient(135deg, rgba(44, 24, 16, .92), rgba(18, 9, 7, .92)); border: 1px solid var(--vien); box-shadow: var(--bong);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .tai-o h2 { font: 700 1.6rem/1.2 var(--chu-dep); color: var(--vang-sang); }
  .tai-o p { color: var(--nga-mo); }
  .tai-o .nut { margin-top: 8px; }
  .tai-bieu { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; color: var(--vang-sang); background: rgba(226, 179, 92, .1);
    border: 1px solid var(--vien); }
  .tai-bieu .i { width: 28px; height: 28px; }
  .tai-trong { display: grid; justify-items: start; gap: 14px; max-width: 560px; padding: 26px 24px; border-radius: var(--bo); border: 1px dashed var(--vien);
    background: rgba(14, 8, 6, .72); }
  .tai-trong b { color: var(--vang-sang); }
  .tai-thong-tin { list-style: none; display: grid; gap: 10px; }
  .tai-thong-tin li { display: flex; align-items: flex-start; gap: 10px; color: var(--nga); text-shadow: 0 2px 8px #000; }
  .tai-thong-tin .i { margin-top: 3px; color: var(--vang); }
  .tai-thong-tin code { padding: 2px 8px; border-radius: 6px; background: rgba(226, 179, 92, .14); color: var(--vang-sang);
    font: 700 1rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; user-select: all; word-break: break-all; }

  .bai { max-width: 860px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) var(--le) 88px; }
  .bai-dau { display: grid; gap: 16px; margin-bottom: 28px; }
  .bai-chu { font: 700 clamp(2rem, 5vw, 3.1rem)/1.15 var(--chu-dep); color: var(--nga); }
  .bai-chu::after { content: ""; display: block; width: 120px; height: 3px; margin-top: 20px; border-radius: 3px; background: linear-gradient(90deg, var(--son-sang), var(--vang), transparent); }
  .bai-tom-tat { padding-left: 18px; border-left: 3px solid var(--son); color: var(--nga-mo); font-size: 1.16rem; }
  .bai-bia { margin: 0 0 32px; }
  /* 1292: a cover never drawn wider than its own pixels (a window's picture of 600 px stays sharp); a wide one fits the column */
  .bai-bia img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--bo); box-shadow: var(--bong); }
  .bai-noi-dung { font-size: 1.08rem; line-height: 1.85; overflow-wrap: anywhere; }
  .bai-noi-dung > * + * { margin-top: 1.1em; }
  .bai-noi-dung h2, .bai-noi-dung h3, .bai-noi-dung h4 { margin-top: 1.8em; color: var(--vang-sang); font-family: var(--chu-dep); }
  .bai-noi-dung h2 { font-size: 1.7rem; }
  .bai-noi-dung h3 { font-size: 1.38rem; }
  .bai-noi-dung h4 { font-size: 1.15rem; }
  .bai-noi-dung ul, .bai-noi-dung ol { padding-left: 1.4em; }
  .bai-noi-dung li + li { margin-top: .35em; }
  .bai-noi-dung li::marker { color: var(--vang); }
  .bai-noi-dung blockquote { margin: 1.4em 0; padding: 12px 20px; border-left: 3px solid var(--son-sang); border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, rgba(168, 38, 27, .16), rgba(168, 38, 27, .02)); color: var(--nga); }
  .bai-noi-dung pre { overflow-x: auto; padding: 16px; border-radius: 12px; background: #080403; border: 1px solid var(--vien-nhat); font-size: .92rem; }
  .bai-noi-dung code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
  .bai-noi-dung :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: rgba(226, 179, 92, .1); }
  .bai-noi-dung hr { height: 26px; border: 0; margin: 2em auto; width: 220px; background: url(/static/trang-tri/may.svg?v=1645bb8adda5) center / contain no-repeat; }
  .bai-noi-dung figure { margin: 1.6em 0; }
  .bai-noi-dung figure img { max-width: 100%; height: auto; border-radius: 12px; }
  .bai-noi-dung figure.can-giua img { margin: 0 auto; }
  .bai-noi-dung figure.can-phai img { margin-left: auto; }
  .bai-noi-dung figcaption { margin-top: 8px; color: var(--nga-mo); font-size: .9rem; text-align: center; }
  .bai-noi-dung table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: .96rem; }
  /* 1291: a cell's words stay whole - a table sizes its columns by their longest words, and the text's "anywhere" let a phone's width
     squeeze them to a letter a line; a right-aligned column holds numbers, never broken */
  .bai-noi-dung td, .bai-noi-dung th { padding: 8px 12px; border: 1px solid var(--vien); vertical-align: top; overflow-wrap: break-word; }
  .bai-noi-dung th { color: var(--vang-sang); background: rgba(226, 179, 92, .1); text-align: left; }
  .bai-noi-dung th.giua, .bai-noi-dung td.giua { text-align: center; }
  .bai-noi-dung th.phai, .bai-noi-dung td.phai { text-align: right; }
  .bai-noi-dung td.phai { white-space: nowrap; }
  /* 1291: an article's live tables (bangsong.go) - drawn from the server's config at each showing; an entry of more rows (a score
     mark) is a band over its rows */
  .bai-noi-dung .bang-song th.muc { vertical-align: middle; background: rgba(226, 179, 92, .06); }
  .bai-noi-dung .bang-song tr.muc-dong th { padding-top: 10px; padding-bottom: 10px; color: var(--vang-sang); font-weight: 700;
    letter-spacing: .02em; background: linear-gradient(90deg, rgba(226, 179, 92, .22), rgba(226, 179, 92, .04)); }
  .bai-noi-dung .bang-song tr.boc td { color: var(--vang-sang); font-weight: 600; background: rgba(226, 179, 92, .08); }
  .bai-noi-dung .bang-song tr.boc-dong td:first-of-type { padding-left: 26px; }
  .bai-noi-dung .bang-song tr.boc-khong td { color: var(--nga-mo); }
  .bai-noi-dung .bang-song tr.chua-co td { color: var(--nga-mo); } /* 1293: a season mission no activity of the server finishes */
  .bai-noi-dung .bang-song-nhom tbody + tbody { border-top: 2px solid var(--vien); }
  .bai-noi-dung .bang-song-loi { color: var(--nga-mo); font-style: italic; }
  .bai-chan { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--vien-nhat); }

  .loi { display: grid; justify-items: center; gap: 16px; padding: clamp(80px, 14vh, 140px) var(--le); text-align: center; }
  .loi-so { font: 700 clamp(6rem, 22vw, 11rem)/.9 var(--chu-dep); color: var(--vang-sang); background: var(--vang-chu); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 12px 30px rgba(168, 38, 27, .5)); }
  .loi-chu { max-width: 560px; font: 600 1.25rem/1.5 var(--chu); color: var(--nga); }

  @media (min-width: 900px) {
    .bxh-doi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 899px) {
    .dau-con { padding-bottom: 58px; } /* the cloud's curl below the words, not over them */
    .dau-con::after { bottom: 16px; }
    .bxh-chon { gap: 12px 4px; }
    .bxh-chon label { width: 68px; gap: 10px; }
    .bxh-chon .o { width: 46px; height: 46px; }
    .bxh-chon .o img { width: 30px; height: 30px; }
    .bxh-dong { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding-right: 10px; }
    .tai::before { background: linear-gradient(0deg, var(--den) 0%, rgba(14, 8, 6, .9) 45%, rgba(14, 8, 6, .55) 100%); }
  }
  @media (min-width: 1000px) {
    .ds-bai.trang-dau .the-bai:first-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .ds-bai.trang-dau .the-bai:first-child .the-bia { aspect-ratio: auto; min-height: 100%; }
    .ds-bai.trang-dau .the-bai:first-child .the-chu { align-content: center; padding: 32px; }
    .ds-bai.trang-dau .the-bai:first-child h2 { font: 700 1.7rem/1.25 var(--chu-dep); }
  }
}

/* ---- 1249 the id door (id.<the domain>): an account made, a password changed - the owner's art behind, a lacquer card with the form;
   the bar keeps its two links on a phone (no menu sheet: two words fit) */
@layer trang {
  .tk { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: calc(100svh - var(--cao-dau));
    padding: clamp(32px, 6vw, 80px) var(--le); border-bottom: 1px solid var(--vien-nhat); }
  .tk-anh { position: absolute; inset: 0; z-index: -2; }
  .tk-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 32%; }
  .tk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 50% 70% at 78% 50%, rgba(168, 38, 27, .2), transparent 70%),
      linear-gradient(90deg, rgba(14, 8, 6, .97) 0%, rgba(14, 8, 6, .86) 46%, rgba(14, 8, 6, .62) 100%), linear-gradient(0deg, var(--den), transparent 42%); }
  .tk-in { width: 100%; max-width: var(--rong); margin: 0 auto; display: grid; align-items: center; gap: clamp(28px, 5vw, 72px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
  .tk-in-mot { grid-template-columns: minmax(0, 720px); justify-content: start; gap: 28px; }
  .tk-gioi { display: grid; align-content: start; gap: 16px; }
  .tk-nhan-tren { display: inline-flex; align-items: center; gap: 8px; color: var(--vang); font-size: .8rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; }
  .tk-nhan-tren .i { width: 18px; height: 18px; }
  .tk-gioi .dau-con-phu { max-width: 560px; font-size: 1.06rem; text-shadow: 0 2px 10px #000; }
  .tk-diem { list-style: none; display: grid; gap: 14px; max-width: 560px; margin-top: 10px; }
  .tk-diem li { display: flex; align-items: flex-start; gap: 12px; color: var(--nga); line-height: 1.55; text-shadow: 0 2px 8px #000; }
  .tk-diem li b { color: var(--vang-sang); }
  .tk-diem .i { margin-top: 3px; color: var(--vang); }

  /* the card: lacquer with a rim of gold leaf and cinnabar on top */
  .tk-the { position: relative; padding: clamp(24px, 4vw, 36px); border-radius: 22px; border: 1px solid var(--vien);
    background: linear-gradient(160deg, rgba(48, 26, 17, .95), rgba(16, 8, 6, .97)); box-shadow: var(--bong), inset 0 1px 0 rgba(255, 233, 176, .08);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .tk-the::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--vang), var(--son-sang), transparent); }
  .tk-the::after { content: ""; position: absolute; right: 22px; bottom: 18px; width: 120px; height: 16px; opacity: .3; pointer-events: none;
    background: url(/static/trang-tri/may.svg?v=1645bb8adda5) center / contain no-repeat; }
  .tk-the h2 { margin-bottom: 20px; font: 700 1.55rem/1.2 var(--chu-dep); color: var(--vang-sang); }
  .tk-form { display: grid; gap: 18px; }
  .tk-o { display: grid; gap: 7px; }
  .tk-nhan { color: var(--nga); font-size: .95rem; font-weight: 700; }
  .tk-o input { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--vien); border-radius: 12px; background: rgba(8, 4, 3, .72);
    color: var(--nga); font: 500 1.05rem/1.3 var(--chu); caret-color: var(--vang); transition: border-color .2s, box-shadow .2s, background-color .2s; }
  .tk-o input:hover { border-color: rgba(226, 179, 92, .52); }
  .tk-o input:focus { outline: none; border-color: var(--vang); background: rgba(14, 8, 6, .92); box-shadow: 0 0 0 4px rgba(226, 179, 92, .16); }
  .tk-o input:user-invalid { border-color: var(--hong); box-shadow: 0 0 0 4px rgba(255, 154, 122, .14); }
  .tk-o input[type="password"] { letter-spacing: .12em; }
  .tk-goi-y { color: var(--nga-mo-2); font-size: .85rem; line-height: 1.45; }
  .tk-nut { width: 100%; justify-content: center; margin-top: 4px; }
  .tk-phu { margin-top: 20px; color: var(--nga-mo); font-size: .92rem; text-align: center; }
  .tk-phu-chu { color: var(--nga-mo); }
  .tk-bao { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; font-weight: 600; line-height: 1.5; }
  .tk-bao .i { margin-top: 2px; }
  .tk-bao-loi { color: #ffe1d6; background: rgba(168, 38, 27, .24); border: 1px solid rgba(255, 154, 122, .48); }
  .tk-bao-loi .i { color: var(--hong); }
  /* a field only a script fills: out of sight and out of the tab order, never display:none (a form filler fills what it can read) */
  .tk-bay { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  /* done: the jade seal, the account's name, what to do now */
  .tk-xong { display: grid; justify-items: center; gap: 12px; text-align: center; }
  .tk-xong h2 { margin: 6px 0 0; }
  .tk-xong-dau { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #0f2f1f;
    background: radial-gradient(circle at 35% 30%, #d7ffe9, var(--ngoc) 58%, #2c9467);
    box-shadow: 0 0 0 8px rgba(95, 211, 160, .14), 0 14px 34px rgba(95, 211, 160, .26); animation: hien-len .5s both; }
  .tk-xong-dau .i { width: 40px; height: 40px; stroke-width: 2.4; }
  .tk-ten-tk { max-width: 100%; padding: 6px 18px; border-radius: 999px; border: 1px solid var(--vien); background: rgba(226, 179, 92, .12);
    color: var(--vang-sang); font: 700 1.15rem/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
  .tk-xong-chu { max-width: 360px; color: var(--nga-mo); }
  .tk-hang-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

  /* the door's first page: two ways in */
  .tk-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
  .tk-chon-o { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px 22px 20px; border-radius: 18px;
    border: 1px solid var(--vien); background: linear-gradient(150deg, rgba(48, 26, 17, .94), rgba(16, 8, 6, .95)); box-shadow: var(--bong-nho);
    color: var(--nga); text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
  .tk-chon-o:hover { color: var(--nga); transform: translateY(-3px); border-color: var(--vang); box-shadow: var(--bong); }
  .tk-chon-o > .i { flex: none; margin-left: auto; color: var(--vang); transition: transform .25s; }
  .tk-chon-o:hover > .i { transform: translateX(4px); }
  .tk-chon-dau { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--vang-sang);
    background: linear-gradient(135deg, #c83a26, #6e140e); border: 1px solid rgba(255, 210, 140, .4); box-shadow: 0 8px 20px rgba(168, 38, 27, .35); }
  .tk-chon-dau .i { width: 26px; height: 26px; }
  .tk-chon-chu { display: grid; gap: 2px; }
  .tk-chon-chu b { font: 700 1.3rem/1.2 var(--chu-dep); color: var(--vang-sang); }
  .tk-chon-chu small { color: var(--nga-mo); font-size: .9rem; }
  .tk-an-toan { display: flex; align-items: flex-start; gap: 10px; max-width: 620px; color: var(--nga-mo); font-size: .92rem; text-shadow: 0 2px 8px #000; }
  .tk-an-toan .i { margin-top: 2px; color: var(--vang); }

  @media (max-width: 1099px) {
    .dau-in > .tk-menu { display: flex; } /* the id door has no phone's menu: its three items stay in the bar */
  }
  @media (max-width: 899px) {
    .tk-menu a { padding: 8px 12px; }
    .tk-in { grid-template-columns: minmax(0, 1fr); }
    .tk::before { background: linear-gradient(0deg, var(--den) 0%, rgba(14, 8, 6, .92) 55%, rgba(14, 8, 6, .7) 100%); }
    .tk-diem { gap: 10px; font-size: .95rem; }
  }
  @media (max-width: 599px) {
    .tk-menu { gap: 0; }
    .tk-menu a { padding: 8px 9px; font-size: .9rem; }
    .tk-menu a .i, .tk-menu .tk-ve { display: none; }
    .tk { align-items: start; }
    .tk-diem { display: none; } /* the card's hints say the rules; the page stays one screen */
    .tk-the::after { display: none; } /* the cloud's curl met the link of the card's last line */
  }
}

/* ---- the editor's marks (1218: the admin door's editor writes them; admin.css draws them the same) and the newer CSS */
@layer tien-ich {
  .mau-vang { color: #f0c46a; } .mau-do { color: #ff6b52; } .mau-cam { color: #f39a45; } .mau-luc { color: #73d35d; } .mau-xanh { color: #63b6ee; }
  .mau-tim { color: #bd8cec; } .mau-trang { color: #ffffff; } .mau-xam { color: #b4b4b4; }
  .can-giua { text-align: center; } .can-phai { text-align: right; }
  .ngay { white-space: nowrap; } /* 1280: a date never breaks at its hyphens (the pages' dates: dateText of pages.go) */

  /* a reveal as a block enters the view - tied to the scroll, no script; only where the browser has it */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .hien-dan { animation: hien-len linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    }
  }
  @media (forced-colors: active) {
    .khoi-chu, .dau-con-chu, .nm-the h3, .loi-so, .nm-tranh-trong span { -webkit-text-fill-color: CanvasText; background: none; }
  }
}

/* one page to the next: the old one fades as the new one rises (Chrome 126+, Safari 18.2+); the bar stays in place */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease-out both chuyen-di; }
::view-transition-new(root) { animation: .32s ease-out both chuyen-den; }
@keyframes chuyen-di { to { opacity: 0; } }
@keyframes chuyen-den { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}