/* Xep Gach — mau nen mu nhung dem, gach bong nhu son mong, diem nhan vang champagne.
   Mau gach co y KHAC bang mau chuan cua Tetris (xem README muc Ban quyen). */
:root {
  --nen: #1c0f24;
  --nen-2: #241330;
  --the: #2a1737;
  --the-2: #332041;
  --gieng: #140a1a;
  --vien: rgba(255, 220, 240, .10);
  --vien-vang: rgba(242, 207, 141, .38);
  --chu: #f6e8ef;
  --chu-mo: #bba2c6;
  --chu-nhat: #8f7a9b;
  --vang: #f2cf8d;
  --vang-dam: #dcae58;
  --hong: #ff8fb1;
  --do: #ff6b81;
  --bac-ha: #45d1a8;
  --vang-sang: #fbe2b0;
  --chu-tren-vang: #2a1606;
  --to-vang: rgba(242, 207, 141, .10);
  --lop-sang: rgba(255, 255, 255, .06);
  --lop-sang-2: rgba(255, 255, 255, .035);
  --lop-toi: rgba(0, 0, 0, .22);
  --nut-hover: #3c2750;
  --bong: rgba(0, 0, 0, .7);
  --quang-1: #3b1d4d;
  --quang-2: #321235;
  --kieu-nen: linear-gradient(160deg, #3a2149 0%, #2a1737 55%, #24132f 100%);
  --ban-1: #1a0c21;
  --ban-2: #12071a;
  --bao-nen: #3d2550;
  --bao-do: #5a1f33;
  --phu-mo: rgba(18, 7, 26, .74);
  --loi: #ff9aaa;
  --cam-chu: #ffc9d4;
  --chu-to: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
  --chu-than: "Be Vietnam Pro", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font: 15px/1.5 var(--chu-than);
  color: var(--chu);
  background:
    radial-gradient(900px 520px at 50% -12%, var(--quang-1) 0%, transparent 62%),
    radial-gradient(700px 480px at 108% 105%, var(--quang-2) 0%, transparent 60%),
    var(--nen);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--chu-to); margin: 0; letter-spacing: -.01em; }
.mo { color: var(--chu-mo); }

