/* ===========================================================================
   Bảng màu & component lấy đúng theo giao diện gpa.vnptdaklak.vn (Hệ thống
   chấm công VNPT): cùng bộ biến --color-nen/--color-chu/..., cùng các lớp
   .the/.nut/.nut-chinh/.o-nhap, cùng cách đổi sáng/tối bằng class .dark trên
   <html> + localStorage("cc-theme").

   Viết tay thay vì kéo Tailwind từ CDN vì máy chạy web (máy cắm USB token)
   thường nằm trong mạng nội bộ VNPT, không ra được Internet -> mọi thứ phải
   tự chứa trong project.
   =========================================================================== */

:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  --canh-hep: 76px;

  /* Xanh VNPT CỐ ĐỊNH — không đổi theo mùa/sáng-tối như --color-hieu, dùng cho
     nền trang đăng nhập để trang luôn mang đúng màu thương hiệu dù đang chọn
     mùa nào (nút/badge vẫn lên màu theo mùa như cũ, chỉ riêng NỀN cố định).
     Xanh da trời đậm, đúng tông logo VNPT — không phải xanh navy trầm. */
  --vnpt-xanh: #0ea5e9;

  --color-nen: #f8fafc;
  --color-mat: #ffffff;
  --color-mat-glass: #ffffffea;
  --color-vien: #e2e8f0;
  --color-vien-dam: #cbd5e1;
  --color-chu: #0f172a;
  --color-chu-2: #334155;
  --color-chu-3: #64748b;
  --color-hieu: #0b6fb8;
  --color-hieu-nhat: #eaf5ff;
  --color-lam: #059669;
  --color-lam-nen: #d1fae5;
  --color-lam-vien: #6ee7b7;
  --color-phep: #d97706;
  --color-phep-nen: #fef3c7;
  --color-phep-vien: #fcd34d;
  --color-khongphep: #e11d48;
  --color-khongphep-nen: #ffe4e6;
  --color-khongphep-vien: #fda4af;
  --color-cong-tac: #4f46e5;
  --color-cong-tac-nen: #e0e7ff;
  --color-cong-tac-vien: #a5b4fc;

  --shadow-sm: 0 1px 2px 0 #0f172a0a, 0 1px 3px 0 #0f172a0f;
  --shadow-md: 0 4px 16px -2px #0f172a14, 0 2px 6px -1px #0f172a0a;
  --shadow-lg: 0 16px 36px -4px #0f172a1f, 0 8px 16px -4px #0f172a0f;
  --shadow-xl: 0 28px 64px -12px #0f172a2e;
  --shadow-card: 0 1px 3px 0 #0f172a0a, 0 6px 20px -3px #0f172a0d;

  --sidebar-bg: linear-gradient(185deg, #0a0f1d 0%, #060a14 50%, #03050a 100%);
  --sidebar-vien: #ffffff14;

  --mua-accent-gradient: linear-gradient(135deg, #1e90d8 0%, #0b6fb8 55%, #0a3d7a 100%);
  --mua-shadow-glow: 0 4px 14px rgba(11, 111, 184, 0.28);
  --mua-shadow-glow-hover: 0 8px 22px rgba(11, 111, 184, 0.38);
  --mua-login-glow-1: rgba(11, 111, 184, 0.24);
  --mua-login-glow-2: rgba(30, 144, 216, 0.2);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;
  --muot: all .22s cubic-bezier(.16, 1, .3, 1);
  --sticky-shadow: -10px 0 12px -10px #0f172a30;
}

.dark {
  --color-nen: #090d16;
  --color-mat: #0f172a;
  --color-mat-glass: #0f172ae0;
  --color-vien: #1e293b;
  --color-vien-dam: #334155;
  --color-chu: #f8fafc;
  --color-chu-2: #94a3b8;
  --color-chu-3: #64748b;
  --color-hieu: #4fb2ea;
  --color-hieu-nhat: #0a2540;
  --color-lam: #34d399;
  --color-lam-nen: #064e3b;
  --color-lam-vien: #059669;
  --color-phep: #fbbf24;
  --color-phep-nen: #78350f;
  --color-phep-vien: #b45309;
  --color-khongphep: #fb7185;
  --color-khongphep-nen: #881337;
  --color-khongphep-vien: #be123c;
  --color-cong-tac: #818cf8;
  --color-cong-tac-nen: #312e81;
  --color-cong-tac-vien: #4338ca;

  --shadow-sm: 0 1px 3px 0 #00000080;
  --shadow-md: 0 6px 20px -2px #0009;
  --shadow-lg: 0 18px 40px -6px #000000b3;
  --shadow-xl: 0 32px 70px -12px #000000e6;
  --shadow-card: 0 0 0 1px #ffffff14, 0 8px 32px -4px #000000b3;

  --sidebar-bg: linear-gradient(185deg, #070b14 0%, #04060c 100%);
  --sidebar-vien: #ffffff0f;

  --mua-accent-gradient: linear-gradient(135deg, #7cc9f0 0%, #2e93d6 55%, #0b6fb8 100%);
  --mua-shadow-glow: 0 4px 14px rgba(79, 178, 234, 0.28);
  --mua-shadow-glow-hover: 0 8px 22px rgba(79, 178, 234, 0.38);
  --mua-login-glow-1: rgba(11, 111, 184, 0.3);
  --mua-login-glow-2: rgba(79, 178, 234, 0.22);
  --sticky-shadow: -10px 0 12px -10px rgba(0,0,0,0.6);
}

/* ========================================================= CHỦ ĐỀ 4 MÙA (NHẸ NHÀNG - HÀI HÒA) */

/* 🌸 MÙA XUÂN (Hoa đào thắm & Lộc non tươi sáng) */
html[data-mua="xuan"] {
  --color-hieu: #db2777;
  --color-hieu-nhat: #fdf2f8;
  --mua-accent-gradient: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
  --mua-shadow-glow: 0 4px 14px rgba(219, 39, 119, 0.25);
  --mua-shadow-glow-hover: 0 6px 20px rgba(219, 39, 119, 0.35);
  --mua-login-glow-1: rgba(219, 39, 119, 0.22);
  --mua-login-glow-2: rgba(244, 114, 182, 0.18);
}
html[data-mua="xuan"].dark {
  --color-hieu: #f472b6;
  --color-hieu-nhat: #341525;
  --mua-accent-gradient: linear-gradient(135deg, #fb7185 0%, #db2777 100%);
  --mua-shadow-glow: 0 4px 14px rgba(244, 114, 182, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(244, 114, 182, 0.35);
  --mua-login-glow-1: rgba(219, 39, 119, 0.26);
  --mua-login-glow-2: rgba(244, 114, 182, 0.2);
}

/* ☀️ MÙA HÈ / HẠ (Biển xanh ngọc & Nắng ấm trong lành) */
html[data-mua="he"], html[data-mua="ha"] {
  --color-hieu: #0284c7;
  --color-hieu-nhat: #f0f9ff;
  --mua-accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --mua-shadow-glow: 0 4px 14px rgba(2, 132, 199, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(2, 132, 199, 0.35);
  --mua-login-glow-1: rgba(2, 132, 199, 0.22);
  --mua-login-glow-2: rgba(56, 189, 248, 0.18);
}
html[data-mua="he"].dark, html[data-mua="ha"].dark {
  --color-hieu: #38bdf8;
  --color-hieu-nhat: #0c2840;
  --mua-accent-gradient: linear-gradient(135deg, #7dd3fc 0%, #0284c7 100%);
  --mua-shadow-glow: 0 4px 14px rgba(56, 189, 248, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(56, 189, 248, 0.35);
  --mua-login-glow-1: rgba(2, 132, 199, 0.26);
  --mua-login-glow-2: rgba(56, 189, 248, 0.2);
}

/* 🍁 MÙA THU (Cam đất/hổ phách cháy & Lá phong đỏ rực — bớt vàng chóe, ngả sang
   tông ấm sang trọng hơn: cam cháy -> đất nung, thay vì vàng-cam đơn giản). */
html[data-mua="thu"] {
  --color-hieu: #c2410c;
  --color-hieu-nhat: #fff7ed;
  --mua-accent-gradient: linear-gradient(135deg, #f97316 0%, #c2410c 55%, #9a3412 100%);
  --mua-shadow-glow: 0 4px 14px rgba(194, 65, 12, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(194, 65, 12, 0.35);
  --mua-login-glow-1: rgba(194, 65, 12, 0.22);
  --mua-login-glow-2: rgba(249, 115, 22, 0.18);
}
html[data-mua="thu"].dark {
  --color-hieu: #fb923c;
  --color-hieu-nhat: #431407;
  --mua-accent-gradient: linear-gradient(135deg, #fdba74 0%, #f97316 55%, #c2410c 100%);
  --mua-shadow-glow: 0 4px 14px rgba(251, 146, 60, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(251, 146, 60, 0.35);
  --mua-login-glow-1: rgba(194, 65, 12, 0.26);
  --mua-login-glow-2: rgba(251, 146, 60, 0.2);
}

/* ❄️ MÙA ĐÔNG (Băng tuyết thanh khiết & Ánh đêm huyền ảo) */
html[data-mua="dong"] {
  --color-hieu: #4f46e5;
  --color-hieu-nhat: #eef2ff;
  --mua-accent-gradient: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  --mua-shadow-glow: 0 4px 14px rgba(79, 70, 229, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(79, 70, 229, 0.35);
  --mua-login-glow-1: rgba(79, 70, 229, 0.22);
  --mua-login-glow-2: rgba(129, 140, 248, 0.18);
}
html[data-mua="dong"].dark {
  --color-hieu: #818cf8;
  --color-hieu-nhat: #1e1b4b;
  --mua-accent-gradient: linear-gradient(135deg, #a5b4fc 0%, #4f46e5 100%);
  --mua-shadow-glow: 0 4px 14px rgba(129, 140, 248, 0.25);
  --mua-shadow-glow-hover: 0 8px 22px rgba(129, 140, 248, 0.35);
  --mua-login-glow-1: rgba(79, 70, 229, 0.26);
  --mua-login-glow-2: rgba(129, 140, 248, 0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  background: var(--color-nen);
  color: var(--color-chu);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-hieu); color: #fff; }

a { color: var(--color-hieu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Component */

.the {
  background: var(--color-mat);
  border: 1px solid var(--color-vien);
  box-shadow: var(--shadow-card);
  border-radius: var(--r-lg);
  padding: 0;
  transition: var(--muot);
  position: relative;
}

.o-nhap {
  border: 1.5px solid var(--color-vien-dam);
  background: var(--color-mat);
  width: 100%;
  color: var(--color-chu);
  border-radius: 12px;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  transition: var(--muot);
  box-shadow: inset 0 1px 2px #0f172a08;
  min-height: 42px;
}
.o-nhap::placeholder { color: var(--color-chu-3); font-weight: 500; font-style: italic; opacity: 0.7; }
.o-nhap:focus {
  outline: none;
  border-color: var(--color-hieu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-hieu) 18%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.nut {
  border: 1px solid var(--color-vien-dam);
  background: var(--color-mat);
  color: var(--color-chu);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  font-family: inherit;
  transition: var(--muot);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.nut:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.nut:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.nut-chinh {
  color: #fff;
  background: var(--mua-accent-gradient, linear-gradient(135deg, #0284c7, #0369a1 60%, #1d4ed8));
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--mua-shadow-glow, 0 4px 14px rgba(2, 132, 199, 0.28)), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nut-chinh:hover { box-shadow: var(--mua-shadow-glow-hover, 0 8px 22px rgba(2, 132, 199, 0.38)), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

.nut-nho { padding: .375rem .75rem; font-size: .75rem; border-radius: 10px; }
.nut-nguy { color: var(--color-khongphep); border-color: var(--color-khongphep-vien); }
.nut-nguy:hover { background: var(--color-khongphep); color: #fff; border-color: var(--color-khongphep); }

.nhan {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-chu-2);
  margin-bottom: .375rem;
}

.ma {
  font-family: var(--font-mono);
  font-size: .8125rem;
  background: color-mix(in srgb, var(--color-chu-3) 12%, transparent);
  border-radius: 6px;
  padding: .0625rem .375rem;
  word-break: break-all;
}

/* Badge trạng thái: 4 tông dùng chung bộ biến màu của giao diện gốc. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .625rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.badge-ok { color: var(--color-lam); background: var(--color-lam-nen); border-color: var(--color-lam-vien); }
.badge-warn { color: var(--color-phep); background: var(--color-phep-nen); border-color: var(--color-phep-vien); }
.badge-bad { color: var(--color-khongphep); background: var(--color-khongphep-nen); border-color: var(--color-khongphep-vien); }
.badge-neutral { color: var(--color-cong-tac); background: var(--color-cong-tac-nen); border-color: var(--color-cong-tac-vien); }

.hop-bao {
  border-radius: var(--r-md);
  padding: .875rem 1.125rem;
  padding-left: 1.5rem;
  font-size: .8125rem;
  font-weight: 600;
  border: 1px solid;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  line-height: 1.55;
  position: relative;
}
.hop-bao::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem; bottom: .5rem;
  width: 3px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.5;
}
.hop-loi { color: var(--color-khongphep); background: var(--color-khongphep-nen); border-color: var(--color-khongphep-vien); }
.hop-ok { color: var(--color-lam); background: var(--color-lam-nen); border-color: var(--color-lam-vien); }
.hop-nhac { color: var(--color-phep); background: var(--color-phep-nen); border-color: var(--color-phep-vien); }

/* ------------------------------------------------------- Logo & chấm sống */

.logo-o {
  width: 40px; height: 40px;
  border-radius: 13px;
  background: var(--mua-accent-gradient, linear-gradient(135deg, #0284c7, #0369a1 60%, #1d4ed8));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 1.0625rem;
  box-shadow: var(--mua-shadow-glow, 0 8px 20px rgba(2, 132, 199, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: var(--muot);
}
.logo-o.nho { width: 32px; height: 32px; border-radius: 10px; font-size: .875rem; }

.cham-song {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-lam);
  animation: nhipSong 2s ease-in-out infinite;
  flex-shrink: 0;
}
.cham-song.cho { background: #fbbf24; }
.cham-song.tat { background: #94a3b8; animation: none; }
@keyframes nhipSong {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-lam) 40%, transparent); }
  50% { opacity: .7; box-shadow: 0 0 0 6px transparent; }
}

/* ============================================================ Trang login */

.login-luoi {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background-color: #020617;
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.55)),
    url('/static/img/bg_dang_nhap.jpg');
  background-size: cover;
  background-position: center;
}
@media (min-width: 1024px) {
  .login-luoi {
    grid-template-columns: 7fr 5fr;
    background-image: none;
  }
}
@media (min-width: 1280px) {
  .login-luoi {
    grid-template-columns: 8fr 4fr;
  }
}

.login-trai {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #020617;
}
@media (min-width: 1024px) { .login-trai { display: flex; } }

/* Ảnh gốc (ảnh tập thể Gala Dinner) hiện SẮC NÉT — bản trước làm mờ mạnh để
   đỡ cạnh tranh với chữ, nhưng nhìn như ảnh hỏng/lỗi tải nên bỏ hẳn hiệu ứng
   mờ. Giữ chữ đọc được bằng lớp gradient tối đậm hơn ở ::after ngay dưới đây
   thay vì bằng cách làm mờ ảnh. */
.login-trai::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: url('/static/img/bg_dang_nhap.jpg');
  background-position: center 28%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Quầng sáng màu lấy đúng --mua-login-glow-1/2 — hai biến này đã có sẵn cho cả
   4 mùa + chế độ tối từ trước nhưng chưa nơi nào dùng tới; đây là đúng chỗ của
   chúng. Đổi mùa ở góc phải là quầng sáng đổi theo, không cần thêm dòng CSS
   nào khác. Lớp phủ tối CỐ TÌNH MỎNG — ảnh phải trong suốt, nhìn xuyên qua
   được chứ không phải bị che gần kín; chữ đọc được là nhờ text-shadow ở
   .login-tieu-de bên dưới, không phải nhờ phủ tối. */
.login-trai::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(60rem 34rem at 12% -8%, var(--mua-login-glow-2), transparent 62%),
    radial-gradient(50rem 30rem at 105% 105%, var(--mua-login-glow-1), transparent 58%),
    linear-gradient(180deg, rgba(2, 6, 23, .12) 0%, rgba(2, 6, 23, .05) 25%, rgba(2, 6, 23, .16) 55%, rgba(2, 6, 23, .5) 100%);
}

/* Kính TRONG SUỐT: nền thẻ mỏng hơn (0.45 -> 0.28) và độ mờ hậu cảnh nhẹ đi
   (16px -> 8px) để nhìn xuyên qua thấy rõ ảnh đội ngũ phía sau, thay vì thẻ
   gần như đục che mất ảnh. Chữ bên trong vẫn đọc tốt nhờ text-shadow bên dưới. */
.login-trai-the {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
/* Đổ bóng chữ thay cho việc phủ tối nền: giữ được ảnh trong suốt mà chữ trắng
   vẫn tách khỏi những mảng sáng của ảnh (áo trắng, banner xanh sáng). */
.login-trai-the h1,
.login-trai-the p,
.login-ten,
.login-chan { text-shadow: 0 1px 3px rgba(2, 6, 23, .75), 0 2px 14px rgba(2, 6, 23, .55); }

.login-trai > * { position: relative; z-index: 1; }

.login-dinh { display: flex; align-items: center; gap: .875rem; }
.login-ten { font-weight: 900; font-size: 1.0625rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.login-phu { font-size: .6875rem; color: #bae6fdcc; font-family: var(--font-mono); font-weight: 700; letter-spacing: .02em; }

.login-tieu-de { margin: auto 0; max-width: 40rem; padding-top: 2rem; }
.login-tieu-de h1 { font-size: 2.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
.login-tieu-de p { margin-top: .875rem; color: #cbd5e1; font-size: .875rem; line-height: 1.65; max-width: 36rem; }

.login-tinh-nang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: 40rem;
}
.tn-o {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .875rem;
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--muot);
}
.tn-o:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.tn-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid;
}
.tn-icon.xanh { background: #0ea5e933; color: #7dd3fc; border-color: #38bdf84d; }
.tn-icon.luc { background: #10b98133; color: #6ee7b7; border-color: #34d3994d; }
.tn-icon.tim { background: #6366f133; color: #a5b4fc; border-color: #818cf84d; }
.tn-icon.vang { background: #f59e0b33; color: #fcd34d; border-color: #fbbf244d; }
.tn-ten { font-weight: 700; font-size: .75rem; color: #fff; }
.tn-mo-ta { font-size: .6875rem; color: #cbd5e1; margin-top: .125rem; line-height: 1.45; }

.login-chan {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .6875rem; color: #bae6fd99; padding-top: 1rem;
  border-top: 1px solid #ffffff1a; font-weight: 500;
}
.login-chan .mono { font-family: var(--font-mono); }

.login-phai {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem;
  background: var(--color-nen);
  position: relative;
  /* KHÔNG overflow:hidden ở đây: menu chọn mùa (.menu-mua) định vị absolute
     bên trong, cắt mất là hỏng cả chức năng đổi mùa. Quầng sáng bên dưới dùng
     inset:0 nên tự nằm gọn trong khung, không cần clip. */
}
/* Nền mang đúng chất VNPT: pha xanh VNPT (--vnpt-xanh, CỐ ĐỊNH, không đổi
   theo mùa) làm gradient chéo mềm mại — chữ tối màu (--color-chu) vẫn đọc
   tốt vì lớp pha khá nhẹ. Từng thử thêm lưới chấm nhỏ nhưng nhìn "gắt", va
   chạm với ảnh bìa bên trái và các ô nhập trắng bên cạnh -> bỏ, chỉ giữ
   gradient trơn cho mềm mắt, hài hoà với ảnh và form hơn. */
.login-phai {
  background-color: color-mix(in srgb, var(--vnpt-xanh) 13%, var(--color-mat));
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--vnpt-xanh) 18%, transparent) 0%, transparent 55%);
}
@media (min-width: 1024px) {
  .login-phai {
    padding: 2.5rem 3rem;
    border-left: 1px solid var(--color-vien);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
@media (max-width: 1023px) {
  .login-phai {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
/* Vạch nhấn trên cùng, cùng một mô-típ với .dinh::before ở khung quản trị —
   để trang đăng nhập và trang bên trong nhìn "cùng một hệ thống" chứ không
   phải hai thứ ghép lại. Quầng sáng mềm ở góc, cùng biến màu với bên trái, để
   card đăng nhập không nổi trên nền trống trơn. */
.login-phai::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mua-accent-gradient);
  z-index: 2;
}
@media (max-width: 1023px) { .login-phai::before { display: none; } }
.login-phai::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Quầng xanh VNPT cố định làm nền chính (đậm hơn hẳn bản trước), cộng thêm
     một quầng nhỏ theo màu mùa đang chọn (--color-hieu) làm điểm nhấn riêng
     — nền luôn rõ "chất VNPT" dù đang chọn mùa nào. */
  background:
    radial-gradient(38rem 28rem at 108% -8%, color-mix(in srgb, var(--vnpt-xanh) 20%, transparent), transparent 62%),
    radial-gradient(30rem 24rem at -8% 110%, color-mix(in srgb, var(--vnpt-xanh) 16%, transparent), transparent 60%),
    radial-gradient(20rem 16rem at 100% 100%, color-mix(in srgb, var(--color-hieu) 16%, transparent), transparent 55%);
}
.login-phai > * { position: relative; z-index: 1; }
/* Hàng trên cùng (chứa nút chọn mùa/đổi giao diện) phải nổi lên trên
   .login-form-boc — hai div này là ANH EM cùng cấp, đều bị ép z-index:1 bởi
   quy tắc ngay trên, nên menu-mua dù tự đặt z-index cao đến đâu bên trong
   cũng bị kẹt trong ngữ cảnh xếp chồng của riêng hàng trên, không "thoát" ra
   để so được với .login-form-boc — mà .login-form-boc đứng sau trong DOM nên
   thắng, đè lên menu. Selector theo lớp cụ thể hơn "*" nên thắng đúng ý dù
   đặt ở đâu trong file. */
.login-phai > .login-thanh-tren { z-index: 2; }

/* margin-top GIỚI HẠN (không phải auto thuần) — auto hai bên vốn canh giữa
   tuyệt đối theo chiều cao khung nhìn, trên màn hình cao (2K/máy để bàn màn
   lớn) khoảng trống phía TRÊN thẻ đăng nhập kéo dài ra rất rỗng, nhìn như lỗi.
   Ghim thẻ gần sát phần đầu trang (cách tối đa 4rem) — khoảng trống thừa dồn
   xuống DƯỚI thẻ thay vì kẹp thẻ ở giữa một vùng xám trống trải. */
.login-form-boc { margin: min(6vh, 4rem) auto auto; width: 100%; max-width: 25rem; padding: 1.5rem 0; }
.login-logo-nho { align-items: center; gap: .625rem; }

.login-huy-hieu {
  padding: .875rem;
  margin-bottom: 1.5rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-hieu) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-hieu) 25%, transparent);
  display: flex; align-items: center; gap: .875rem;
  box-shadow: var(--shadow-sm);
}
.login-huy-hieu .ten { font-weight: 900; font-size: .875rem; }
.login-huy-hieu .phu {
  font-size: .6875rem; color: var(--color-hieu);
  font-family: var(--font-mono); font-weight: 700; margin-top: .125rem;
  text-transform: uppercase;
}

/* Khối nổi bật thông báo OneBSS */
.login-onebss-hop {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-hieu) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-hieu) 25%, transparent);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.onebss-icon-o {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--mua-accent-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--mua-shadow-glow);
}
.onebss-tieu-de {
  font-weight: 800;
  font-size: .8125rem;
  color: var(--color-hieu);
  letter-spacing: .02em;
}
.onebss-phu-de {
  font-size: .6875rem;
  color: var(--color-chu-2);
  margin-top: .125rem;
  font-weight: 500;
}

.hop-onebss-ghi-chu {
  color: var(--color-chu-2);
  background: color-mix(in srgb, var(--color-hieu) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-hieu) 18%, transparent);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.55;
  margin-top: .75rem;
  border-radius: 12px;
}
.hop-onebss-ghi-chu strong {
  color: var(--color-chu);
}

/* ============================================================ Khung admin */

.khung { display: flex; min-height: 100vh; }

.canh {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-vien);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 30;
}
.canh-dinh {
  padding: 1.125rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--sidebar-vien);
}
.canh-ten { color: #fff; font-weight: 900; font-size: .9375rem; letter-spacing: -.01em; line-height: 1.2; }
.canh-phu { color: #7dd3fcb3; font-size: .625rem; font-family: var(--font-mono); font-weight: 700; margin-top: .125rem; }

.canh-nhom {
  padding: 1.75rem 1rem .375rem;
  font-size: .625rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b;
}
.canh-menu { padding: 0 .75rem; display: flex; flex-direction: column; gap: .1875rem; }
.canh-muc {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem;
  border-radius: var(--r-md);
  color: #94a3b8;
  font-weight: 600; font-size: .8125rem;
  transition: var(--muot);
}
.canh-muc:hover { background: #ffffff0a; color: #e2e8f0; text-decoration: none; }
.canh-muc.chon {
  background: color-mix(in srgb, var(--color-hieu) 15%, rgba(255, 255, 255, 0.06));
  color: #fff;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.canh-muc.chon svg { color: var(--color-hieu); }
.canh-muc svg { width: 18px; height: 18px; flex-shrink: 0; }

.canh-chan {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--sidebar-vien);
  font-size: .5625rem; color: #475569; text-align: center; line-height: 1.6;
  opacity: 0.7;
}

.than { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.dinh {
  height: 56px;
  flex-shrink: 0;
  background: var(--color-mat-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-vien);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  position: sticky; top: 0; z-index: 20;
}
.dinh::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mua-accent-gradient);
  opacity: 0.85;
}
.dinh-duong { font-size: .8125rem; color: var(--color-chu-3); font-weight: 600; }
.dinh-duong strong { color: var(--color-chu); font-weight: 800; }
.dinh-phai { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

.chi-bao {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3125rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--color-vien);
  background: var(--color-mat);
  font-size: .6875rem; font-weight: 700; color: var(--color-chu-2);
  white-space: nowrap;
}

.nut-bieu-tuong {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid var(--color-vien);
  background: var(--color-mat);
  color: var(--color-chu-3);
  cursor: pointer;
  transition: var(--muot);
}
.nut-bieu-tuong:hover { background: color-mix(in srgb, var(--color-chu-3) 8%, transparent); color: var(--color-chu); box-shadow: var(--shadow-sm); }
.nut-bieu-tuong svg { width: 17px; height: 17px; }

.nguoi {
  display: flex; align-items: center; gap: .5rem;
  padding-left: .625rem;
  border-left: 1px solid var(--color-vien);
}
.nguoi-anh {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--mua-accent-gradient);
  color: #fff; font-weight: 800; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.nguoi-ten { font-size: .75rem; font-weight: 800; line-height: 1.2; }
.nguoi-vai { font-size: .625rem; color: var(--color-chu-3); font-weight: 700; text-transform: uppercase; }

.noi-dung { padding: 1.5rem; flex: 1; width: 100%; }
@media (max-width: 1023px) { .noi-dung { padding: 1.25rem 1rem; } }
@media (min-width: 1024px) { .noi-dung { padding: 2rem 2.5rem; } }

.trang-tieu-de { margin-bottom: 1.5rem; }
.trang-tieu-de h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.trang-tieu-de p { color: var(--color-chu-3); font-size: .8125rem; margin-top: .25rem; line-height: 1.65; max-width: 42rem; }

/* -------------------------------------------------------------- Tìm kiếm */

.o-tim {
  display: flex; gap: .625rem; align-items: stretch;
  padding: 1.125rem;
  flex-wrap: wrap;
}
.o-tim .boc { flex: 1; min-width: 240px; position: relative; }
.o-tim .boc svg {
  position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--color-chu-3); pointer-events: none;
}
.o-tim .o-nhap { padding-left: 2.5rem; font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
.goi-y { font-size: .75rem; color: var(--color-chu-3); padding: 0 1.125rem 1.125rem; margin-top: -.375rem; }

/* Chọn kiểu tra cứu. Cố tình KHÔNG dùng <select>: bản đầu dùng dropdown thì
   người dùng không nhìn thấy, cứ gõ tên đơn vị vào trong khi nó đang để "theo
   mã" rồi báo là chức năng hỏng. Hai nút hiện sẵn cho thấy ngay đang ở kiểu
   nào và đổi được bằng một cú bấm. */
.hang-kieu {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1.125rem 1.125rem 0;
}
.nhan-kieu {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-chu-3);
}
.phan-doan {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-chu-3) 12%, transparent);
  border: 1px solid var(--color-vien);
}
/* Ẩn radio nhưng vẫn để trong luồng bàn phím (không dùng display:none, nếu
   không thì không tab/mũi tên chọn được). */
.phan-doan input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.phan-doan label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9375rem;
  border-radius: 10px;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--color-chu-2);
  cursor: pointer;
  transition: var(--muot);
  white-space: nowrap;
  user-select: none;
}
.phan-doan label:hover { color: var(--color-chu); }
.phan-doan input:checked + label {
  background: var(--color-mat);
  color: var(--color-hieu);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.phan-doan input:focus-visible + label {
  outline: 2px solid var(--color-hieu);
  outline-offset: 2px;
}
.hang-kieu + .o-tim { padding-top: .875rem; }

/* ---------------------------------------------------------------- Bảng */

.bang-boc { overflow-x: auto; border: 1px solid var(--color-vien); border-radius: var(--r-lg); overflow: hidden; }
table.bang { width: 100%; border-collapse: collapse; font-size: .8125rem; }
table.bang th {
  text-align: left;
  padding: .75rem 1.125rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-chu-3);
  background: color-mix(in srgb, var(--color-chu-3) 8%, transparent);
  border-bottom: 1px solid var(--color-vien);
  white-space: nowrap;
}
table.bang td {
  padding: .75rem 1.125rem;
  border-bottom: 1px solid var(--color-vien);
  vertical-align: top;
  color: var(--color-chu-2);
}
table.bang tbody tr:last-child td { border-bottom: 0; }
table.bang tbody tr:hover td { background: color-mix(in srgb, var(--color-hieu) 4%, transparent); }
table.bang td.chinh { color: var(--color-chu); font-weight: 700; }
/* Cột ngắn (mã, ngày, trạng thái): cấm xuống dòng để không bị bẻ giữa chừng
   kiểu "MIENTRU / NG-DAKLAK" khi bảng bị chật — bảng đã có thanh cuộn ngang. */
table.bang td.khong-ngat, table.bang th.khong-ngat { white-space: nowrap; }
/* Cột mô tả dài (SubjectDN, mục đích sử dụng): giữ một bề ngang tối thiểu để
   không bị các cột khác ép thành dải hẹp, và chỉ bẻ giữa từ khi hết cách. */
table.bang td.dai { min-width: 13rem; max-width: 22rem; overflow-wrap: anywhere; }

/* Cột thao tác: ghim vào mép phải để khi bảng phải cuộn ngang (bảng CMS nhiều
   cột, màn hình hẹp) thì nút bấm vẫn luôn nhìn thấy, không phải cuộn đi tìm. */
table.bang th.cot-dinh, table.bang td.cot-dinh {
  position: sticky;
  right: 0;
  background: var(--color-mat);
  box-shadow: var(--sticky-shadow);
}
table.bang th.cot-dinh { background: color-mix(in srgb, var(--color-chu-3) 8%, var(--color-mat)); }
table.bang tbody tr:hover td.cot-dinh { background: color-mix(in srgb, var(--color-hieu) 4%, var(--color-mat)); }
/* Cột chữ vừa (tên chủ thể, tên cấu hình): cho xuống dòng theo từ. */
table.bang td.vua { min-width: 10rem; }
.bang-stt { color: var(--color-chu-3); font-family: var(--font-mono); font-weight: 700; }

.dong-chi-tiet td { background: color-mix(in srgb, var(--color-chu-3) 5%, transparent); padding: 0; border-left: 3px solid var(--color-hieu); }
.chi-tiet-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .875rem 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
}
.ct-nhan { font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-chu-3); }
.ct-gia-tri { font-size: .8125rem; font-weight: 600; color: var(--color-chu); word-break: break-word; margin-top: .1875rem; }

/* ------------------------------------------------------------ Trạng thái */

.trong {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-chu-3);
}
.trong svg { width: 46px; height: 46px; opacity: .35; margin-bottom: .75rem; }
.trong .tieu { font-weight: 800; color: var(--color-chu-2); font-size: .9375rem; }
.trong .mo-ta { font-size: .8125rem; margin-top: .25rem; }

.dang-tai {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.5rem;
  color: var(--color-chu-2); font-weight: 600; font-size: .8125rem;
}
.quay {
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--color-hieu) 30%, transparent);
  border-top-color: var(--color-hieu);
  border-radius: 999px;
  animation: quayVong .7s linear infinite;
  flex-shrink: 0;
}
@keyframes quayVong { to { transform: rotate(360deg); } }

/* Nhắc nhập PIN token — hiện khi request lâu bất thường, giống cách bot
   Telegram đổi nội dung tin nhắn sau 4 giây. */
.nhac-pin { margin: 0 1.125rem 1.125rem; }

.hang-nut { display: flex; gap: .5rem; flex-wrap: wrap; }

.thanh-phu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--color-vien);
}
.thanh-phu h2 { font-size: .9375rem; font-weight: 900; letter-spacing: -.01em; }
.thanh-phu .phu { font-size: .75rem; color: var(--color-chu-3); font-weight: 600; margin-top: .125rem; }

.luoi-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
  padding: 1.125rem;
}
.chon-nhap {
  border: 1px solid var(--color-vien-dam);
  background: var(--color-mat);
  color: var(--color-chu);
  border-radius: 12px;
  padding: .625rem .9375rem;
  font-size: .875rem; font-weight: 600; font-family: inherit;
  width: 100%;
  min-height: 42px;
  transition: var(--muot);
}
.chon-nhap:focus {
  outline: none;
  border-color: var(--color-hieu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-hieu) 18%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.an { display: none !important; }
.chi-mobile, .chi-mobile-khoi { display: none; }
@media (max-width: 1023px) {
  .canh { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: var(--muot); }
  .canh.mo { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .chi-mobile { display: inline-flex; }
  .chi-mobile-khoi { display: block; }
  .man-che { position: fixed; inset: 0; background: #020617a6; z-index: 25; }
  .login-tinh-nang { grid-template-columns: 1fr; }
}

/* ================================================= TÙY BIẾN THEO MÙA (NHẸ NHÀNG - HÀI HÒA) */

/* -------------------------------------------------------- Bộ chọn 4 mùa */
.boc-mua {
  position: relative;
  display: inline-flex;
}
.nut-mua {
  height: 34px;
  padding: 0 .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-hieu) 25%, var(--color-vien));
  background: color-mix(in srgb, var(--color-hieu) 8%, var(--color-mat));
  color: var(--color-chu);
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 700;
  font-family: inherit;
  transition: var(--muot);
  user-select: none;
}
.nut-mua:hover {
  color: var(--color-hieu);
  border-color: var(--color-hieu);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-hieu) 20%, transparent);
  transform: translateY(-1px);
}
.nut-mua .icon-mua {
  font-size: 1.05rem;
  line-height: 1;
}
.nut-mua .ten-mua {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .nut-mua .ten-mua { display: none; }
}

.menu-mua {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 270px;
  background: var(--color-mat);
  border: 1px solid var(--color-vien);
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
  padding: .5rem;
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: .25rem;
  animation: hienMenuMua .18s cubic-bezier(.16, 1, .3, 1);
  /* KHÔNG backdrop-filter ở đây: nền đã đặc 100% (var(--color-mat) không có
     alpha) nên làm mờ hậu cảnh phía sau không tạo khác biệt gì nhìn thấy được
     — nhưng lồng backdrop-filter bên trong .login-phai (cũng có backdrop-filter
     riêng) khiến Chromium render sai, menu hoá ra trong suốt, chữ trang bên
     dưới lộ xuyên qua. Từng đặt backdrop-filter ở đây (chắc copy từ nơi khác),
     bỏ đi là hết lỗi, không mất hiệu ứng gì vì nền vốn đã đặc sẵn. */
}
.menu-mua.mo {
  display: flex;
}
@keyframes hienMenuMua {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-mua-tieu-de {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-chu-3);
  padding: .375rem .625rem .25rem;
}
.item-mua {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-chu);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: .8125rem;
  transition: var(--muot);
  width: 100%;
}
.item-mua:hover {
  background: color-mix(in srgb, var(--color-hieu) 8%, transparent);
}
.item-mua.kich-hoat {
  background: color-mix(in srgb, var(--color-hieu) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-hieu) 25%, transparent);
  font-weight: 800;
  color: var(--color-hieu);
}
.item-mua .icon {
  font-size: 1.15rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-chu-3) 8%, transparent);
  flex-shrink: 0;
}
.item-mua.kich-hoat .icon {
  background: color-mix(in srgb, var(--color-hieu) 15%, transparent);
}
.item-mua .chu {
  flex: 1;
  min-width: 0;
}
.item-mua .ten {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}
.item-mua .mo-ta {
  display: block;
  font-size: .6875rem;
  color: var(--color-chu-3);
  font-weight: 500;
  margin-top: .125rem;
}
.item-mua .dau-tich {
  font-size: .875rem;
  font-weight: 900;
  color: var(--color-hieu);
  opacity: 0;
  transition: var(--muot);
}
.item-mua.kich-hoat .dau-tich {
  opacity: 1;
}
.menu-mua-phan-cach {
  height: 1px;
  background: var(--color-vien);
  margin: .25rem 0;
}

/* ============================================================ TINH CHỈNH
   Không đụng biến/layout ở trên — chỉ thêm phản hồi chuyển động và vài chỗ
   thiếu nhất quán, để thao tác "có cảm giác" hơn là chỉ đúng chức năng. */

/* ---- Thanh cuộn theo đúng chủ đề. Máy trong mạng VNPT chủ yếu chạy Edge/
   Chrome, mặc định hệ điều hành quá thô và luôn xám trung tính — lạc hẳn tông
   với card kính mờ + gradient theo mùa. */
* { scrollbar-width: thin; scrollbar-color: var(--color-vien-dam) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-vien-dam);
  border-radius: 999px;
  border: 2px solid var(--color-nen);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-chu-3); background-clip: padding-box; }
