.man-giua { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.the-vao { width: 100%; max-width: 420px; gap: 14px; }
.o-nhap-nho { height: 48px; border: 1px solid var(--vien-2); border-radius: 12px; padding: 0 14px; font-size: 16px; color: var(--vang-nhat); background: var(--nen); width: 100%; }
textarea.o-nhap-nho { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
select.o-nhap-nho { appearance: auto; }
.loi-form { margin: 0; min-height: 1em; font-size: 14px; color: var(--hung-chu); }
.loi-form:empty { display: none; }

.vo { display: flex; min-height: 100vh; }
.thanh-ben { flex: 0 0 260px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px; background: rgba(6, 15, 22, 0.88); backdrop-filter: blur(8px); border-right: 1px solid var(--vien); }
.the-toi { border: 1px solid var(--vien); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.the-toi b { font-size: 15px; }
.menu-ben { display: flex; flex-direction: column; gap: 4px; }
.nut-ben { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; background: none; border: 1px solid transparent; color: var(--chu-2); font-size: 15px; font-weight: 500; text-align: left; width: 100%; }
.nut-ben:hover { background: rgba(217, 178, 95, .1); color: var(--chu); }
.nut-ben[aria-current="page"] { background: rgba(217, 178, 95, .16); border-color: var(--vang); color: var(--vang-nhat); }
.nut-ben svg { flex: 0 0 auto; }
.cuoi-ben { margin-top: auto; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--vien); padding-top: 12px; }
.noi-dung-chinh { flex: 1 1 auto; min-width: 0; padding: 28px 24px 56px; display: flex; flex-direction: column; gap: 20px; max-width: 1240px; }
.noi-dung-chinh:focus { outline: none; }
.dau-muc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cong-cu { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cong-cu .o-nhap-nho { width: auto; flex: 1 1 220px; }

.so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.so-lieu div { background: var(--panel); border: 1px solid var(--vien); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.so-lieu b { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--vang-nhat); }

.hop-bang { overflow-x: auto; border: 1px solid var(--vien); border-radius: 16px; background: var(--panel); backdrop-filter: blur(6px); }
.bang { width: 100%; border-collapse: collapse; font-size: 14px; }
.bang th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mo); padding: 12px 14px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang td { padding: 12px 14px; border-bottom: 1px solid rgba(42, 71, 87, .6); vertical-align: top; line-height: 1.5; }
.bang tr:last-child td { border-bottom: 0; }
.bang tbody tr:hover { background: rgba(217, 178, 95, .05); }
.bang .hd { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; }
.bang .trong { text-align: center; color: var(--mo); padding: 28px; }
.nut-bang { min-height: 36px; padding: 0 12px; border-radius: 999px; background: none; border: 1px solid var(--vien-2); color: var(--chu); font-size: 13px; font-weight: 500; }
.nut-bang:hover { border-color: var(--vang); color: var(--vang-nhat); }
.nut-bang.nguy:hover { border-color: var(--hung-vien); color: var(--hung); }
.the { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.the-vang { background: rgba(217, 178, 95, .15); color: var(--vang-sang); border: 1px solid var(--vang); }
.the-mo { background: rgba(166, 186, 198, .1); color: var(--mo-2); border: 1px solid var(--vien-2); }

.hop-thoai { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--vang); border-radius: 20px; background: #0A1822; color: var(--chu); }
.hop-thoai::backdrop { background: rgba(3, 8, 12, .7); backdrop-filter: blur(3px); }
.hop-thoai form { display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.dau-hop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--vien); }
.than-hop { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.hop-thoai .loi-form { padding: 0 22px; }
.chan-hop { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--vien); }
.nut-dong { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vien-2); background: none; color: var(--chu); display: flex; align-items: center; justify-content: center; }
.o-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; }
.o-chon label { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 6px 10px; border: 1px solid var(--vien); border-radius: 10px; font-size: 14px; cursor: pointer; }
.o-chon input { width: 18px; height: 18px; accent-color: var(--vang); }
.hop-thoai .la-ban { gap: 18px; }
.hop-thoai .mat-la-ban { width: min(240px, 100%); }

.chi-tiet { display: flex; flex-direction: column; gap: 12px; }
.dong-tt { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 14px; font-size: 14px; }
.dong-tt dt { color: var(--mo); }
.dong-tt dd { margin: 0; }
.ds-hop { display: flex; flex-direction: column; gap: 8px; }
.ds-hop .o { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.diem-tron { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; font-weight: 600; }

.ma-tran { width: 100%; border-collapse: collapse; font-size: 14px; }
.ma-tran th, .ma-tran td { padding: 10px 12px; border-bottom: 1px solid var(--vien); text-align: left; }
.ma-tran td.co { color: var(--cat-chu); font-weight: 600; }
.ma-tran td.khong { color: var(--mo); }

.thong-bao { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; pointer-events: none; }
.thong-bao div { background: #0E2230; border: 1px solid var(--vang); color: var(--vang-nhat); border-radius: 12px; padding: 12px 18px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: hien .3s ease-out both; }
.thong-bao div.loi { border-color: var(--hung-vien); color: var(--hung); }

@media (max-width: 900px) {
  .vo { flex-direction: column; }
  .thanh-ben { position: static; height: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--vien); padding: 14px 16px; gap: 12px; }
  .menu-ben { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .menu-ben .nut-ben { width: auto; white-space: nowrap; flex: 0 0 auto; }
  .cuoi-ben { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .cuoi-ben .nut-ben { width: auto; }
  .the-toi { display: none; }
  .noi-dung-chinh { padding: 20px 16px 48px; }
  .dong-tt { grid-template-columns: minmax(0, 1fr); }
  .dong-tt dt { margin-top: 6px; }
}