/* ---------------------------------------------------------------- nut */
.nut-vang, .nut-phu, .nut-tron {
  border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 700;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.nut-vang {
  color: var(--chu-tren-vang);
  background: linear-gradient(180deg, var(--vang-sang) 0%, var(--vang) 45%, var(--vang-dam) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 8px 22px -10px var(--vien-vang);
}
.nut-vang:hover { filter: brightness(1.05); }
.nut-vang:active, .nut-phu:active, .nut-tron:active { transform: translateY(1px) scale(.98); }
.nut-vang:disabled, .nut-phu:disabled { filter: grayscale(.6) brightness(.7); cursor: default; }
.nut-phu { background: var(--the-2); color: var(--chu); box-shadow: 0 0 0 1px var(--vien) inset; }
.nut-phu:hover { background: var(--nut-hover); }
.nut-tron {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--lop-sang); color: var(--chu); text-decoration: none;
  box-shadow: 0 0 0 1px var(--vien) inset;
}
.to { padding: 14px 26px; font-size: 17px; border-radius: 14px; }

/* ---------------------------------------------------------------- khung chung */
.dau-trang {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: 16px 16px 8px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chu); }
.logo canvas { width: 34px; height: 34px; }
.logo span { font-family: var(--chu-to); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.ban-than { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ban-than .nut-phu { padding: 7px 12px; font-size: 13px; }
.anh {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}
.cam {
  max-width: 1120px; margin: 4px auto 0; padding: 0 16px;
  font-size: 13px; color: var(--cam-chu);
}
.cam div {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 14px; border-radius: 12px;
  background: rgba(255, 107, 129, .10); box-shadow: 0 0 0 1px rgba(255, 107, 129, .25) inset;
}
.the {
  background: linear-gradient(180deg, var(--the-2), var(--the));
  border-radius: 20px; padding: 20px;
  box-shadow: 0 0 0 1px var(--vien) inset, 0 20px 40px -28px var(--bong);
}
.the h2 { font-size: 19px; font-weight: 700; }
.loi { color: var(--loi); font-size: 14px; min-height: 1em; margin: 8px 0 0; }
input[type=text], input[type=password], select {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 0;
  background: var(--gieng); box-shadow: 0 0 0 1px var(--vien) inset; font-size: 16px;
}
input:focus { outline: none; box-shadow: 0 0 0 2px var(--vang) inset; }
label { display: block; font-size: 13px; color: var(--chu-mo); margin: 14px 0 6px; }

/* ---------------------------------------------------------------- sanh */
.sanh { max-width: 1120px; margin: 0 auto; padding: 18px 16px 48px; }
.dang-nhap { max-width: 400px; margin: 40px auto; }
.dang-nhap h1 { font-size: 30px; margin-top: 6px; }
.dang-nhap .nut-vang { width: 100%; margin-top: 20px; }

.hero { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: end; margin: 12px 0 22px; }
.hero h1 { font-size: clamp(34px, 7vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; max-width: 12ch; }
.hero p { margin: 10px 0 0; color: var(--chu-mo); max-width: 46ch; font-size: 16px; }
.hero-tranh { display: none; }
@media (min-width: 760px) {
  .hero { grid-template-columns: 1fr auto; }
  .hero-tranh { display: block; width: 260px; height: 208px; }
}

.hai-kieu { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .hai-kieu { grid-template-columns: 1fr 1fr; } }
.kieu {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  border-radius: 22px; padding: 22px 22px 20px;
  background: var(--kieu-nen);
  box-shadow: 0 0 0 1px var(--vien) inset, 0 24px 44px -30px var(--bong);
}
.kieu.dua { box-shadow: 0 0 0 1px var(--vien-vang) inset, 0 24px 44px -30px var(--bong); }
.kieu-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kieu h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.kieu .phu-de { color: var(--vang); font-size: 14px; font-weight: 600; margin-top: 2px; }
.kieu canvas { width: 96px; height: 72px; flex: none; }
.kieu p { margin: 0; color: var(--chu-mo); }
.kieu ul { margin: 2px 0 6px; padding-left: 18px; color: var(--chu-mo); font-size: 14px; }
.kieu ul li { margin: 2px 0; }
.kieu-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.muc-may { display: flex; align-items: center; gap: 10px; margin: 14px 2px 0; font-size: 14px; color: var(--chu-mo); flex-wrap: wrap; }
.nhom-chon { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--gieng); box-shadow: 0 0 0 1px var(--vien) inset; }
.nhom-chon button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--chu-mo); }
.nhom-chon button.bat { background: var(--the-2); color: var(--chu); box-shadow: 0 0 0 1px var(--vien-vang) inset; }