/* Thanh bên tối màu riêng -> thanh cuộn xám nhạt mặc định nổi bật lạc lõng
   trên nền gần đen. */
.canh { scrollbar-color: #ffffff33 transparent; }
.canh::-webkit-scrollbar-thumb { background: #ffffff26; border-color: #060a14; background-clip: padding-box; }
.canh::-webkit-scrollbar-thumb:hover { background: #ffffff40; background-clip: padding-box; }

/* ---- Focus bàn phím nhất quán. Nhiều phần tử dựng bằng <button>/<a> không tự
   có viền lấy nét rõ ràng khi Tab qua, nhất là chữ trắng trên nền tối. */
a:focus-visible, button:focus-visible, .canh-muc:focus-visible,
.nut-bieu-tuong:focus-visible {
  outline: 2px solid var(--color-hieu);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- Bấm nút chìm nhẹ xuống thay vì chỉ đổi bóng -> có cảm giác "vật lý". */
.nut:active:not(:disabled) { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.nut-bieu-tuong:active { transform: scale(.92); }

/* ---- Card trồi lên khi xuất hiện. JS luôn dựng phần tử MỚI khi đổ kết quả
   (dom()/replaceChildren chứ không sửa node cũ), nên hoạt ảnh này tự phát lại
   đúng lúc có dữ liệu mới — không phải thêm dòng JS nào ở nơi khác. */
.the { animation: theHienLen .38s cubic-bezier(.16, 1, .3, 1) both; }
.the:hover { box-shadow: var(--shadow-lg); }
@keyframes theHienLen {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Trạng thái rỗng: icon đặt trong khối tròn mềm thay vì icon mờ trôi nổi
   một mình, đỡ trống trải. */
.trong svg {
  padding: .875rem;
  background: color-mix(in srgb, var(--color-chu-3) 10%, transparent);
  border-radius: 999px;
  box-sizing: content-box;
}

/* ---- Số liệu trong bảng canh đều theo chiều dọc — phông hệ thống không mặc
   định dùng chữ số đều bề rộng, cột số nhìn "nhảy" hàng nếu không ép. */
table.bang td, .bang-stt, .ma { font-variant-numeric: tabular-nums; }

/* ---- Chấm ở badge "đang chờ": nhấp nháy chậm, kín đáo — cùng mô-típ với
   .cham-song (chỉ báo kết nối) để mắt tự tìm ra dòng cần chú ý trong bảng dài,
   không cần thêm cột hay icon riêng. */
.badge-warn::before { animation: nhipCanhBao 2.6s ease-in-out infinite; }
@keyframes nhipCanhBao { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- Tiêu đề khối bảng có vạch nhấn bên trái, lặp lại đúng mô-típ của
   .canh-muc.chon để việc phân cấp nội dung trong trang khớp với cách sidebar
   đánh dấu mục đang chọn. */
.thanh-phu { position: relative; padding-left: 1.5rem; }
.thanh-phu::before {
  content: "";
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.375rem;
  border-radius: 999px;
  background: var(--mua-accent-gradient);
}

/* ---- Thông báo nổi (baoLoiNoi trong app.js dùng chung mọi trang, baoThanhCong
   riêng ở yeu_cau.js/smartca.js) trồi lên từ dưới thay vì bật ra đột ngột. Bắt
   theo ID vì tất cả các nơi gọi đều đặt đúng hai id này. */
#bao-loi-noi, #bao-ok-noi { animation: baoHienLen .3s cubic-bezier(.16, 1, .3, 1); border-radius: var(--r-lg); }
@keyframes baoHienLen {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Lớp che khi mở menu di động: mờ dần vào thay vì bật khối cứng. */
.man-che { animation: mancheHienLen .2s ease-out; }
@keyframes mancheHienLen { from { opacity: 0; } to { opacity: 1; } }

/* ---- Trang đăng nhập: lưới tính năng trồi lên MỘT LẦN cả khối.
   Bản đầu cho 4 thẻ trồi lên so le (.05/.12/.19/.26s). Chụp thử ở 1440×900
   bắt đúng lúc thẻ 3 và 4 còn opacity:0 — trang nhìn như bị thiếu mất nội
   dung, đúng cái lỗi đã phải sửa ở form đăng nhập. Hiệu ứng so le không đáng
   để đánh đổi việc trang trông như vỡ trong một nhịp. */
.login-tinh-nang { animation: tnHienLen .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tnHienLen {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ ĐĂNG NHẬP
   Trang đầu tiên ai cũng thấy, nên đầu tư kỹ hơn các trang còn lại: form trồi
   lên lần lượt từng khối (không phải bật hết cùng lúc), ô nhập có icon như ô
   tìm kiếm trong app, nút chính có ánh sáng lướt qua khi rê chuột, logo có
   quầng thở nhẹ. Trang nhập mã OTP (ma_xac_thuc.html) dùng lại đúng nền mờ ảnh
   + quầng sáng này để cả luồng đăng nhập nhìn liền một mạch, không phải hai
   phong cách khác nhau nối lại. */

/* CẢ KHỐI trồi lên MỘT LẦN, không so le từng phần tử con — form đăng nhập là
   nội dung QUAN TRỌNG NHẤT của trang, khác feature card bên trái chỉ để trang
   trí. Bản đầu so le mỗi phần tử con thêm .06-.34s: chụp thử ở mobile bắt đúng
   khoảnh khắc nút "Đăng nhập" và cả ô mật khẩu còn opacity:0 (animation-delay
   + fill-mode:both giữ trạng thái ẩn suốt thời gian chờ) — tức là có thật một
   khoảng thời gian người dùng thấy trang "tải xong" nhưng bấm vào nút thì
   không thấy nút đâu. Không đáng đánh đổi cho một hiệu ứng trang trí. */
.login-form-boc { animation: tnHienLen .4s cubic-bezier(.16, 1, .3, 1) both; }

/* Ô nhập có icon bên trái, cùng cách dựng với .o-tim .boc ở trang tra cứu —
   trước đây ô tài khoản/mật khẩu trơn, lạc tông với phần còn lại của app đã
   quen dùng icon trong ô nhập. */
.o-co-bieu-tuong { position: relative; }
.o-co-bieu-tuong svg {
  position: absolute; left: .9375rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--color-chu-3); pointer-events: none;
  transition: var(--muot);
}
.o-co-bieu-tuong .o-nhap { padding-left: 2.625rem; }
.o-co-bieu-tuong:focus-within svg { color: var(--color-hieu); }

/* Ánh sáng lướt qua khi rê chuột vào nút chính — .nut đã có overflow:hidden +
   position:relative sẵn nên chỉ cần thêm lớp sáng chéo. Áp dụng cho MỌI nút
   chính trong app (không riêng đăng nhập) để các nút hành động chính đâu cũng
   có cùng một cảm giác cao cấp. */
.nut-chinh::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.nut-chinh:hover::before { transform: translateX(120%); }

/* Logo trong ngữ cảnh đăng nhập/OTP "thở" nhẹ — KHÔNG áp cho .logo-o dùng
   trong sidebar/header (luôn hiện trong lúc làm việc, chuyển động liên tục ở
   đó sẽ gây phân tâm chứ không phải điểm nhấn). */
.login-trai-the .logo-o, .login-huy-hieu .logo-o, .otp-card .logo-o {
  animation: logoTho 3.6s ease-in-out infinite;
}
@keyframes logoTho {
  0%, 100% { box-shadow: var(--mua-shadow-glow, 0 8px 20px rgba(2, 132, 199, .35)); }
  50% {
    box-shadow: var(--mua-shadow-glow-hover, 0 8px 22px rgba(2, 132, 199, .45)),
      0 0 0 8px color-mix(in srgb, var(--color-hieu) 10%, transparent);
  }
}

/* ---- Trang nhập mã OTP (ma_xac_thuc.html): nền mờ ảnh + quầng sáng giống hệt
   trang đăng nhập, để bước 2 của luồng đăng nhập không rơi vào một nền trơn
   lạc quẻ giữa hai màn hình đã được chăm chút. */
.otp-nen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background: #020617;
}
.otp-nen::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('/static/img/bg_dang_nhap.jpg');
  background-position: center 30%;
  background-size: cover;
}
/* Không làm mờ, phủ tối MỎNG như trang đăng nhập để ảnh vẫn trong suốt. Chữ ở
   đây nằm hết trong card kính nên không cần phủ dày để đọc được. */
.otp-nen::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40rem 26rem at 50% -10%, var(--mua-login-glow-2), transparent 60%),
    radial-gradient(34rem 24rem at 90% 110%, var(--mua-login-glow-1), transparent 55%),
    rgba(2, 6, 23, .35);
}
.otp-nen > * { position: relative; z-index: 1; }
.otp-nen .otp-card {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--color-mat) 88%, transparent);
  animation: theHienLen .45s cubic-bezier(.16, 1, .3, 1) both;
}
.otp-icon-o {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--mua-accent-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--mua-shadow-glow);
  animation: logoTho 3.6s ease-in-out infinite;
}
/* Ô nhập mã: mỗi lần gõ đúng 6 số sẽ rung nhẹ nếu sai (gắn class .rung từ JS
   khi máy chủ báo lỗi), thay vì chỉ đổi màu viền — dễ nhận ra hơn trong nháy
   mắt vì mã OTP người dùng gõ rất nhanh, dễ lướt qua thông báo chữ. */
.rung { animation: rungNhe .4s; }
@keyframes rungNhe {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ---- Cột trái dùng overflow:hidden để giấu mép ảnh nền đã phóng to lúc làm
   mờ (bắt buộc phải có, nếu không lộ viền trong suốt quanh ảnh) — nhưng hệ quả
   là nội dung THẬT (badge, tiêu đề, lưới 4 tính năng, chân trang) cũng bị cắt
   theo nếu cao hơn khung nhìn, KHÔNG cuộn được. Đo thử ở đúng cỡ màn hình laptop
   phổ biến (1440×900) thì 2 trong 4 thẻ tính năng bị cắt mất hẳn phía dưới —
   một nửa nội dung quảng bá không ai thấy. Co gọn dần theo chiều cao khung
   nhìn để luôn vừa đủ một màn hình, không cần cuộn. */
@media (min-width: 1024px) and (max-height: 960px) {
  .login-trai { padding: 1.5rem 2.5rem; }
  .login-dinh.login-trai-the { padding: .5rem .875rem; }
  .login-tieu-de { padding-top: 0; }
  .login-tieu-de h1 { font-size: 1.5rem; }
  .login-tieu-de p { display: none; }
  /* 1 hàng × 4 thay vì 2×2 kèm mô tả -> chỉ còn icon + tên, thấp hơn hẳn để
     luôn vừa các màn hình văn phòng phổ biến (1366×768, 1440×900) không cần
     cuộn. Mô tả từng tính năng đã có sẵn trên chính trang sau khi đăng nhập,
     không mất thông tin gì, chỉ bớt đi phần trùng lặp ở đây. */
  .login-tinh-nang { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .75rem; gap: .5rem; }
  .tn-o { flex-direction: column; align-items: flex-start; padding: .625rem .5rem; gap: .5rem; }
  .tn-mo-ta { display: none; }
  .tn-ten { font-size: .6875rem; }
  .tn-icon { width: 28px; height: 28px; border-radius: 9px; }
  .login-chan { padding-top: .5rem; }
}

/* ============================================================ SMARTCA
   Không gian tra cứu riêng: bộ lọc gọn, bảng dễ quét và chi tiết được chia
   thành nhóm. Tất cả selector đều nằm dưới .smartca-trang để không ảnh hưởng
   các màn CMS khác. */
.noi-dung:has(.smartca-trang) {
  width: 100%;
}

.smartca-trang {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.smartca-dau-trang {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 124px;
  padding: 1.25rem 1.5rem;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--color-hieu) 32%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(28rem 14rem at 92% 5%, rgba(255,255,255,.17), transparent 62%),
    linear-gradient(125deg, color-mix(in srgb, var(--color-hieu) 92%, #0f172a), color-mix(in srgb, var(--color-hieu) 54%, #1e3a8a));
  box-shadow: var(--mua-shadow-glow), var(--shadow-card);
}
.smartca-dau-trang::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -3rem;
  bottom: -5.5rem;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 2.25rem rgba(255,255,255,.04), 0 0 0 5rem rgba(255,255,255,.025);
}
.smartca-dau-bieu-tuong {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
}
.smartca-dau-noi-dung { min-width: 0; padding-right: 9.5rem; }
.smartca-dau-noi-dung h1 {
  margin-top: .1rem;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.smartca-dau-noi-dung > p {
  margin-top: .25rem;
  max-width: 48rem;
  color: rgba(255,255,255,.82);
  font-size: .8125rem;
}
.smartca-eyebrow {
  display: block;
  color: var(--color-hieu);
  font-size: .625rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.smartca-dau-trang .smartca-eyebrow { color: rgba(255,255,255,.72); }
.smartca-dau-nhan {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}
.smartca-dau-nhan span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .24rem .55rem;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(2,6,23,.12);
  font-size: .6875rem;
  font-weight: 700;
}
.smartca-nut-toan-man-hinh {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  min-height: 36px;
  padding: .45rem .75rem;
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(2,6,23,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.13);
  backdrop-filter: blur(8px);
}
.smartca-nut-toan-man-hinh:hover {
  color: #fff;
  border-color: rgba(255,255,255,.5);
  background: rgba(2,6,23,.28);
}

body.smartca-toan-man-hinh { overflow: hidden; }
body.smartca-toan-man-hinh .canh,
body.smartca-toan-man-hinh .dinh { display: none; }
body.smartca-toan-man-hinh .khung,
body.smartca-toan-man-hinh .than { min-height: 100vh; height: 100vh; }
body.smartca-toan-man-hinh .noi-dung {
  width: 100%;
  max-width: none;
  height: 100vh;
  overflow: auto;
  padding: 1rem;
}
body.smartca-toan-man-hinh .smartca-dau-trang {
  min-height: 68px;
  padding-block: .7rem;
}
body.smartca-toan-man-hinh .smartca-dau-bieu-tuong {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 12px;
}
body.smartca-toan-man-hinh .smartca-dau-noi-dung h1 { font-size: 1.25rem; }
body.smartca-toan-man-hinh .smartca-dau-noi-dung > p,
body.smartca-toan-man-hinh .smartca-dau-noi-dung .smartca-eyebrow,
body.smartca-toan-man-hinh .smartca-dau-nhan { display: none; }

.smartca-ket-noi:empty { display: none; }
.smartca-ket-noi .hop-bao { min-height: 48px; align-items: center; }
.smartca-ket-noi .hop-bao .nut { margin-left: auto; }
.smartca-ket-noi > .the { overflow: hidden; }
.smartca-ket-noi > .the > .hop-bao { border-width: 0 0 1px; border-radius: 0; }
.smartca-dang-nhap-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  align-items: end;
  gap: .875rem 1rem;
  padding: 1rem 1.125rem;
}
.smartca-dang-nhap-form > div:last-child { display: flex; align-items: flex-end; gap: .5rem; }
.smartca-phien-ok { box-shadow: var(--shadow-sm); }

.smartca-bo-loc { overflow: hidden; }
.smartca-bo-loc-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--color-vien);
  background: color-mix(in srgb, var(--color-chu-3) 4%, var(--color-mat));
}
.smartca-bo-loc-dau h2 {
  margin-top: .1rem;
  font-size: .9375rem;
  font-weight: 900;
  letter-spacing: -.015em;
}
.smartca-bo-loc .hang-kieu { padding: 0; }
.smartca-bo-loc .phan-doan { background: var(--color-nen); }
.smartca-bo-loc .phan-doan input:checked + label {
  color: var(--color-hieu);
  box-shadow: var(--shadow-sm);
}

.smartca-form { animation: smartcaFormHien .22s ease-out both; }
@keyframes smartcaFormHien {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.smartca-luoi-loc {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: .875rem 1rem;
  padding: 1rem 1.125rem;
}
.smartca-truong { min-width: 0; }
.smartca-truong .nhan { margin-left: .1rem; }
.smartca-truong .o-nhap,
.smartca-truong .chon-nhap { min-height: 40px; }
.smartca-truong .o-nhap:hover,
.smartca-truong .chon-nhap:hover { border-color: color-mix(in srgb, var(--color-hieu) 45%, var(--color-vien-dam)); }
.smartca-thao-tac {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  min-width: max-content;
}
.smartca-thao-tac .nut-chinh { flex: 1; }
.smartca-thao-tac .nut { padding-inline: 1rem; }
.smartca-huong-dan {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.125rem;
  color: var(--color-chu-3);
  border-top: 1px dashed var(--color-vien);
  background: color-mix(in srgb, var(--color-hieu) 3%, transparent);
  font-size: .72rem;
  font-weight: 600;
}
.smartca-huong-dan svg { flex: 0 0 auto; color: var(--color-hieu); }

.smartca-ket-qua { min-width: 0; }
.smartca-ket-qua:empty { display: none; }
.smartca-ket-qua-the { overflow: hidden; }
.smartca-ket-qua-the:hover { box-shadow: var(--shadow-card); }
.smartca-ket-qua-the .thanh-phu {
  padding: .875rem 1rem .875rem 1.5rem;
  background: color-mix(in srgb, var(--color-chu-3) 3%, var(--color-mat));
}
.smartca-tieu-de-ket-qua {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.smartca-tieu-de-ket-qua h2 { font-size: .9375rem; }
.smartca-thong-ke { display: flex; gap: .4rem; flex-wrap: wrap; }
.smartca-thong-ke span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .15rem .55rem;
  color: var(--color-chu-2);
  border: 1px solid var(--color-vien);
  border-radius: 999px;
  background: var(--color-mat);
  font-size: .6875rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.smartca-bang-boc {
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
}
table.smartca-bang { min-width: 1040px; }
table.smartca-bang th { padding-top: .65rem; padding-bottom: .65rem; }
table.smartca-bang td { padding-top: .68rem; padding-bottom: .68rem; }
table.smartca-bang tbody > tr.smartca-dong-du-lieu { transition: background-color .16s ease; }
table.smartca-bang tbody > tr.smartca-dong-du-lieu.dang-mo > td {
  color: var(--color-chu);
  background: color-mix(in srgb, var(--color-hieu) 7%, var(--color-mat));
  border-bottom-color: color-mix(in srgb, var(--color-hieu) 18%, var(--color-vien));
}
table.smartca-bang tbody > tr.smartca-dong-du-lieu.dang-mo > td.cot-dinh {
  background: color-mix(in srgb, var(--color-hieu) 7%, var(--color-mat));
}
.smartca-nut-chi-tiet[aria-expanded="true"] {
  color: #fff;
  border-color: var(--color-hieu);
  background: var(--color-hieu);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-hieu) 28%, transparent);
}

.smartca-trang .dong-chi-tiet > td {
  border-left-width: 0;
  background: color-mix(in srgb, var(--color-hieu) 3%, var(--color-mat));
}
.smartca-trang .dong-chi-tiet > td::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--mua-accent-gradient);
}
.smartca-trang .chi-tiet-luoi { padding: 1rem; }
.smartca-chi-tiet-don {
  grid-column: 1 / -1;
  display: grid;
  gap: .875rem;
}
.smartca-chi-tiet-dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .125rem .125rem 0;
}
.smartca-chi-tiet-dau h3 {
  font-size: .9375rem;
  font-weight: 900;
  letter-spacing: -.015em;
}
.smartca-chi-tiet-dau p { margin-top: .15rem; color: var(--color-chu-3); font-size: .72rem; }
.smartca-chi-tiet-id {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  color: var(--color-chu-2);
  font-size: .6875rem;
  font-weight: 700;
}
.smartca-nhom-chi-tiet-luoi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.smartca-nhom-chi-tiet {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-vien);
  border-radius: 14px;
  background: var(--color-mat);
}
.smartca-nhom-chi-tiet h4 {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .625rem .8rem;
  color: var(--color-chu-2);
  border-bottom: 1px solid var(--color-vien);
  background: color-mix(in srgb, var(--color-chu-3) 5%, transparent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .015em;
}
.smartca-nhom-chi-tiet h4 svg { color: var(--color-hieu); }
.smartca-nhom-muc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
  padding: .75rem .8rem .875rem;
}
.smartca-nhom-muc .ct-nhan { line-height: 1.35; }
.smartca-nhom-muc .ct-gia-tri { line-height: 1.45; }
.smartca-muc-rong { color: var(--color-chu-3); font-size: .75rem; }

.smartca-vung-huy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--color-khongphep-vien);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-khongphep-nen) 74%, var(--color-mat));
}
.smartca-vung-huy-noi-dung { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.smartca-vung-huy-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--color-khongphep);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-khongphep) 11%, transparent);
}
.smartca-vung-huy h4 { color: var(--color-chu); font-size: .75rem; font-weight: 900; }
.smartca-vung-huy p { margin-top: .08rem; color: var(--color-chu-3); font-size: .6875rem; line-height: 1.4; }
.smartca-vung-huy .nut { flex: 0 0 auto; }
.smartca-vung-huy .hop-bao { margin-top: .5rem; }
.smartca-vung-huy-hanh-dong { flex: 0 0 auto; }
.smartca-vung-huy-thong-bao:empty { display: none; }
body.smartca-modal-mo { overflow: hidden; }

.smartca-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2,6,23,.67);
  backdrop-filter: blur(5px);
}
.smartca-modal-hop {
  width: min(100%, 500px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-khongphep) 28%, var(--color-vien));
  border-radius: 18px;
  background: var(--color-mat);
  box-shadow: var(--shadow-xl);
  animation: smartcaModalHien .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes smartcaModalHien {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.smartca-modal-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--color-vien);
  background: color-mix(in srgb, var(--color-khongphep) 5%, var(--color-mat));
}
.smartca-modal-dau h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-khongphep);
  font-size: 1rem;
  font-weight: 900;
}
.smartca-modal-than { padding: 1rem 1.125rem 1.125rem; }
.smartca-modal-dinh-danh {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .55rem 1rem;
  margin-bottom: 1rem;
  padding: .75rem .875rem;
  border: 1px solid var(--color-vien);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-chu-3) 5%, transparent);
  font-size: .75rem;
}
.smartca-modal-dinh-danh strong { display: block; color: var(--color-chu-3); font-size: .625rem; text-transform: uppercase; letter-spacing: .035em; }
.smartca-modal-dinh-danh span { display: block; margin-top: .12rem; color: var(--color-chu); font-weight: 700; overflow-wrap: anywhere; }
.smartca-modal .o-nhap { min-height: 88px; resize: vertical; }
.smartca-modal-dem { margin-top: .25rem; color: var(--color-chu-3); text-align: right; font-size: .6875rem; }
.smartca-modal-loi { display: none; margin-top: .3rem; color: var(--color-khongphep); font-size: .72rem; font-weight: 750; }
.smartca-modal-canh-bao {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .75rem;
  color: var(--color-chu-3);
  font-size: .7rem;
  line-height: 1.45;
}
.smartca-modal-hanh-dong { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.smartca-modal .nut-xac-nhan-modal { color: #fff; border-color: var(--color-khongphep); background: var(--color-khongphep); }

@media (max-width: 1240px) {
  .smartca-luoi-loc { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .smartca-truong-chinh { grid-column: span 2; }
}
@media (max-width: 780px) {
  .smartca-dau-trang { min-height: auto; padding: 1rem; border-radius: 16px; }
  .smartca-dau-bieu-tuong { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
  .smartca-dau-nhan { display: none; }
  .smartca-bo-loc-dau { align-items: stretch; flex-direction: column; }
  .smartca-bo-loc .hang-kieu { justify-content: space-between; }
  .smartca-bo-loc .phan-doan { flex: 1; }
  .smartca-bo-loc .phan-doan label { flex: 1; justify-content: center; padding-inline: .65rem; }
  .smartca-luoi-loc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smartca-truong-chinh { grid-column: auto; }
  .smartca-thao-tac { grid-column: 1 / -1; }
  .smartca-thao-tac .nut { flex: 1; }
  .smartca-nhom-chi-tiet-luoi { grid-template-columns: 1fr; }
  table.smartca-bang-don-hang { min-width: 100%; }
  table.smartca-bang-don-hang thead th:nth-child(3),
  table.smartca-bang-don-hang thead th:nth-child(4),
  table.smartca-bang-don-hang thead th:nth-child(5),
  table.smartca-bang-don-hang thead th:nth-child(7),
  table.smartca-bang-don-hang thead th:nth-child(8),
  table.smartca-bang-don-hang tr.smartca-dong-du-lieu td:nth-child(3),
  table.smartca-bang-don-hang tr.smartca-dong-du-lieu td:nth-child(4),
  table.smartca-bang-don-hang tr.smartca-dong-du-lieu td:nth-child(5),
  table.smartca-bang-don-hang tr.smartca-dong-du-lieu td:nth-child(7),
  table.smartca-bang-don-hang tr.smartca-dong-du-lieu td:nth-child(8) { display: none; }
  table.smartca-bang-don-hang td.vua { min-width: 8rem; }
  .smartca-ket-noi .hop-bao { flex-wrap: wrap; }
  .smartca-ket-noi .hop-bao .nut { width: 100%; margin-left: 0; }
  .smartca-dang-nhap-form { grid-template-columns: 1fr 1fr; }
  .smartca-dang-nhap-form > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  body:has(.smartca-trang) .dinh { gap: .4rem; padding-inline: .75rem; }
  body:has(.smartca-trang) .dinh-duong { display: none; }
  body:has(.smartca-trang) .dinh-phai { gap: .35rem; }
  body:has(.smartca-trang) .chi-bao { min-width: 30px; justify-content: center; padding: .45rem; }
  body:has(.smartca-trang) #nhan-ket-noi { display: none; }
  body:has(.smartca-trang) .nguoi { gap: 0; padding-left: .35rem; }
  body:has(.smartca-trang) .nguoi > div:not(.nguoi-anh) { display: none; }
  .smartca-trang { gap: .75rem; }
  .smartca-dau-noi-dung { padding-right: 2.75rem; }
  .smartca-nut-toan-man-hinh { width: 36px; height: 36px; padding: 0; }
  .smartca-nut-toan-man-hinh span { display: none; }
  .smartca-dau-noi-dung > p { line-height: 1.45; }
  .smartca-bo-loc-dau { padding: .875rem; }
  .smartca-bo-loc .hang-kieu { align-items: stretch; flex-direction: column; }
  .smartca-bo-loc .nhan-kieu { display: none; }
  .smartca-bo-loc .phan-doan label { min-width: 0; font-size: .72rem; }
  .smartca-luoi-loc { grid-template-columns: 1fr; padding: .875rem; }
  .smartca-thao-tac { flex-wrap: wrap; }
  .smartca-huong-dan { align-items: flex-start; padding-inline: .875rem; }
  .smartca-ket-qua-the .thanh-phu { align-items: stretch; }
  .smartca-ket-qua-the .thanh-phu > .hang-nut { width: 100%; }
  .smartca-ket-qua-the .thanh-phu > .hang-nut .nut { flex: 1; }
  .smartca-chi-tiet-dau { flex-direction: column; }
  .smartca-nhom-muc { grid-template-columns: 1fr; }
  .smartca-vung-huy { align-items: stretch; flex-direction: column; }
  .smartca-vung-huy .nut { width: 100%; }
  .smartca-modal { align-items: flex-end; padding: .5rem; }
  .smartca-modal-hop { border-radius: 18px 18px 12px 12px; }
  .smartca-modal-dinh-danh { grid-template-columns: 1fr; }
  .smartca-modal-hanh-dong .nut { flex: 1; padding-inline: .75rem; }
  .smartca-dang-nhap-form { grid-template-columns: 1fr; padding: .875rem; }
  .smartca-dang-nhap-form > div:last-child { grid-column: auto; }
  .smartca-dang-nhap-form > div:last-child .nut { flex: 1; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .login-tinh-nang { display: none; }
}

/* ============================================================ MINI GAME
   Rắn săn mồi — giải trí thuần túy, dùng lại đúng .the/.bang/.nut/.badge sẵn
   có để không lạc tông với phần còn lại của app. Banner đầu trang lặp lại
   đúng mô-típ .smartca-dau-trang (gradient theo mùa + hình tròn trang trí)
   để trang có cảm giác "đặc biệt", cuốn hút hơn một trang quản trị thường. */
.game-dau-trang {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 108px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--color-hieu) 32%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(28rem 14rem at 92% 5%, rgba(255,255,255,.17), transparent 62%),
    linear-gradient(125deg, color-mix(in srgb, var(--color-hieu) 92%, #0f172a), color-mix(in srgb, var(--color-hieu) 54%, #1e3a8a));
  box-shadow: var(--mua-shadow-glow), var(--shadow-card);
}
.game-dau-trang::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -3rem;
  bottom: -5.5rem;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 2.25rem rgba(255,255,255,.04), 0 0 0 5rem rgba(255,255,255,.025);
}
.game-dau-bieu-tuong {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-dau-noi-dung { min-width: 0; }
.game-dau-noi-dung h1 {
  margin-top: .1rem;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.game-dau-trang .smartca-eyebrow { color: rgba(255,255,255,.72); }
.game-dau-noi-dung > p {
  margin-top: .25rem;
  max-width: 44rem;
  color: rgba(255,255,255,.86);
  font-size: .8125rem;
}
@media (max-width: 640px) {
  .game-dau-trang { min-height: auto; padding: 1rem; border-radius: 16px; }
  .game-dau-bieu-tuong { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
}
/* Header chung trên điện thoại: thu gọn như trang SmartCA — không thì tên
   người dùng + nút đăng xuất đẩy trang rộng ra ~470px trên màn 375px, và mọi
   hộp thoại (position: fixed) căn giữa theo bề rộng đó nên lệch khỏi màn hình. */
@media (max-width: 520px) {
  body:has(.game-luoi) .dinh { gap: .4rem; padding-inline: .75rem; }
  body:has(.game-luoi) .dinh-duong { display: none; }
  body:has(.game-luoi) .dinh-phai { gap: .35rem; }
  body:has(.game-luoi) .chi-bao { min-width: 30px; justify-content: center; padding: .45rem; }
  body:has(.game-luoi) #nhan-ket-noi { display: none; }
  body:has(.game-luoi) .nguoi { gap: 0; padding-left: .35rem; }
  body:has(.game-luoi) .nguoi > div:not(.nguoi-anh) { display: none; }
}
/* Khung chơi trên màn hẹp: giữ đúng 16:10. min-height 300px của .game-san-boc
   (dành cho màn máy tính thấp) làm khung cao hơn tỉ lệ trên điện thoại —
   canvas bị kéo giãn méo theo chiều dọc (đo được 299x298 thay vì 299x187). */
@media (max-width: 640px) { .game-san-boc { min-height: 0; } }

/* Nút "Chơi trên điện thoại" ở băng tiêu đề + hộp thoại chỉ đường sang /game/app. */
/* Nút TRẮNG ĐẶC trên nền băng màu, không phải nút kính mờ: bản kính mờ đầu
   tiên chìm vào nền cam đến mức người dùng báo "chưa thấy nút chơi trên điện
   thoại". Thêm một nhịp nhấp nháy lúc mới vào trang để mắt bắt được ngay. */
.game-nut-mo-app {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .625rem 1.125rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #b45309;
  font: inherit;
  font-size: .875rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,.65);
  cursor: pointer;
  transition: var(--muot);
  animation: gameNutMoAppGoi 1.6s ease-out 3;
}
@keyframes gameNutMoAppGoi {
  0%   { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,.65); }
  70%  { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 .75rem rgba(255,255,255,0); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .game-nut-mo-app { animation: none; } }
.game-nut-mo-app:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.game-nut-mo-app:focus-visible { border-radius: 999px; outline-color: #fff; }
@media (max-width: 640px) {
  .game-dau-trang { flex-wrap: wrap; }
  .game-nut-mo-app { margin-left: 0; width: 100%; justify-content: center; }
}
.game-modal-noi-dung.game-mo-app { display: flex; flex-direction: column; gap: .875rem; padding: 1rem 1.125rem 1.25rem; }
.game-mo-app-dau { display: flex; align-items: center; gap: .875rem; }
.game-mo-app-dau img { width: 4rem; height: 4rem; border-radius: 1rem; flex-shrink: 0; box-shadow: var(--shadow-md); }
.game-mo-app-dau b { display: block; font-size: 1.0625rem; font-weight: 900; color: var(--color-chu); }
.game-mo-app-dau span { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.45; color: var(--color-chu-2); }
.game-mo-app-nhan { margin-bottom: -.375rem; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-chu-3); }
.game-mo-app-link { display: flex; gap: .5rem; }
.game-mo-app-link input {
  flex: 1;
  min-width: 0;
  padding: .55rem .75rem;
  border: 1.5px solid var(--color-vien-dam, var(--color-vien));
  border-radius: var(--r-md);
  background: var(--color-nen);
  color: var(--color-chu);
  font-family: var(--font-mono);
  font-size: .8125rem;
}
.game-mo-app-ngoai {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .875rem;
  border: 1px dashed color-mix(in srgb, var(--color-hieu) 45%, var(--color-vien));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--color-hieu) 4%, var(--color-mat));
}
/* Nền trắng cố định quanh mã QR: giao diện tối mà để nền tối thì camera đọc
   không ra (mã QR cần ô sáng bao quanh). */
.game-mo-app-qr {
  align-self: center;
  display: grid;
  place-items: center;
  padding: .625rem;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.game-mo-app-qr img, .game-mo-app-qr canvas { display: block; }
.game-mo-app-ghi-chu { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--color-chu-3); }
.game-mo-app-buoc { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .375rem; font-size: .8125rem; line-height: 1.5; color: var(--color-chu-2); }

.game-luoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
  gap: 1.25rem;
  align-items: start;
}
/* minmax(0, 1fr), KHÔNG phải 1fr trơn: 1fr = minmax(auto, 1fr) nên cột không
   chịu co nhỏ hơn min-content của khối chơi (~520px) — trên điện thoại 375px
   cả trang bị đẩy rộng ra 538px, hộp thoại (position: fixed) căn giữa theo
   538px nên lệch hẳn sang phải, tràn khỏi màn hình. */
@media (max-width: 900px) { .game-luoi { grid-template-columns: minmax(0, 1fr); } }
/* Màn hình rộng: đủ chỗ để "Các bậc tiến hóa" và "Bảng xếp hạng" đứng SONG
   SONG thành 2 cột riêng cạnh màn chơi, thay vì xếp chồng lên nhau — xem
   quy tắc display:contents cho .game-cot-phu ngay sau định nghĩa gốc của nó
   bên dưới (đặt SAU để thắng theo thứ tự nguồn, cùng độ đặc hiệu). */
@media (min-width: 1280px) {
  .game-luoi { grid-template-columns: minmax(0, 1fr) minmax(230px, 300px) minmax(280px, 360px); }
}

.game-khoi { padding: 1.25rem; }
/* Ba hàng rõ việc: (1) chỉ số, (2) trạng thái ván đang chơi (chỉ để đọc),
   (3) mọi nút bấm được — trước đây dồn cả 11 thứ vào một hàng flex-wrap duy
   nhất, quá tải nên vài thứ (như số lông vũ) bị chìm nghỉm giữa đống badge. */
.game-thanh-diem { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1rem; }
.game-hang-chi-so, .game-hang-trang-thai, .game-hang-hanh-dong {
    display: flex; align-items: center; gap: .875rem; flex-wrap: wrap;
}
.game-hang-trang-thai { gap: .5rem; }
.game-hang-hanh-dong { gap: .5rem; }
.game-hang-hanh-dong .nut:last-child { margin-left: auto; }

.game-o-diem { display: flex; flex-direction: column; gap: .0625rem; }
.game-nhan-diem {
    display: flex; align-items: center; gap: .25rem;
    font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-chu-3);
}
.game-tri-diem { font-size: 1.375rem; font-weight: 900; color: var(--color-chu); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.game-huy-hieu-tien-hoa { transition: var(--muot); }

/* Số điểm "nảy" mỗi lần ghi điểm — thay cho chữ "+1" từng nổi giữa màn chơi
   (bị phản ánh rối mắt, nhất là màn hẹp trên điện thoại): phản hồi ngay tại
   con số, không thêm gì che khuất khung chơi. */
#game-diem.game-tri-diem-nay { animation: game-diem-nay .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes game-diem-nay {
    0% { transform: scale(1); text-shadow: none; }
    35% { transform: scale(1.55); text-shadow: 0 0 .5em currentColor; }
    100% { transform: scale(1); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    #game-diem.game-tri-diem-nay { animation: none; }
}

/* Icon SVG tự vẽ cho Vàng/Lông vũ — thay emoji 🪙/🪶 (Unicode 13, 2020) vốn
   hiện ô vuông rỗng trên nhiều máy chưa có font hỗ trợ. */
.game-icon-chi-so { width: .875rem; height: .875rem; flex-shrink: 0; }
/* Icon lông vũ nằm giữa dòng chữ (cốt truyện, huy hiệu bảng xếp hạng, màn
   kết thúc) — cao bằng cỡ chữ quanh nó. */
.game-icon-long-vu-chu { width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; }
.game-long-vu-tren { font-size: .75rem; font-weight: 700; color: var(--color-chu-3); }

/* Nút lịch sử lồng ngay trong nhãn "Kỷ lục" — nhỏ, không viền, không phá
   dòng chữ hoa nhỏ phía trên số kỷ lục. */
.game-nhan-diem .game-nut-lich-su {
    width: 1.125rem; height: 1.125rem; font-size: .75rem;
    border: none; margin-left: .125rem;
}

.game-san-boc {
  position: relative;
  width: 100%;
  /* Không giới hạn bề ngang nữa — khung tự trải kín cột game, hết trống hai
     bên. Chỉ chặn CHIỀU CAO để toàn trang vừa một màn hình (trừ sẵn chỗ cho
     header + banner + thanh điểm + padding). */
  max-height: calc(100vh - 330px);
  min-height: 300px;
  margin: 0 auto;
  /* Khung NGANG (16:10) thay vì dọc: trên màn hình desktop rộng, khung dọc để
     trống hai bên rất nhiều, còn khung ngang lấp kín chiều rộng và vẫn vừa
     chiều cao một màn hình. */
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--color-vien);
  background: var(--color-nen);
  cursor: pointer;
}
/* object-fit: cover phòng khi khung .game-san-boc lỡ khác tỉ lệ canvas (ví
   dụ màn hẹp) — không co giãn méo hình, chỉ cắt bớt rìa. */
#game-san { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.game-phu {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--color-mat) 88%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: var(--muot);
}
.game-phu.an { opacity: 0; pointer-events: none; }
.game-phu-chu { font-size: .875rem; font-weight: 700; color: var(--color-chu-2); line-height: 1.6; }
.game-phu-chu strong { color: var(--color-hieu); }
.game-huong-dan-tieu { font-size: 1rem; font-weight: 900; margin-bottom: 1rem; }
.game-huong-dan-luoi { display: flex; flex-direction: column; gap: .625rem; text-align: left; max-width: 22rem; margin: 0 auto; }
.game-huong-dan-muc {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--color-hieu) 6%, transparent);
  font-size: .8125rem; font-weight: 600; color: var(--color-chu-2);
}
.game-huong-dan-icon { font-size: 1.125rem; flex-shrink: 0; }