.luoi-duoi { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .luoi-duoi { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.cot { display: grid; gap: 16px; }
.dong-phong {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--vien); cursor: pointer;
}
.dong-phong:first-of-type { border-top: 0; }
.dong-phong .bieu { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--gieng); flex: none; }
.dong-phong .giua { flex: 1; min-width: 0; }
.dong-phong .ten { font-weight: 700; }
.dong-phong .tt { font-size: 13px; color: var(--chu-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhan {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(69, 209, 168, .14); color: #7ee5c6;
}
.nhan.choi { background: var(--to-vang); color: var(--vang); }
.trong { color: var(--chu-mo); font-size: 14px; padding: 8px 0 2px; }

.dong-onl { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dong-onl .giua { flex: 1; min-width: 0; }
.dong-onl .tt { font-size: 12px; color: var(--chu-mo); }

.xh-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.xh-ky { font-size: 13px; color: var(--chu-mo); margin: 6px 0 12px; }
.xh-ds { list-style: none; margin: 0; padding: 0; }
.xh-ds li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--vien); }
.xh-ds li:first-child { border-top: 0; }
.xh-ds .so { width: 26px; text-align: center; font-family: var(--chu-to); font-weight: 800; color: var(--chu-nhat); }
.xh-ds li.top .so { color: var(--vang); }
.xh-ds .ten { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-ds .gt { font-family: var(--chu-to); font-weight: 700; font-variant-numeric: tabular-nums; }
.xh-ds li.toi { background: var(--to-vang); border-radius: 10px; }
.xh-toi { margin-top: 10px; font-size: 13px; color: var(--chu-mo); }

details.luat summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.luat summary::-webkit-details-marker { display: none; }
details.luat summary::after { content: "+"; font-size: 22px; color: var(--chu-mo); }
details.luat[open] summary::after { content: "–"; }
.luat h3 { font-size: 15px; margin: 16px 0 4px; color: var(--vang); }
.luat ul { margin: 0; padding-left: 18px; color: var(--chu-mo); font-size: 14px; }
.luat li { margin: 3px 0; }
.phim { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 700; background: var(--gieng); box-shadow: 0 0 0 1px var(--vien) inset; color: var(--chu); }

.the-moi {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 14px;
  background: var(--to-vang); box-shadow: 0 0 0 1px var(--vien-vang) inset;
}
.the-moi .chu { flex: 1; min-width: 180px; }
.the-moi .nut-vang, .the-moi .nut-phu { padding: 8px 14px; }

/* ---------------------------------------------------------------- 3 kieu giao dien (nut 🎨), gan o <html data-giao> */
html[data-giao="kinh"] {
  --nen: #080b1a; --nen-2: #0e1330; --the: #10152f; --the-2: #151b3c; --gieng: #060918;
  --vien: rgba(150, 175, 255, .12); --vien-vang: rgba(110, 205, 255, .42);
  --chu: #eef2ff; --chu-mo: #9ea8cf; --chu-nhat: #6c769e;
  --vang: #7fdcff; --vang-dam: #3aa6e6; --vang-sang: #d6f5ff; --chu-tren-vang: #06202e;
  --hong: #ff6fa5; --do: #ff5a7a; --bac-ha: #2fe0c0;
  --to-vang: rgba(127, 220, 255, .10); --lop-sang: rgba(160, 185, 255, .07); --lop-sang-2: rgba(160, 185, 255, .04);
  --lop-toi: rgba(0, 0, 0, .28); --nut-hover: #1e2650; --bong: rgba(0, 0, 0, .75);
  --quang-1: #172463; --quang-2: #2a1352;
  --kieu-nen: linear-gradient(160deg, #1a2252 0%, #121838 60%, #0e1330 100%);
  --ban-1: #0e1228; --ban-2: #070914; --bao-nen: #182050; --bao-do: #4a1530;
  --phu-mo: rgba(6, 9, 24, .76); --loi: #ff8fa5; --cam-chu: #ffc2d0;
}
html[data-giao="keo"] {
  color-scheme: light;
  --nen: #f4f0fa; --nen-2: #ece6f5; --the: #ffffff; --the-2: #ffffff; --gieng: #f3eff9;
  --vien: rgba(70, 40, 110, .11); --vien-vang: rgba(214, 84, 130, .38);
  --chu: #251935; --chu-mo: #6c607e; --chu-nhat: #9a8fab;
  --vang: #e5577f; --vang-dam: #c73d66; --vang-sang: #ff9bb7; --chu-tren-vang: #ffffff;
  --hong: #e5577f; --do: #d93b58; --bac-ha: #1f9e7a;
  --to-vang: rgba(229, 87, 127, .08); --lop-sang: rgba(60, 30, 100, .05); --lop-sang-2: rgba(60, 30, 100, .035);
  --lop-toi: rgba(60, 30, 100, .045); --nut-hover: #efe8f7; --bong: rgba(60, 30, 100, .16);
  --quang-1: #fde3ee; --quang-2: #e7e0ff;
  --kieu-nen: linear-gradient(160deg, #ffffff 0%, #fbf7ff 100%);
  --ban-1: #ffffff; --ban-2: #f8f4fd; --bao-nen: #ffffff; --bao-do: #ffe4ea;
  --phu-mo: rgba(250, 247, 253, .82); --loi: #d43a55; --cam-chu: #a3304b;
}
html[data-giao="keo"] .nhan { background: rgba(31, 158, 122, .12); color: #177a5e; }
.nut-giao { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}