/* Nút "Bắt đầu chơi" NGAY TRONG màn chào — để ai mới vào cũng thấy rõ một nút
   để bấm khi đã sẵn sàng, thay vì phải để ý nút nhỏ trên thanh điểm hay đoán
   phím tắt. Giảm cảm giác bất ngờ vì luôn là người chơi chủ động bấm trước. */
.game-nut-bat-dau-phu { margin: 1.125rem auto 0; }
.game-phu-goi-y { margin-top: .5rem; font-size: .75rem; font-weight: 600; color: var(--color-chu-3); }

.game-hang-toi td { background: color-mix(in srgb, var(--color-hieu) 8%, transparent); font-weight: 700; }

/* Huy chương vàng/bạc/đồng top 3 bảng xếp hạng — to hơn hẳn số thứ tự
   thường để tạo điểm nhấn, ai lướt qua cũng nhận ra ngay top đầu server. */
.game-huy-chuong { font-size: 1.25rem; line-height: 1; }

/* ===== Avatar chim chibi (SVG) — người chơi tự chọn ======================= */
/* Sprite <symbol> nằm ẩn ở đầu trang, mọi chỗ chỉ <use> lại. */
.chibi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Màu chủ đạo từng con chim — theo màu thân/đầu trong sprite. Nhuộm nền tròn
   phía sau avatar ở MỌI chỗ (nút tròn, hộp thoại chọn, bảng xếp hạng, cửa
   hàng) để avatar thành một huy hiệu có nền riêng, nổi hẳn lên thay vì con
   chim trơ trọi trên nền trang. Cánh cụt/bồ câu thân gần đen/gần trắng nên
   lấy tông xám giữa — không thì nền chìm mất ở chế độ tối hoặc sáng. */
[data-avatar="ga-con"]       { --mau-chim: #fbbf24; }
[data-avatar="vit-con"]      { --mau-chim: #facc15; }
[data-avatar="cu-meo"]       { --mau-chim: #ca8a04; }
[data-avatar="canh-cut"]     { --mau-chim: #64748b; }
[data-avatar="vet"]          { --mau-chim: #22c55e; }
[data-avatar="bo-cau"]       { --mau-chim: #94a3b8; }
[data-avatar="dai-bang"]     { --mau-chim: #a16207; }
[data-avatar="cong"]         { --mau-chim: #14b8a6; }
[data-avatar="hong-hac"]     { --mau-chim: #f472b6; }
[data-avatar="chim-ruoi"]    { --mau-chim: #10b981; }
[data-avatar="phuong-hoang"] { --mau-chim: #f97316; }
[data-avatar="chu-tuoc"]     { --mau-chim: #dc2626; }

/* Con chim nhỏ cạnh tên trong bảng xếp hạng */
.game-avatar-o {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .375rem;
    vertical-align: -.4em;
    flex: none;
}
/* Có data-avatar thì vẽ thành huy hiệu tròn: nền nhuộm màu chim + con chim
   thu vào trong một chút (padding) để nằm gọn trong vòng tròn và trong viền
   khung nếu có. */
.game-avatar-o[data-avatar] {
    box-sizing: border-box;
    padding: .0625rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 34%, var(--color-mat)), color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 12%, var(--color-mat)) 72%);
}

@keyframes chimLacLu {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(-2px); }
}
@keyframes chimDoi {
    0%   { transform: scale(.3) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

/* Nút avatar tròn trong thanh điều khiển — bấm mở HỘP THOẠI chọn avatar giữa
   màn hình (không còn popover xổ dưới nút: popover neo theo nút nên tràn ra
   ngoài khung game khi nút nằm ở đầu hàng). Nền nhuộm màu con chim đang
   dùng, như một logo nhỏ của người chơi. */
.game-avatar-chon { position: relative; }
.game-avatar-nut-mo {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: .3rem;
    border: 1.5px solid var(--color-vien);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 34%, var(--color-mat)), color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 12%, var(--color-mat)) 72%);
    cursor: pointer;
    transition: var(--muot);
}
.game-avatar-nut-mo svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .18));
    animation: chimLacLu 2.8s ease-in-out infinite;
    transform-origin: 50% 85%;
}
.game-avatar-nut-mo:hover {
    border-color: color-mix(in srgb, var(--color-hieu) 55%, var(--color-vien));
    transform: translateY(-1px);
}
.game-avatar-nut-mo[aria-expanded="true"] {
    border-color: var(--color-hieu);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-hieu) 20%, transparent);
}
/* Nhảy một nhịp khi vừa đổi sang con mới */
.game-avatar-nut-mo.doi svg { animation: chimDoi .55s cubic-bezier(.2, 1.4, .4, 1); }
/* Kiểu focus chung của trang (button:focus-visible) ép border-radius: 8px —
   nút tròn/viên thuốc bị "vuông hoá" khi dùng bàn phím. Giữ đúng dáng gốc. */
.game-avatar-nut-mo:focus-visible, .game-nut-am-thanh:focus-visible, .game-tab:focus-visible { border-radius: 999px; }
.game-avatar-nut:focus-visible { border-radius: var(--r-lg); }

/* ----- Hộp thoại chọn avatar (#game-modal-avatar) ----- */
/* Khối "Đang dùng" trên cùng: avatar lớn (kèm khung nếu có) + tên. */
.game-avatar-hien-tai {
    display: flex; align-items: center; gap: 1rem;
    margin: .25rem .75rem 1rem;
    padding: .875rem 1rem;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--color-hieu) 5%, transparent);
}
.game-avatar-o.game-avatar-o-to { width: 6rem; height: 6rem; margin: 0; padding: .5rem; flex-shrink: 0; vertical-align: middle; }
.game-avatar-hien-tai-nhan { font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-chu-3); }
.game-avatar-hien-tai.xem-thu .game-avatar-hien-tai-nhan { color: var(--color-hieu); }
.game-avatar-hien-tai b { font-size: 1.375rem; font-weight: 900; color: var(--color-chu); }
.game-avatar-hien-tai-goi-y { margin-top: .25rem; font-size: .75rem; line-height: 1.45; color: var(--color-chu-3); }

/* Cố định 4 cột (12 con = đúng 3 hàng đều), thu về 3/2 cột trên màn hẹp. */
.game-avatar-luoi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .875rem;
    padding: 0 .75rem .75rem;
}
@media (max-width: 560px) { .game-avatar-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .game-avatar-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.game-avatar-nut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: 1rem .5rem .875rem;
    cursor: pointer;
    border: 1.5px solid var(--color-vien);
    border-radius: var(--r-lg);
    background: var(--color-mat);
    color: var(--color-chu-2);
    font: inherit;
    transition: transform .14s cubic-bezier(.2, 1.2, .4, 1), border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Nền tròn nhuộm đúng màu con chim — mỗi ô một tông, nhìn lưới là phân biệt
   ngay từng con, không còn 12 con chim bé tí cùng nằm trên nền trắng. */
.game-avatar-nut-hinh {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 34%, var(--color-mat)), color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 12%, var(--color-mat)) 72%);
    box-shadow: inset 0 -2px 4px color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 22%, transparent);
}
.game-avatar-nut svg { width: 4rem; height: 4rem; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.game-avatar-nut-ten { font-size: .875rem; font-weight: 800; line-height: 1.2; text-align: center; }
.game-avatar-nut:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 55%, var(--color-vien));
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--mau-chim, var(--color-hieu)) 60%, transparent);
}
/* Rê chuột vào thì con chim vẫy nhẹ — mời gọi bấm thử */
.game-avatar-nut:hover:not(:disabled) svg { animation: chimLacLu 1s ease-in-out infinite; transform-origin: 50% 85%; }
.game-avatar-nut:disabled { cursor: default; }
.game-avatar-nut.chon {
    border-color: var(--color-hieu);
    background: var(--color-hieu-nhat);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-hieu) 20%, transparent);
}
/* Dấu tích góc trên cho ô đang chọn */
.game-avatar-nut.chon::after {
    content: "✓";
    position: absolute;
    top: -.3rem; right: -.3rem;
    width: 1.1rem; height: 1.1rem;
    display: grid; place-items: center;
    font-size: .65rem; font-weight: 900; line-height: 1;
    color: #fff;
    background: var(--color-hieu);
    border: 2px solid var(--color-mat);
    border-radius: 999px;
}
/* Nảy bật khi vừa bấm chọn */
.game-avatar-nut.vua-chon { animation: avatarNay .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes avatarNay {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.28) translateY(-5px); }
    70%  { transform: scale(.94) translateY(1px); }
    100% { transform: scale(1) translateY(0); }
}

/* Đốm lấp lánh toả ra khi chọn — JS tạo rồi tự gỡ sau khi chạy xong */
.game-avatar-dom {
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 999px;
    background: var(--color-hieu);
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-hieu) 70%, transparent);
    pointer-events: none;
    animation: domBay .65s ease-out forwards;
}
@keyframes domBay {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* Người dùng bật "giảm chuyển động" thì tắt hết animation trang trí */
@media (prefers-reduced-motion: reduce) {
    .game-avatar-nut-mo svg,
    .game-avatar-nut:hover:not(:disabled) svg,
    .game-avatar-nut.vua-chon,
    .game-avatar-nut-mo.doi svg { animation: none; }
    .game-avatar-dom { display: none; }
}

/* Cảnh báo đỏ khi điểm bị từ chối do nghi gian lận (chống chỉnh số phía
   client). Hiện ngay dưới thanh điểm, đủ chói để không bỏ sót. */
.game-canh-bao-gian-lan {
    margin: -.25rem 0 1rem;
    padding: .625rem .875rem;
    border: 1px solid var(--color-khongphep-vien);
    border-left: 4px solid var(--color-khongphep);
    border-radius: var(--r-md);
    background: var(--color-khongphep-nen);
    color: var(--color-khongphep);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}
.game-canh-bao-gian-lan.an { display: none; }

/* Dòng bảng xếp hạng có điểm bất thường (do lỗ hổng cũ) — tô đỏ, xếp cuối
   bảng, không được trao huy chương. Cần đè cả table.bang td.chinh (vốn ép
   màu chữ riêng) nên phải nêu đích danh table.bang + tr để thắng specificity. */
table.bang tr.game-hang-nghi-ngo td,
table.bang tr.game-hang-nghi-ngo td.chinh {
    background: color-mix(in srgb, var(--color-khongphep) 9%, transparent);
    color: color-mix(in srgb, var(--color-khongphep) 78%, var(--color-chu));
}
.game-hang-nghi-ngo td .ma { color: inherit; }
.game-nhan-nghi-ngo {
    display: inline-block;
    margin-left: .375rem;
    padding: .0625rem .375rem;
    border-radius: 999px;
    background: var(--color-khongphep);
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}

/* Mục Flappy Bird ở sidebar nổi hơn các mục nghiệp vụ — đây là mục "cho vui",
   cần gợi tò mò chứ không lẫn vào danh sách chức năng. */
.canh-muc-game .canh-muc-nhan-moi {
  margin-left: auto;
  font-size: .875rem;
  line-height: 1;
  animation: nhanGameNhun 2.2s ease-in-out infinite;
}
@keyframes nhanGameNhun {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-3px) rotate(6deg); }
}
.canh-muc-game:not(.chon) svg { color: #f472b6; }
html.canh-gon .canh-muc-game .canh-muc-nhan-moi { display: none; }
/* Mục Mario (chỉ hiện với ai được cấp quyền) — nấm đỏ cho dễ nhận. */
.canh-muc-mario:not(.chon) svg { color: #ef4444; }

/* ============================================================ KHU GIẢI TRÍ (sidebar)
   Mỗi game là một thẻ có hoạt hình riêng để gây tò mò: Flappy (trời xanh, mây
   trôi, chim vỗ cánh), Mario (gạch đỏ, nấm nhún, xu lấp lánh), Tank (rằn ri,
   xe tăng nhích, chớp nổ). Hover: nhấc lên + vệt sáng quét qua. */
.canh-nhom-game { display: flex; align-items: center; gap: .45rem; color: #fbbf24; }
.cg-cham { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: cgCham 1.8s infinite; }
@keyframes cgCham { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.canh-menu-game { gap: .5rem; }
.canh-game {
  position: relative; display: flex; align-items: center; gap: .7rem;
  min-height: 58px; padding: .55rem .75rem; border-radius: 14px; overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.canh-game:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.22); }
.canh-game.chon { box-shadow: inset 0 0 0 2px #facc15, 0 8px 22px rgba(250,204,21,.28); }
.canh-game::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 45%, transparent 60%);
  transform: translateX(-120%);
}
.canh-game:hover::after { animation: cgLoe .9s ease; }
@keyframes cgLoe { to { transform: translateX(120%); } }
.cg-nen { position: absolute; inset: 0; z-index: -1; }
.cg-hinh { width: 2.2rem; flex-shrink: 0; text-align: center; font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); z-index: 2; }
.cg-hinh svg { width: 32px; height: 32px; display: block; margin: 0 auto; }
.cg-chu { display: flex; flex-direction: column; min-width: 0; z-index: 2; }
.cg-chu b { font-size: .9rem; font-weight: 900; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.cg-chu small { font-size: .6875rem; font-weight: 700; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.cg-chu small.mo { opacity: 0; }
/* Flappy: trời xanh, mây trôi, ống nước, chim vỗ cánh */
.cg-flappy .cg-nen { background: linear-gradient(180deg, #38bdf8, #0369a1); }
.cg-flappy .cg-nen::before, .cg-flappy .cg-nen::after { content: ''; position: absolute; height: 10px; border-radius: 999px; background: #fff; opacity: .5; left: 110%; }
.cg-flappy .cg-nen::before { width: 34px; top: 8px; animation: cgMay 9s linear infinite; }
.cg-flappy .cg-nen::after { width: 22px; top: 38px; animation: cgMay 13s linear infinite 4s; }
@keyframes cgMay { to { left: -30%; } }
.cg-flappy::before { content: ''; position: absolute; right: 12px; bottom: 0; width: 13px; height: 22px; z-index: 0; opacity: .9;
  background: linear-gradient(90deg, #15803d, #4ade80); border: 2px solid #14532d; border-bottom: none; border-radius: 3px 3px 0 0; }
.cg-flappy .cg-hinh { animation: cgVoCanh .7s ease-in-out infinite alternate; }
@keyframes cgVoCanh { from { transform: translateY(2px) rotate(-8deg); } to { transform: translateY(-4px) rotate(10deg); } }
/* Mario: nền đỏ, hàng gạch, nấm nhún, xu lấp lánh */
.cg-mario .cg-nen { background: linear-gradient(180deg, #ef4444, #991b1b); }
.cg-mario .cg-nen::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-linear-gradient(90deg, #b45309 0 14px, #78350f 14px 16px); border-top: 2px solid #451a03; }
.cg-mario .cg-nen::before { content: '✦'; position: absolute; right: 14px; top: 6px; color: #fde047; font-size: 13px; animation: cgXu 1.6s ease-in-out infinite; }
@keyframes cgXu { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
.cg-mario .cg-hinh { animation: cgNhun 1.2s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes cgNhun { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
/* Tank: rằn ri, xe tăng nhích tới lui, chớp nổ đầu nòng, băng MỚI */
.cg-tank .cg-nen { background:
  radial-gradient(circle at 20% 30%, #4d5b2b 0 18%, transparent 19%),
  radial-gradient(circle at 70% 72%, #3f4a22 0 22%, transparent 23%),
  radial-gradient(circle at 88% 22%, #5b6b31 0 14%, transparent 15%),
  linear-gradient(160deg, #5b6b31, #26300f); }
.cg-tank .cg-hinh svg { animation: cgXeTang 2.4s ease-in-out infinite; }
@keyframes cgXeTang { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
.cg-no { position: absolute; right: 26px; top: 50%; margin-top: -13px; font-size: 18px; opacity: 0; z-index: 2; animation: cgNo 2.4s ease-out infinite; }
@keyframes cgNo { 0%, 68% { opacity: 0; transform: scale(.4); } 76% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.7); } }
.cg-moi { position: absolute; top: 7px; right: -26px; z-index: 4; transform: rotate(35deg);
  padding: 1px 28px; background: #facc15; color: #1a1a00; font-size: .5625rem; font-weight: 900; letter-spacing: .06em;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); animation: cgMoi 1.6s ease-in-out infinite; }
@keyframes cgMoi { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
/* CF Ngã Tư: phố đêm đỏ sẫm, vạch kẻ đường, vệt đèn xe tử thần quét ngang, tâm ngắm co giãn */
.cg-cf .cg-nen { background: linear-gradient(160deg, #4a0c0c, #160809 58%, #0b0b0e); }
.cg-cf .cg-nen::before { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 3px; opacity: .55;
  background: repeating-linear-gradient(90deg, #facc15 0 10px, transparent 10px 20px); }
.cg-cf .cg-nen::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,230,150,.38), transparent); animation: cgDenXe 3.2s ease-in infinite; }
@keyframes cgDenXe { 0%, 55% { left: -45%; } 100% { left: 110%; } }
.cg-cf .cg-hinh svg { animation: cgTamNgam 1.8s ease-in-out infinite; }
@keyframes cgTamNgam { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.86) rotate(45deg); } }
/* menu thu gọn: chỉ còn ô biểu tượng */
@media (min-width: 1024px) {
  html.canh-gon .canh-game { justify-content: center; min-height: 46px; padding: .45rem 0; }
  html.canh-gon .cg-chu, html.canh-gon .cg-moi, html.canh-gon .cg-no, html.canh-gon .cg-flappy::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .canh-game *, .canh-game::after, .cg-nen::before, .cg-nen::after, .cg-cham { animation: none !important; }
}

/* Cột phụ bên phải: xếp các thẻ (bậc tiến hóa, bảng xếp hạng) theo chiều dọc
   (màn hẹp/vừa). Ở màn rộng (xem @media bên dưới) khối này chuyển hẳn thành
   display:contents — bản thân nó "biến mất" khỏi lưới, hai thẻ con tự thành
   2 cột trực tiếp của .game-luoi, đứng SONG SONG cạnh màn chơi. */
.game-cot-phu { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.game-cot-phu > .the { min-width: 0; }
@media (min-width: 1280px) { .game-cot-phu { display: contents; } }

/* Danh sách bậc tiến hóa — bày sẵn NGOÀI màn chơi để ai cũng thấy mình đang ở
   đâu và còn bao nhiêu điểm nữa thì lên bậc, tạo động lực chơi tiếp. */
.bac-tien-hoa { display: flex; flex-direction: column; gap: .375rem; padding: .75rem; }
.bac-tien-hoa-muc {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 22%, var(--color-vien));
  border-radius: var(--r-md);
  transition: var(--muot);
  overflow: hidden;
}
.bac-tien-hoa-muc::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--bac-mau, var(--color-hieu));
}
.bac-tien-hoa-muc.chua-dat { opacity: .62; }
.bac-tien-hoa-muc.dat-duoc {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 16%, transparent),
    color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 5%, transparent));
  border-color: color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 45%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 22%, transparent);
}
.bac-tien-hoa-muc:hover { transform: translateX(2px); }
.bac-tien-hoa-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg,
    var(--bac-mau, var(--color-hieu)),
    color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 60%, #0f172a));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--bac-mau, var(--color-hieu)) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.25);
}
.bac-tien-hoa-muc.dat-duoc .bac-tien-hoa-icon { animation: bacDatDuoc 2.4s ease-in-out infinite; }
@keyframes bacDatDuoc {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(-4deg); }
}
.bac-tien-hoa-icon svg { width: 23px; height: 23px; }
.bac-tien-hoa-icon-emoji { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* Bậc cuối dùng hình chim chibi SVG (bộ avatar) — to hơn svg 23px mặc định ở
   trên để thấy rõ mào vàng + cánh lửa; cần thêm "svg." để thắng độ ưu tiên. */
.bac-tien-hoa-icon svg.bac-tien-hoa-icon-chibi {
  width: 34px; height: 34px;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35));
}
.bac-tien-hoa-chu { flex: 1; min-width: 0; }
.bac-tien-hoa-ten {
  font-size: .9375rem; font-weight: 900; letter-spacing: -.01em;
  color: var(--color-chu);
}
.bac-tien-hoa-muc.dat-duoc .bac-tien-hoa-ten { color: var(--bac-mau, var(--color-hieu)); }
.bac-tien-hoa-moc { font-size: .75rem; font-weight: 600; color: var(--color-chu-3); margin-top: .125rem; }
.bac-tien-hoa-trang-thai { flex: 0 0 auto; }
.bac-tien-hoa-vo-han {
  padding: .75rem 1.125rem;
  border-top: 1px dashed var(--color-vien);
  background: color-mix(in srgb, var(--color-hieu) 4%, transparent);
  font-size: .6875rem; font-weight: 600; line-height: 1.5;
  color: var(--color-chu-3);
}

/* Thông báo lên bậc — nhỏ gọn ở góc dưới màn chơi, không che gì, không chặn
   thao tác, tự mờ dần biến mất sau vài giây. Thay cho popup to giữa màn hình
   + pháo hoa trước đây (người chơi phản ánh bị giật mình lúc đang chơi). */
.game-thongbao-nhe {
  position: absolute;
  left: .875rem; bottom: .875rem;
  z-index: 4;
  display: flex; align-items: center; gap: .375rem;
  padding: .5rem .75rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--color-mat) 94%, transparent);
  border: 1px solid var(--color-vien);
  box-shadow: var(--shadow-lg);
  font-size: .8125rem; font-weight: 600; color: var(--color-chu-2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.game-thongbao-nhe.hien { opacity: 1; transform: translateY(0); }
#game-thongbao-chu { font-weight: 800; color: var(--game-thongbao-mau, var(--color-hieu)); }
#game-thongbao-icon { flex: none; }
/* Rương mốc điểm / hạ boss: thẻ rộng hơn chút, dòng dài (cốt truyện) nên cho
   xuống dòng thay vì ép một hàng như thông báo "lên bậc" ngắn gọn. */
.game-thongbao-nhe.ruong, .game-thongbao-nhe.boss-thang, .game-thongbao-nhe.vung, .game-thongbao-nhe.hang-ngay {
  max-width: min(22rem, calc(100% - 1.75rem));
  align-items: flex-start;
  line-height: 1.45;
}
.game-thongbao-nhe.boss-thang { border-color: color-mix(in srgb, #facc15 45%, var(--color-vien)); }
@media (max-width: 640px) { .game-thongbao-nhe { font-size: .75rem; left: .625rem; bottom: .625rem; padding: .4375rem .625rem; } }

/* ===== Vùng hiện tại + vật phẩm đang có (thanh điểm) ====================== */
.game-huy-hieu-vung { white-space: nowrap; }
.game-hieu-ung-vatpham { display: flex; align-items: center; gap: .3rem; }
.game-hieu-ung-muc {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-hieu) 10%, var(--color-mat));
  border: 1px solid var(--color-vien);
  font-size: .9375rem;
  animation: hieuUngNay 1.6s ease-in-out infinite;
}
@keyframes hieuUngNay { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ===== Thanh máu Vua Quạ Đen — chỉ hiện trong đấu trường (từ 200 điểm) ==== */
.game-boss-boc {
  position: absolute;
  top: .625rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(20rem, calc(100% - 2rem));
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem .625rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, #0f172a 78%, transparent);
  border: 1px solid color-mix(in srgb, #f87171 45%, transparent);
  box-shadow: var(--shadow-lg);
}
.game-boss-boc[hidden] { display: none; } /* .game-boss-boc tự đặt display:flex ở trên — dù cùng độ đặc hiệu với [hidden] của trình duyệt, tầng "author" luôn thắng tầng "user-agent" nên PHẢI khai lại tường minh ở đây, không thì thanh máu hiện cả khi chưa vào đấu trường. */
.game-boss-nhan { font-size: .75rem; font-weight: 800; color: #fecaca; white-space: nowrap; }
.game-boss-thanh { flex: 1; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.game-boss-mau {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #f87171, #dc2626);
  transition: width .3s ease;
}

/* ===== Cốt truyện — <details> gọn, không JS, đặt trên toàn bộ khu game ==== */
.game-cot-truyen { padding: 0; overflow: hidden; margin-bottom: 1.25rem; }
.game-cot-truyen summary {
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem 1.125rem;
  cursor: pointer;
  font-weight: 800; font-size: .9375rem; color: var(--color-chu);
  list-style: none;
}
.game-cot-truyen summary::-webkit-details-marker { display: none; }
.game-cot-truyen-icon { font-size: 1.0625rem; }
.game-cot-truyen-goi-mo { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--color-chu-3); }
.game-cot-truyen[open] summary { border-bottom: 1px solid var(--color-vien); }
.game-cot-truyen-noi-dung { padding: 1rem 1.125rem 1.25rem; font-size: .8125rem; line-height: 1.7; color: var(--color-chu-2); }
.game-cot-truyen-noi-dung p { margin: 0 0 .75rem; }
.game-cot-truyen-vung {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .375rem .75rem;
  margin: 0 0 .75rem; padding: 0; list-style: none;
  font-size: .8125rem; font-weight: 600;
}
.game-cot-truyen-vung li { padding: .3rem .5rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--color-hieu) 5%, transparent); }
.game-cot-truyen-nho { font-size: .75rem; color: var(--color-chu-3); margin: 0; }

/* ===== Kết bí mật sau khi hạ boss — hiện trong màn hình kết thúc ván ====== */
.game-ket-bi-mat {
  margin: .75rem 0;
  padding: .75rem .875rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, #facc15 14%, transparent), color-mix(in srgb, #4c1d95 14%, transparent));
  border: 1px solid color-mix(in srgb, #facc15 35%, var(--color-vien));
  font-size: .8125rem; line-height: 1.5;
}
.game-ket-bi-mat-chuong { margin-top: .25rem; font-weight: 900; font-size: .875rem; color: #ca8a04; }

/* ===== Huy hiệu "đã hạ Vua Quạ Đen" cạnh tên ở bảng xếp hạng ============== */
.game-nhan-pha-boss { margin-left: .25rem; font-size: .875rem; vertical-align: -.05em; }

/* ===== Reset điểm (admin) — nút nhỏ từng dòng + nút xoá sạch cả bảng ====== */
.game-nut-reset-hang {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--color-chu-3);
    font-size: .875rem;
    cursor: pointer;
    transition: var(--muot);
}
.game-nut-reset-hang:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-khongphep) 12%, transparent);
    border-color: var(--color-khongphep-vien);
    color: var(--color-khongphep);
}
.game-nut-reset-hang:disabled { opacity: .5; cursor: default; }

/* ===== Lịch sử điểm — nút mở + modal ======================================= */
.game-nut-lich-su {
    display: inline-grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--color-chu-3);
    cursor: pointer;
    border-radius: var(--r-md);
    transition: var(--muot);
}
.game-nut-lich-su:hover:not(:disabled) { color: var(--color-hieu); background: var(--color-hieu-nhat); }
/* Bản đứng cạnh "Kỷ lục của bạn" — to hơn chút, có viền, dễ bấm. */
/* Bản nhỏ lồng trong dòng bảng xếp hạng — không viền, không chiếm chỗ. */
.game-nut-lich-su-nho {
    width: 1.375rem; height: 1.375rem;
    font-size: .75rem;
    vertical-align: -.2em;
}

.game-modal-nen {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.game-modal-nen.an { display: none; }
.game-modal-hop {
    width: min(26rem, 100%);
    max-height: min(32rem, 85vh);
    display: flex;
    flex-direction: column;
    background: var(--color-mat);
    border: 1px solid var(--color-vien);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: gameModalMo .28s cubic-bezier(.2, .9, .3, 1);
}
/* Bản rộng cho hộp thoại có lưới ô (chọn avatar, cửa hàng) — mở to gần kín
   màn hình để avatar/khung hiện rõ từng chi tiết, dễ chọn. */
.game-modal-hop-rong { width: min(46rem, 94vw); max-height: min(48rem, 92vh); }
.game-modal-hop-rong .game-modal-dau { padding: 1rem 1.25rem; }
.game-modal-hop-rong .game-modal-dau h3 { font-size: 1.125rem; }
.game-modal-hop-rong .game-modal-noi-dung { padding: .75rem .75rem 1rem; }
/* Mở ra kiểu "phóng to": hộp nở từ nhỏ ra đúng cỡ, hơi vượt rồi thu về; nền
   tối mờ dần vào cùng lúc. */
@keyframes gameModalMo {
    0%   { opacity: 0; transform: scale(.82); }
    70%  { opacity: 1; transform: scale(1.015); }
    100% { opacity: 1; transform: scale(1); }
}
.game-modal-nen:not(.an) { animation: gameNenMo .2s ease; }
@keyframes gameNenMo { from { opacity: 0; } to { opacity: 1; } }
.game-modal-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--color-vien);
}
.game-modal-dau h3 { margin: 0; font-size: .9375rem; font-weight: 900; }
.game-modal-dong {
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem;
    border: none;
    background: transparent;
    color: var(--color-chu-3);
    font-size: .875rem;
    cursor: pointer;
    border-radius: var(--r-md);
}
.game-modal-dong:hover { background: var(--color-hieu-nhat); color: var(--color-hieu); }
.game-modal-noi-dung { overflow-y: auto; padding: .5rem; }
.game-lich-su-hang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5625rem .75rem;
    border-radius: var(--r-md);
}
.game-lich-su-hang:nth-child(odd) { background: color-mix(in srgb, var(--color-hieu) 3%, transparent); }
.game-lich-su-diem { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--color-chu); }
.game-lich-su-luc { font-family: var(--font-mono); font-size: .75rem; color: var(--color-chu-3); }
.game-lich-su-rong { padding: 1.5rem; text-align: center; color: var(--color-chu-3); font-size: .8125rem; }

@media (prefers-reduced-motion: reduce) {
    .game-modal-hop, .game-modal-nen:not(.an) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-hieu-ung-muc { animation: none; }
}
.bac-tien-hoa-vo-han strong { color: var(--color-hieu); }

/* ===== Nút tắt tiếng ======================================================= */
.game-nut-am-thanh {
    display: grid; place-items: center;
    width: 2rem; height: 2rem;
    border: 1px solid var(--color-vien);
    border-radius: 999px;
    background: var(--color-mat);
    color: var(--color-chu-2);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--muot);
}
.game-nut-am-thanh:hover { border-color: color-mix(in srgb, var(--color-hieu) 55%, var(--color-vien)); }
.game-nut-am-thanh[aria-pressed="true"] { color: var(--color-chu-3); opacity: .7; }

/* ===== HUD lông vũ + huy hiệu chế độ thử thách hằng ngày =================== */
.game-long-vu-tren { font-size: .75rem; font-weight: 700; color: var(--color-chu-3); }
.game-huy-hieu-che-do { white-space: nowrap; }
.game-huy-hieu-che-do.an { display: none; }

/* Chuỗi ngày liên tiếp chơi thử thách hằng ngày — huy hiệu nhỏ lồng ngay
   trong nút, không cần một hàng/badge riêng chiếm chỗ. */
.game-chuoi-hang-ngay {
    display: inline-flex; align-items: center; gap: .1rem;
    margin-left: .25rem;
    padding: .0625rem .375rem;
    border-radius: 999px;
    background: color-mix(in srgb, #f97316 16%, var(--color-mat));
    color: #c2410c;
    font-size: .6875rem; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.game-chuoi-hang-ngay.an { display: none; }
/* Nảy nhẹ mỗi khi chuỗi vừa tăng thêm một ngày (game.js gắn/gỡ class này) —
   cùng chất phản hồi với số điểm (#game-diem.game-tri-diem-nay ở app.css). */
.game-chuoi-hang-ngay.moi-tang { animation: game-diem-nay .42s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) {
    .game-chuoi-hang-ngay.moi-tang { animation: none; }
}

/* Chú thích lợi ích thử thách hằng ngày — chữ nhỏ, màu mờ, đặt ngay dưới hàng
   nút để LUÔN thấy được (trước chỉ có ở "title" trên nút, phải rê chuột giữ
   mới hiện — trên điện thoại chạm màn hình không có hover nên không bao giờ
   thấy được). */
.game-hang-ngay-gioi-thieu {
    margin: -.125rem 0 0;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--color-chu-3);
}

/* ===== Khung avatar (cửa hàng) ============================================= */
/* Vẽ bằng box-shadow nhiều lớp thay vì border — không đẩy layout (avatar giữ
   nguyên kích thước), áp được cả lên nút tròn thanh điểm (vuông chứa svg,
   border-radius 999px) LẪN svg trong bảng xếp hạng (vuông theo viewBox, chưa
   tự tròn). border-radius:50%+overflow:hidden bắt buộc phải có ở ĐÂY (không
   chỉ dựa vào border-radius sẵn có của nút tròn) — thiếu nó thì trên svg,
   quầng khung vẽ theo cạnh VUÔNG của viewBox, nhìn như khung ảnh chứ không
   phải vòng quanh avatar. Mỗi khung 3 lớp: ánh sáng hắt vào trong (inset,
   cảm giác kim loại) + viền màu đặc + quầng mờ lan ra ngoài. */
.khung-dong, .khung-bac, .khung-vang, .khung-bang, .khung-lua, .khung-cauvong {
    border-radius: 50%;
    /* KHÔNG dùng clip-path ở đây: clip-path cắt luôn cả box-shadow nằm NGOÀI
       vòng tròn — tức là cắt mất chính cái viền màu của khung, chỉ còn vệt
       sáng inset, các khung trông gần như giống hệt nhau (lỗi của lượt sửa
       trước). Con chim được thu vào trong vòng tròn bằng padding (xem
       .game-avatar-o[data-avatar]) nên không cần cắt nữa. */
}
.khung-dong {
    box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #b45309, 0 0 0 6px color-mix(in srgb, #b45309 35%, transparent);
}
.khung-bac {
    box-shadow: inset 0 1px 2px rgba(255,255,255,.65), 0 0 0 3px #94a3b8, 0 0 0 6px color-mix(in srgb, #94a3b8 35%, transparent);
}
.khung-vang {
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 0 0 3px #eab308, 0 0 9px 2px color-mix(in srgb, #eab308 55%, transparent);
}
.khung-bang {
    box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 0 0 3px #38bdf8, 0 0 10px 3px color-mix(in srgb, #38bdf8 55%, transparent);
}
.khung-lua {
    box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #f97316, 0 0 11px 3px color-mix(in srgb, #ef4444 60%, transparent);
}
.khung-cauvong {
    box-shadow: 0 0 0 3px transparent, 0 0 10px 3px color-mix(in srgb, #a78bfa 45%, transparent);
    animation: khungCauVong 3.5s linear infinite;
}
@keyframes khungCauVong {
    0%   { box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #f43f5e, 0 0 10px 3px color-mix(in srgb, #f43f5e 45%, transparent); }
    20%  { box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #f97316, 0 0 10px 3px color-mix(in srgb, #f97316 45%, transparent); }
    40%  { box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #eab308, 0 0 10px 3px color-mix(in srgb, #eab308 45%, transparent); }
    60%  { box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #22c55e, 0 0 10px 3px color-mix(in srgb, #22c55e 45%, transparent); }
    80%  { box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #38bdf8, 0 0 10px 3px color-mix(in srgb, #38bdf8 45%, transparent); }
    100% { box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #a78bfa, 0 0 10px 3px color-mix(in srgb, #a78bfa 45%, transparent); }
}
/* Con chim trong thanh điểm là NÚT vuông bo tròn (không phải svg tròn khít
   như trong bảng) — quầng khung cần bo tròn theo đúng border-radius của nút. */
.game-avatar-nut-mo.khung-dong, .game-avatar-nut-mo.khung-bac, .game-avatar-nut-mo.khung-vang,
.game-avatar-nut-mo.khung-bang, .game-avatar-nut-mo.khung-lua, .game-avatar-nut-mo.khung-cauvong {
    border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
    .khung-cauvong { animation: none; box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 0 0 3px #a78bfa, 0 0 10px 3px color-mix(in srgb, #a78bfa 45%, transparent); }
}

/* ===== Tab phạm vi bảng xếp hạng =========================================== */
.game-xep-hang-tab {
    display: flex; gap: .375rem; flex-wrap: wrap;
    padding: 0 1rem .75rem;
}
.game-tab {
    padding: .375rem .75rem;
    border: 1px solid var(--color-vien);
    border-radius: 999px;
    background: var(--color-mat);
    color: var(--color-chu-2);
    font-size: .75rem; font-weight: 700;
    cursor: pointer;
    transition: var(--muot);
}
.game-tab:hover { border-color: color-mix(in srgb, var(--color-hieu) 55%, var(--color-vien)); }
.game-tab.chon { background: var(--color-hieu); border-color: var(--color-hieu); color: #fff; }
.game-xep-hang-mo-ta {
    margin: -.25rem 1rem .875rem;
    padding: .5rem .75rem;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--color-hieu) 5%, transparent);
    color: var(--color-chu-2);
    font-size: .75rem; line-height: 1.5;
}

/* ===== Cửa hàng khung avatar (modal) ======================================= */
.game-cua-hang-gioi-thieu { margin: .25rem .75rem 1rem; font-size: .8125rem; color: var(--color-chu-2); line-height: 1.5; }
.game-cua-hang-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .875rem;
    padding: .25rem .75rem .75rem;
}
.game-cua-hang-o {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .625rem;
    padding: 1.125rem .625rem .875rem;
    border: 1.5px solid var(--color-vien);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-hieu) 4%, var(--color-mat)), var(--color-mat));
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
    text-align: center;
    transition: var(--muot);
    overflow: hidden; /* cắt gọn ruy băng "Đang dùng" ở góc, không lòi ra khe giữa các thẻ */
}
.game-cua-hang-o:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-hieu) 45%, var(--color-vien)); }
.game-cua-hang-o.dang-dung {
    border-color: var(--color-hieu);
    background: linear-gradient(180deg, var(--color-hieu-nhat), var(--color-mat));
    box-shadow: 0 0 0 1px var(--color-hieu), var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
/* Ruy băng góc "Đang dùng" — nổi bật rõ hơn hẳn chỉ đổi màu viền/nền như
   trước, thấy ngay từ xa cái nào đang được chọn mà không cần đọc chữ nút. */
.game-cua-hang-o.dang-dung::before {
    content: "Đang dùng";
    position: absolute; top: .5rem; right: -1.75rem;
    width: 6.5rem; padding: .125rem 0;
    background: var(--color-hieu); color: #fff;
    font-size: .625rem; font-weight: 800; letter-spacing: .02em;
    transform: rotate(35deg);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.game-cua-hang-mau { width: 5.75rem; height: 5.75rem; display: grid; place-items: center; }

/* ===== Ví vàng trên đầu hộp thoại ==========================================
   Trước đây phải nhắm mắt nhớ hoặc đóng hộp thoại lại xem vàng ở thanh chỉ số
   phía sau mới biết mua nổi món nào — giờ nổi ngay cạnh tiêu đề, cập nhật tức
   thì sau mỗi lần mua (JS ghi lại số vào #game-cua-hang-vi-so). */
.game-cua-hang-vi {
    display: flex; align-items: center; gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, #facc15 14%, var(--color-mat));
    border: 1px solid color-mix(in srgb, #facc15 35%, var(--color-vien));
    font-size: .8125rem; font-weight: 900; color: var(--color-chu);
    font-variant-numeric: tabular-nums;
}
.game-cua-hang-vi svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ===== Cửa hàng — tab danh mục ==============================================
   Hai danh mục (Khung avatar / Vệt bay) từng xếp DỌC, phải cuộn hết mục này
   mới thấy mục kia trong cùng hộp thoại — giờ tách tab, đúng "gian hàng"
   riêng, mở lên là thấy trọn một danh mục không phải cuộn tìm. */
.game-cua-hang-tab { display: flex; gap: .375rem; margin: 0 .75rem .875rem; border-bottom: 1px solid var(--color-vien); }
.game-cua-hang-tab-nut {
    padding: .5rem .875rem .625rem;
    border: none; border-bottom: 2px solid transparent;
    background: transparent;
    font-size: .8125rem; font-weight: 800; color: var(--color-chu-3);
    cursor: pointer;
    transition: var(--muot);
    margin-bottom: -1px;
}
.game-cua-hang-tab-nut:hover { color: var(--color-chu); }
.game-cua-hang-tab-nut.dang-chon { color: var(--color-hieu); border-bottom-color: var(--color-hieu); }
.game-cua-hang-trang.an { display: none; }

/* ===== Cửa hàng — mục Vệt bay =============================================
   Ô mẫu vệt bay: không có avatar bên trong (khác ô khung) — mỗi loại một
   gradient/hoạ tiết CSS thuần, đại diện đúng "chất" của vệt đó, đủ để nhận ra
   ngay trong lưới mà không cần vẽ riêng từng hình động. Mỗi loại có thêm MỘT
   chuyển động riêng (xoay/nhấp nháy/đung đưa) — bản trước đứng yên hoàn toàn,
   trông như miếng dán màu hơn là hiệu ứng bay thật. */
/* KHÔNG tự đặt width/height ở đây — luôn đi kèm .game-cua-hang-mau (đã có sẵn
   5.75rem vuông) trên CÙNG một phần tử; đặt "100%" ở đây từng vô tình THẮNG
   "5.75rem" kia (hai lớp, cùng độ đặc hiệu, luật khai SAU thắng) và bị chính
   nó kéo theo chiều ngang của thẻ (border-radius:50% trên một khối không
   vuông ra hình elip dẹt, không còn tròn). */
.game-vetbay-mau { border-radius: 50%; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.game-vetbay-khong { font-size: .75rem; font-weight: 800; color: var(--color-chu-3); }

.game-vetbay-mau-canhhoa { background: radial-gradient(circle at 30% 30%, #fecdd3, #fb7185 55%, #be123c); }
.game-vetbay-mau-canhhoa::before, .game-vetbay-mau-canhhoa::after {
    content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50% 0 50% 50%;
    background: #fff; opacity: .8;
    animation: gameVetHoaDungDua 2.6s ease-in-out infinite;
}
.game-vetbay-mau-canhhoa::before { top: 20%; left: 25%; transform: rotate(20deg); transform-origin: 80% 20%; }
.game-vetbay-mau-canhhoa::after { bottom: 22%; right: 22%; transform: rotate(200deg); transform-origin: 20% 80%; animation-delay: -1.3s; }
@keyframes gameVetHoaDungDua {
    0%, 100% { rotate: -12deg; }
    50% { rotate: 12deg; }
}

.game-vetbay-mau-lua {
    background: radial-gradient(circle at 50% 75%, #fde68a, #f97316 45%, #7c2d12 90%);
    animation: gameVetLuaChayXam 1.1s ease-in-out infinite;
}
@keyframes gameVetLuaChayXam {
    0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); }
    50% { filter: brightness(1.18) saturate(1.25); transform: scale(1.035); }
}

.game-vetbay-mau-set {
    background: linear-gradient(160deg, #1e1b4b, #4338ca 55%, #a5b4fc);
    clip-path: polygon(55% 0, 30% 45%, 50% 45%, 25% 100%, 75% 40%, 52% 40%);
    animation: gameVetSetNhapNhay 1.8s steps(1, end) infinite;
}
@keyframes gameVetSetNhapNhay {
    0%, 39%, 44%, 100% { filter: brightness(1); }
    41%, 43% { filter: brightness(1.9) saturate(1.4); }
}

.game-vetbay-mau-tuyet { background: radial-gradient(circle at 35% 35%, #ffffff, #bfdbfe 60%, #60a5fa); }
.game-vetbay-mau-tuyet::before {
    content: "❄"; position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 2.25rem; color: #1e3a8a; opacity: .55;
    animation: gameVetTuyetXoay 9s linear infinite;
}
@keyframes gameVetTuyetXoay { to { transform: rotate(1turn); } }

.game-vetbay-mau-cauvong {
    background: conic-gradient(from 200deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
    animation: gameVetCauVongXoay 4s linear infinite;
}
.game-vetbay-mau-cauvong::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--color-mat); }
@keyframes gameVetCauVongXoay { to { transform: rotate(1turn); } }

.game-vetbay-mau-nganha { background: radial-gradient(circle at 60% 30%, #4c1d95, #1e1b4b 60%, #020617); }
.game-vetbay-mau-nganha::before, .game-vetbay-mau-nganha::after {
    content: ""; position: absolute; border-radius: 50%; background: #fff;
    animation: gameVetSaoLapLanh 2.2s ease-in-out infinite;
}
.game-vetbay-mau-nganha::before { width: 4px; height: 4px; top: 22%; left: 30%; box-shadow: 14px 30px 0 0 #fff, 30px 8px 0 -1px #fff, 40px 34px 0 0 #fff, 10px 45px 0 -1px #fff; opacity: .9; }
.game-vetbay-mau-nganha::after { width: 10px; height: 10px; bottom: 18%; right: 22%; background: radial-gradient(circle, #fff, transparent 70%); animation-delay: -1.1s; }
@keyframes gameVetSaoLapLanh {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}
/* Màn hình ưu tiên bớt chuyển động: tắt hết animation trên các mẫu vệt bay,
   giữ nguyên hình tĩnh vẫn đủ nhận ra từng loại. */
@media (prefers-reduced-motion: reduce) {
    .game-vetbay-mau, .game-vetbay-mau::before, .game-vetbay-mau::after { animation: none !important; }
}
.game-cua-hang-mau .game-avatar-o { width: 4.75rem; height: 4.75rem; margin: 0; padding: .4rem; }
.game-cua-hang-ten { font-size: .875rem; font-weight: 800; color: var(--color-chu-2); }
.game-cua-hang-o .nut { width: 100%; justify-content: center; gap: .3rem; }
.game-cua-hang-nut-gia { display: inline-flex; align-items: center; gap: .3rem; }
.game-cua-hang-nut-gia svg { width: .9375rem; height: .9375rem; flex-shrink: 0; }
.game-cua-hang-loi {
    margin: .25rem .75rem 0;
    padding: .5rem .75rem;
    border-radius: var(--r-md);
    background: var(--color-khongphep-nen);
    color: var(--color-khongphep);
    font-size: .8125rem; font-weight: 700;
}
.game-cua-hang-loi.an { display: none; }

/* ============================================================ HẠT RƠI THEO MÙA
   Vài hạt trôi rất nhẹ ở nền — KHÔNG che nội dung (pointer-events tắt hẳn) và
   tự ẩn khi trình duyệt bật "giảm hiệu ứng chuyển động" (dùng lại đúng media
   query prefers-reduced-motion cuối file). Chỉ bật ở desktop — mobile ưu tiên
   hiệu năng/pin. Xuân/Hạ/Thu/Đông mỗi mùa một kiểu hạt riêng (hoa đào, bong
   bóng biển, lá, tuyết); Hạ trôi NGƯỢC LÊN (.noi) vì bong bóng không rơi.
   Mặc định cố tình KHÔNG có hạt (JS không tạo phần tử con), giữ giao diện gọn
   cho lựa chọn thương hiệu chuẩn VNPT. */
.hieu-ung-mua {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) {
  .hieu-ung-mua:not(:empty) { display: block; }
}
body.smartca-toan-man-hinh .hieu-ung-mua,
body.smartca-modal-mo .hieu-ung-mua { display: none; }

.hat-mua {
  position: absolute;
  top: -8%;
  left: var(--hat-trai, 50%);
  animation: hatRoi var(--hat-thoigian, 13s) linear infinite;
}
.hat-mua.noi {
  top: auto;
  bottom: -8%;
  animation-name: hatNoi;
}
.hat-mua-trong {
  display: block;
  font-size: var(--hat-co, 1.1rem);
  opacity: var(--hat-mo, .5);
  animation: hatLac var(--hat-lac-tg, 3.2s) ease-in-out infinite alternate;
}
@keyframes hatRoi { from { transform: translateY(-5vh); } to { transform: translateY(112vh); } }
@keyframes hatNoi { from { transform: translateY(5vh); } to { transform: translateY(-112vh); } }
@keyframes hatLac { from { transform: translateX(-14px) rotate(-12deg); } to { transform: translateX(14px) rotate(18deg); } }

/* ---- Tôn trọng lựa chọn tắt hiệu ứng chuyển động ở hệ điều hành (Windows:
   Cài đặt > Trợ năng > Hiệu ứng hình ảnh). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Ngoại lệ CÓ CHỦ ĐÍCH: hạt rơi theo mùa là trang trí thuần tuý, không mang
     thông tin, không lặp nhấp nháy gây khó chịu — chỉ trôi chậm một chiều. Rất
     nhiều máy trong mạng VNPT tắt sẵn "hiệu ứng hình ảnh" của Windows theo mặc
     định của IT (không phải người dùng tự chọn vì lý do tiền đình/say chuyển
     động), nên tôn trọng tuyệt đối ở đây khiến hạt bị đứng hình ngay phía trên
     màn hình, coi như mất hẳn tính năng. Toàn bộ animation/transition CHỨC
     NĂNG khác của app (menu, nút, chuyển trang...) vẫn tắt bình thường như
     trên — ngoại lệ này chỉ áp cho đúng hai lớp hạt rơi. */
  .hat-mua { animation-duration: var(--hat-thoigian, 13s) !important; animation-iteration-count: infinite !important; }
  .hat-mua-trong { animation-duration: var(--hat-lac-tg, 3.2s) !important; animation-iteration-count: infinite !important; }
}

/* ============================================================ SIDEBAR THU GỌN
   Thu gọn còn dải icon, ẩn chữ đi. Trạng thái đặt class NGAY TRÊN <html>
   ("canh-gon") và lưu localStorage("cc-sidebar") — giống hệt cách chủ đề
   sáng/tối + 4 mùa ở trên cùng file (script trong co_so.html chạy trước khi
   vẽ trang, tránh nháy). Toàn bộ hiệu lực chỉ áp dụng ở desktop (>=1024px):
   mobile đã có cơ chế ẩn/hiện riêng qua .mo/.man-che, không đụng tới. */
.canh { transition: width .22s cubic-bezier(.16, 1, .3, 1); }

.nut-thu-gon {
  position: absolute;
  top: 20px;
  right: -12px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-vien);
  background: var(--color-mat);
  color: var(--color-chu-3);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 31;
  transition: var(--muot);
}
.nut-thu-gon:hover { color: var(--color-hieu); border-color: var(--color-hieu); box-shadow: var(--shadow-md); }
.nut-thu-gon svg { width: 13px; height: 13px; transition: transform .22s ease; }
html.canh-gon .nut-thu-gon svg { transform: rotate(180deg); }
@media (max-width: 1023px) { .nut-thu-gon { display: none; } }

@media (min-width: 1024px) {
  html.canh-gon .canh { width: var(--canh-hep); }
  html.canh-gon .canh-dinh { justify-content: center; padding-inline: .75rem; }
  html.canh-gon .canh-dinh > div:last-child { display: none; }
  html.canh-gon .canh-nhom {
    height: 1px; padding: 0; margin: .75rem 1.25rem;
    background: var(--sidebar-vien); overflow: hidden; color: transparent;
  }
  html.canh-gon .canh-muc { justify-content: center; padding-inline: 0; }
  html.canh-gon .canh-muc span { display: none; }
  html.canh-gon .canh-chan { display: none; }
}

/* ============================================================ KPI / THẺ SỐ LIỆU
   Dùng ở đầu trang thống kê để nêu bật vài con số quan trọng trước khi vào
   bảng chi tiết. Đặt trên nền .the có sẵn (viền/bóng/bo góc/hoạt ảnh trồi lên
   dùng lại nguyên, không định nghĩa lại). */
.kpi-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.kpi-o { display: flex; align-items: center; gap: .875rem; padding: 1.125rem 1.25rem; }
.kpi-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-hieu) 12%, transparent);
  color: var(--color-hieu);
}
.kpi-icon svg { width: 21px; height: 21px; }
.kpi-icon.luc { background: var(--color-lam-nen); color: var(--color-lam); }
.kpi-icon.vang { background: var(--color-phep-nen); color: var(--color-phep); }
.kpi-icon.tim { background: var(--color-cong-tac-nen); color: var(--color-cong-tac); }
.kpi-chu { min-width: 0; }
.kpi-nhan { font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-chu-3); }
.kpi-tri {
  margin-top: .1875rem;
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
  color: var(--color-chu);
  font-variant-numeric: tabular-nums;
}
.kpi-phu { margin-top: .125rem; font-size: .6875rem; color: var(--color-chu-3); font-weight: 600; }

/* ============================================================ TIỆN ÍCH DÙNG CHUNG
   Thay cho style="..." lặp đi lặp lại ở nhiều trang (khoảng cách giữa các thẻ
   xếp chồng, ô nhập/chọn cỡ nhỏ gắn trong bảng — quản lý người dùng dùng nhiều
   nhất). Cố tình đặt cuối file: chỉ thêm lớp mới, không sửa định nghĩa gốc của
   .the/.o-nhap/.chon-nhap ở trên. */
.ngan-cach { display: flex; flex-direction: column; gap: 1.25rem; }
.the-hep { max-width: 34rem; }

.o-nhap.o-nho, .chon-nhap.chon-nho {
  min-height: 30px;
  padding: .3125rem .5rem;
  font-size: .75rem;
  border-radius: 9px;
}
.hang-nho { display: flex; gap: .375rem; }
.mt-nho { margin-top: .375rem; }

/* Ô "Vai trò & quyền" gộp trong bảng quản lý người dùng: chọn vai trò, tick
   quyền, lưu MỘT lần. Chọn Admin thì phần quyền lẻ tự ẩn (admin có sẵn toàn
   quyền) — xem doiVaiTroHienQuyen() trong app.js. */
.o-vai-tro-quyen { display: flex; flex-direction: column; gap: .375rem; margin-top: .375rem; min-width: 13rem; }
.o-nhom-quyen { display: flex; flex-direction: column; gap: .1875rem; }
.o-mot-quyen {
  display: flex; align-items: center; gap: .4375rem;
  font-size: .75rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.o-ghi-chu-admin {
  font-size: .6875rem; font-weight: 600; line-height: 1.45;
  color: var(--color-chu-3);
  padding: .375rem .5rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--color-cong-tac) 10%, transparent);
}
.an-quyen { display: none !important; }

/* Thanh công cụ ở đầu bảng tài khoản: ô tìm + các nút phụ. */
.nd-thanh-cong-cu { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.nd-o-tim { min-width: 17rem; flex: 1; }
.nd-o-tim .o-nhap { min-height: 38px; font-size: .8125rem; }
@media (max-width: 640px) { .nd-o-tim { min-width: 100%; } }