/* KeoTool — nền tối, ưu tiên điện thoại (khung 390px). Màu theo bàn giao V4 mục 1. */
:root {
  --nen: #0C1222;
  --the: #10192C;
  --the-2: #16223A;
  --vien: #202E48;
  --vien-cot: #2A3A58;
  --chu: #F5F8FC;
  --chu-nhat: #C9D3E3;
  --chu-phu: #96A8C4;
  --chu-mo: #687894;
  --lime: #C6F24A;
  --lime-sang: #E2FF8A;
  --vang: #E0B25A;
  --xanh: #3CD070;
  --do: #EB5656;
  --toi: #0A1020;
  --chu-thuong: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --chu-so: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--chu); font-family: var(--chu-thuong); font-size: 15px; line-height: 1.4; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .6; }
h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 20px; font-weight: 800; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
[hidden] { display: none !important; }

.khung { max-width: 480px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
@media (min-width: 520px) { .khung { border-left: 1px solid var(--vien); border-right: 1px solid var(--vien); } }
.dang-tai { padding: 40px 16px; color: var(--chu-phu); text-align: center; }
.bang-gio-thu { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 16px; background: var(--vang); color: var(--toi); font-size: 13px; }
.bang-gio-thu .nut-chu { color: var(--toi); text-decoration: underline; min-height: 32px; }
.bao-bi-da { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; background: var(--vang); color: var(--toi); font-size: 14px; line-height: 1.45; }
.bao-bi-da .nut-chu { flex: none; color: var(--toi); text-decoration: underline; font-weight: 700; }

/* đầu trang */
.dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 5; background: var(--nen); }
.nut-theo-doi { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; margin-left: auto; border-radius: 10px; border: 1px solid var(--vang); color: var(--chu); font-weight: 700; font-size: 13px; white-space: nowrap; }
.nut-theo-doi:hover { background: rgba(224, 178, 90, 0.12); }
/* Điện thoại: logo + gói Full ở hàng trên, nút "Trận đang theo dõi" thành hàng dưới. */
@media (max-width: 440px) {
  .nut-theo-doi { order: 3; flex: 1 0 100%; margin-left: 0; min-height: 44px; }
  .dau .huy-hieu { margin-left: auto; }
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; min-height: 44px; display: inline-flex; align-items: center; }
.nut-mo-full { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--lime); color: var(--toi); font-weight: 800; font-size: 14px; }
.nut-mo-full:hover { background: var(--lime-sang); }
.nut-dang-nhap { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--chu); font-weight: 700; font-size: 14px; }
.nut-dang-nhap:hover { color: var(--lime); }
.huy-hieu { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lime); color: var(--lime); font-weight: 800; font-size: 13px; white-space: nowrap; }
.huy-hieu.nho { height: 22px; padding: 0 8px; font-size: 11px; font-weight: 700; }

/* khung nội dung */
.noi-dung { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1 0 auto; }
.quay-lai { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--chu-phu); align-self: flex-start; }
.quay-lai:hover { color: var(--chu); }

/* chữ */
.lime { color: var(--lime); }
.vang { color: var(--vang); }
.xanh { color: var(--xanh); }
.do { color: var(--do); }
.trung { color: var(--chu-nhat); }
.trang { color: var(--chu); }
.nhat { color: var(--chu-nhat); }
.phu { color: var(--chu-phu); }
.phu-10 { font-size: 10px; color: var(--chu-phu); }
.phu-11 { font-size: 11px; color: var(--chu-phu); }
.phu-12 { font-size: 12px; color: var(--chu-phu); }
.nho { font-size: 12px; }
.nho-12 { font-size: 12px; }
.nho-13 { font-size: 13px; }
.nho-14 { font-size: 14px; }
.nho-15 { font-size: 15px; }
.chu-16 { font-size: 16px; }
.chu-18 { font-size: 18px; }
.chu-20 { font-size: 20px; }
.chu-28 { font-size: 28px; }
.dam { font-weight: 700; }
.dam-vua { font-weight: 600; }
.so { font-family: var(--chu-so); }
.so-lon { font-size: 20px; font-weight: 700; }
.gia-lon { font-size: 40px; font-weight: 700; line-height: 1; }
.dong-cao { line-height: 1.55; }
.khong-xuong { white-space: nowrap; }
.giua-chu { text-align: center; display: block; }
.mo { filter: blur(6px); user-select: none; }
.mo-nhe { filter: blur(4px); user-select: none; }
.ten-tran { font-size: 14px; font-weight: 600; }

.nhan-muc { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chu-phu); font-weight: 700; }
/* tiêu đề mục chính (trang chủ, trang đăng nhập): to, trắng, vạch lime bên trái */
.dau-muc { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.dau-muc:first-child, .quay-lai + .dau-muc { padding-top: 0; }
.tieu-de-muc { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--chu); }
.tieu-de-muc::before { content: ''; flex: none; align-self: stretch; width: 4px; min-height: 22px; border-radius: 2px; background: var(--lime); }
.dau-muc > .phu-12 { padding-left: 14px; font-size: 13px; }
.tren-4 { padding-top: 4px; }
.tren-6 { padding-top: 6px; }
.tren-8 { padding-top: 8px; }

/* bố cục */
.hang { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hang-trai { display: flex; align-items: center; gap: 8px; }
.boc { flex-wrap: wrap; }
.canh-tren { align-items: flex-start; }
.canh-tren .icon { flex: none; margin-top: 2px; }
.canh-day { align-items: baseline; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.cot-2, .cot-4, .cot-6, .cot-8, .cot-10, .cot-12, .cot-14, .cot-16 { display: flex; flex-direction: column; }
.cot-2 { gap: 2px; } .cot-4 { gap: 4px; } .cot-6 { gap: 6px; } .cot-8 { gap: 8px; }
.cot-10 { gap: 10px; } .cot-12 { gap: 12px; } .cot-14 { gap: 14px; } .cot-16 { gap: 16px; }
.cot-phai { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.trai { text-align: left; }
.luoi-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ke { height: 1px; background: var(--vien); }
.dong-28 { min-height: 28px; }

/* thẻ */
.the { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.the-lon { border-radius: 16px; padding: 16px; gap: 14px; }
.the.vien-lime, .o-chon.vien-lime { border-color: var(--lime); }
.the.net-dut { border-style: dashed; }
.the-link:hover { border-color: #33476B; }
.the-bo { cursor: pointer; }
.the-bo:hover { border-color: #33476B; }
/* xem thử khúc của gói Full: mã bộ che, thẻ hạng 4–10 làm mờ */
.ma-che { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--the-2); border: 1px dashed var(--chu-mo); color: var(--chu-phu); font-family: var(--chu-so); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; }
.the-mo { opacity: 0.85; }
.the-mo .mo { filter: blur(5px); }
.cot-gia-hang { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.cot-gia-hang > span { flex: 1 1 0; background: var(--chu-mo); border-radius: 1px; }
.cot-gia-hang.cao { height: 48px; gap: 1px; }
.nut-nho.lime { color: var(--lime); border-color: var(--lime); }
.nhan-theo-doi { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--vang); color: var(--vang); font-size: 11px; font-weight: 700; white-space: nowrap; }
.the-ngang { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.dau-the { align-items: flex-start; }
.cho-cuon-toi { scroll-margin-top: 140px; } /* chừa chỗ cho đầu trang dính phía trên */
.loi-the { border-color: var(--do); color: var(--chu); }
.cham { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.xanh-nen { background: var(--xanh); }
.do-nen { background: var(--do); }
.xam-nen { background: var(--chu-mo); }

.o-so { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-chon { background: var(--nen); border: 1px solid var(--vien); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.5; }

/* nút */
.tab-luoi { display: grid; gap: 6px; }
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--vien); background: transparent; color: var(--chu-phu); font-weight: 600; font-size: 13px; text-align: center; line-height: 1.2; }
.tab.khoa { gap: 3px; white-space: nowrap; }
.tab:hover { color: var(--chu); border-color: #33476B; }
.tab.bat { border-color: var(--lime); background: var(--lime); color: var(--toi); font-weight: 800; }
.tab-nho { min-height: 36px; padding: 0 12px; }
.tab.khoa .icon { flex: none; }

.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 12px; border: 0; background: var(--lime); color: var(--toi); font-weight: 800; font-size: 16px; text-align: center; }
.nut:hover { background: var(--lime-sang); }
.nut-vien { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; border: 1px solid var(--lime); background: transparent; color: var(--lime); font-weight: 700; font-size: 14px; text-align: center; }
.nut-vien:hover { background: rgba(198, 242, 74, 0.08); }
.nut.to, .nut-vien.to { min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.nut-vien-xam { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; border: 1px solid var(--vien); background: transparent; color: var(--lime); font-weight: 700; font-size: 14px; }
a.nut-vien-xam { color: var(--chu); }
.nut-nho { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vien); font-weight: 700; font-size: 13px; white-space: nowrap; }
.nut-chu { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--chu-phu); font-weight: 600; font-size: 14px; }
.nut-chu:hover:not(:disabled) { color: var(--chu); }
.nut-chu.giua { align-self: center; }
.nut-i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 36px; border: 0; background: transparent; padding: 0; }
.nut-ma { min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--vien); background: transparent; font-family: var(--chu-so); font-weight: 700; font-size: 12px; }
.nut-xoa { flex: none; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--vien); background: transparent; color: var(--chu-phu); font-weight: 600; font-size: 13px; }

/* ô nhập */
.truong { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--chu-nhat); }
.o-nhap { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--vien); background: var(--nen); color: var(--chu); font-weight: 500; font-size: 16px; }
.o-nhap::placeholder { color: var(--chu-mo); }
.o-nhap:focus { outline: 2px solid var(--lime); outline-offset: 0; border-color: transparent; }
.o-ma { min-height: 56px; font-family: var(--chu-so); font-size: 24px; font-weight: 700; letter-spacing: 0.5em; text-align: center; }
.boc-tim { position: relative; flex: 1 1 auto; }
.boc-tim .icon { position: absolute; left: 14px; top: 15px; pointer-events: none; }
.o-tim { background: var(--the); padding-left: 42px; }
.loi { color: var(--do); font-size: 13px; line-height: 1.5; }
.thong-bao-thu { background: rgba(224, 178, 90, 0.12); border: 1px dashed var(--vang); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.5; color: var(--chu); }
.thong-bao-thu b { color: var(--vang); letter-spacing: 0.15em; }
.xong { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 8px 0; }
.vong-xanh { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--xanh); }

/* nhãn */
.nhan-duong { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.nhan-duong.vang { background: var(--vang); color: var(--toi); }
.nhan-duong.xam { border: 1px solid var(--chu-phu); color: var(--chu-nhat); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-dk { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px; border-radius: 8px; background: var(--the-2); border: 1px solid var(--vien); font-size: 13px; line-height: 1.4; }
.chip-dk.nho { min-height: 28px; padding: 2px 8px; font-size: 12px; }
.chip-dk .che { color: var(--chu-mo); letter-spacing: -1px; }
.chip-ket-qua { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px; border-radius: 8px; background: var(--the-2); border: 1px solid var(--vien); font-size: 12px; }
.nut-ngay { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.chip-ngay { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 8px; border-radius: 8px; background: var(--the-2); border: 1px solid var(--vien); font-size: 12px; }
.chip-bo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: var(--the); border: 1px solid var(--vang); font-weight: 700; font-size: 13px; }

/* công thức đã che */
.the.cong-thuc { padding: 6px 16px; }
.cong-thuc.nho { display: flex; flex-direction: column; gap: 8px; }
.nut-mo-cong-thuc { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.cot-chu { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.dau-lon { font-size: 22px; font-weight: 700; }
.nut-cong-thuc { display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--vien); background: var(--nen); color: var(--chu-nhat); font-weight: 600; font-size: 13px; }
.the.cong-thuc > .chips, .the.cong-thuc > .phu-12 { padding-bottom: 8px; }

/* biểu đồ cột từng tuần: lãi lên xanh, lỗ xuống đỏ */
.bieu-do { display: flex; align-items: stretch; }
.cot { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 0; padding: 0; background: transparent; }
.cot.vach::before { content: ''; position: absolute; left: -2px; top: -2px; bottom: -2px; border-left: 1px dashed var(--chu-phu); }
.cot.chon { outline: 2px solid var(--chu); outline-offset: 1px; border-radius: 2px; }
.nua-tren { display: flex; align-items: flex-end; border-bottom: 1px solid var(--vien-cot); }
.nua-duoi { display: flex; align-items: flex-start; }
.thanh { display: block; width: 100%; }
.nua-tren .thanh { border-radius: 2px 2px 0 0; }
.nua-duoi .thanh { border-radius: 0 0 2px 2px; }
.so-tren-cot { display: flex; }
.so-tren-cot > span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
.chu-giai-mau { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--chu-phu); }
.mau-o { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 4px; }

/* lãi cộng dồn */
.cong-don { display: flex; align-items: stretch; height: 90px; }
.cot-cd { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.cd-tren { display: flex; align-items: flex-end; border-bottom: 1px solid var(--vien-cot); }
.cd-duoi { display: flex; align-items: flex-start; }
.cd-lai { display: block; width: 100%; background: rgba(198, 242, 74, 0.55); }
.cd-lo { display: block; width: 100%; background: rgba(235, 86, 86, 0.6); }

/* danh sách tuần, trận */
.danh-tuan { padding: 4px 16px; gap: 0; }
.dong-tuan { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; margin: 0 -8px; width: calc(100% + 16px); border: 0; border-bottom: 1px solid var(--vien); background: transparent; border-radius: 8px; text-align: left; }
.dong-tuan:last-child { border-bottom: 0; }
.dong-tuan.cao { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.dong-tuan.chon { background: var(--the-2); }
.dong-tuan:hover { background: var(--the-2); }
.hop-tran { gap: 4px; }
.hop-tran > .hang:first-child { padding-bottom: 4px; }
.dong-tran { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--vien); }
.hop-tran > .hang:first-child + .dong-tran { border-top: 0; }
.hop-tran .nut-vien-xam { margin-top: 4px; }

/* danh sách trận gọn (theo kiểu hình nhận định): giờ đá to bên trái, vạch dọc, lựa chọn xanh lá, tên đội nhỏ bên dưới */
.the.danh-gon { padding: 2px 14px; gap: 0; }
.danh-gon.trong { padding: 0; }
.dong-gon { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--vien); color: inherit; }
.dong-gon:first-child { border-top: 0; }
.danh-gon.trong .dong-gon:first-child { border-top: 1px solid var(--vien); }
a.dong-gon:hover .chon-gon b { text-decoration: underline; }
/* dòng trận là chữ thường (chép được tên đội); chỉ "Bộ B1766" là link, vùng bấm cao hơn chữ */
.link-bo { display: inline-block; padding: 8px 0; margin: -8px 0; color: var(--lime); font-weight: 700; font-size: 12px; }
.link-bo:hover { text-decoration: underline; }
.gio-gon { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--vien); padding-right: 6px; }
.gio-lon { font-size: 15px; line-height: 1.2; }
.noi-gon { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chon-gon { min-width: 0; font-size: 15px; }
.danh-gon.trong-lich-su .dong-gon:first-child { border-top: 0; }
.danh-gon.trong-lich-su { border-top: 1px solid var(--vien); }
.ngay-gon { padding-top: 8px; }
.nut-nhay { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lime); background: transparent; color: var(--lime); font-weight: 700; font-size: 13px; white-space: nowrap; }
.nut-nhay::after { content: ''; position: absolute; inset: -4px 0; } /* vùng bấm đủ 44px dù nút nhìn gọn */
.nut-nhay:hover { background: rgba(198, 242, 74, 0.1); }
.tuan-mo { padding: 4px 0 12px; border-bottom: 1px solid var(--vien); }
.hang-nut { display: flex; gap: 8px; }
.hang-nut > * { flex: 1 1 0; }

/* bảng xếp hạng dạng bảng */
.bang-cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: 14px; background: var(--the); -webkit-overflow-scrolling: touch; }
.bang { border-collapse: collapse; font-size: 13px; }
.bang th { text-align: right; padding: 10px 12px; color: var(--chu-phu); font-weight: 700; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang .trai { text-align: left; }
.bang .dinh { position: sticky; left: 0; background: var(--the); text-align: left; z-index: 1; }
.bang td.dinh a { display: inline-block; min-height: 24px; }
.bang td.o-cot { padding: 6px 12px; }
.bang tr:last-child td { border-bottom: 0; }
.bang tbody tr { cursor: pointer; }
.bang tbody tr:hover td { background: #142038; }

/* trang Mở Full */
.the-gia { padding: 18px 16px; border-radius: 16px; }
.bang-ss { border: 1px solid var(--vien); border-radius: 14px; background: var(--the); overflow: hidden; }
.dong-ss { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; font-size: 13px; line-height: 1.4; padding: 10px 12px; border-top: 1px solid var(--vien); }
.dau-ss { border-top: 0; font-size: 12px; font-weight: 700; color: var(--chu-phu); }
.the-buoc { border: 1px solid var(--vien); border-radius: 14px; background: var(--the); padding: 6px 16px; }
.buoc { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--vien); }
.buoc:first-child { border-top: 0; }
.so-buoc { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--vien); color: var(--lime); font-weight: 800; font-size: 14px; }
.the-canh-bao { display: flex; gap: 10px; align-items: flex-start; background: var(--the); border: 1px solid var(--vang); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.the-canh-bao .icon { flex: none; margin-top: 1px; }

/* nút lên đầu trang: góc dưới bên phải, nằm trong khung 480px khi xem trên máy tính */
.len-dau { position: fixed; z-index: 10; bottom: calc(16px + env(safe-area-inset-bottom)); right: max(16px, calc((100vw - 480px) / 2 + 16px)); width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--lime); background: rgba(16, 25, 44, 0.94); color: var(--lime); display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.len-dau:hover { background: var(--lime); color: var(--toi); }

/* trang quản trị: rộng hơn trên máy tính, điện thoại vẫn một cột */
.khung.rong { max-width: 760px; }
button.nut-nho { background: transparent; color: var(--chu); }
button.nut-nho.lime { color: var(--lime); }
.nut-quan-tri { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px dashed var(--chu-mo); color: var(--chu-nhat); font-weight: 700; font-size: 13px; }
.nut-quan-tri:hover { color: var(--chu); border-color: var(--chu-phu); }
.qt-tab { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) { .qt-o { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qt-o .so-lon { font-size: 18px; overflow-wrap: anywhere; }
.qt-email { overflow-wrap: anywhere; min-width: 0; }
.huy-hieu.vang { border-color: var(--vang); color: var(--vang); }
.huy-hieu.do { border-color: var(--do); color: var(--do); }
.huy-hieu.xam { border-color: var(--chu-mo); color: var(--chu-phu); }
.qt-cot { display: flex; align-items: stretch; gap: 2px; height: 96px; border-bottom: 1px solid var(--vien-cot); }
.qt-cot-o { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: transparent; border-radius: 2px 2px 0 0; }
.qt-cot-o:hover { background: var(--the-2); }
.qt-cot-o > span { display: block; width: 100%; background: var(--lime); opacity: 0.55; border-radius: 2px 2px 0 0; }
.qt-cot-o.chon > span { opacity: 1; }
.qt-cot-o.chon { background: var(--the-2); }
.qt-truc { display: flex; justify-content: space-between; font-size: 11px; color: var(--chu-phu); }
.qt-ngang { display: flex; flex-direction: column; gap: 4px; }
a.qt-ngang:hover .dam-vua { color: var(--lime); }
.qt-thanh { height: 6px; border-radius: 3px; background: var(--the-2); overflow: hidden; }
.qt-thanh > span { display: block; height: 100%; background: var(--lime); border-radius: 3px; }
.qt-dong { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--vien); overflow-wrap: anywhere; }
.qt-dong:first-child, .nhan-muc + .qt-dong { border-top: 0; }
.qt-da-huy > .hang { text-decoration: line-through; opacity: 0.6; }
.qt-panel { border: 1px solid var(--lime); border-radius: 14px; padding: 14px; background: var(--the-2); display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.qt-goi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qt-goi .tab { min-height: 52px; padding: 4px; }
.qt-gia { font-size: 11px; font-weight: 600; opacity: 0.8; }
.qt-nut-bat { font-size: 15px; padding: 8px 12px; line-height: 1.3; overflow-wrap: anywhere; }
.qt-chi-tiet summary { cursor: pointer; min-height: 32px; line-height: 32px; }
.qt-ua { font-family: var(--chu-so); font-size: 11px; color: var(--chu-mo); overflow-wrap: anywhere; line-height: 1.5; }
.qt-chon { min-height: 40px; width: auto; padding: 0 8px; font-size: 13px; }
select.o-nhap { font: inherit; font-size: 13px; color: var(--chu); }
textarea.o-nhap { min-height: 80px; padding: 10px 14px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.5; }
.qt-them { width: 100%; }
.qt-hoi-lai { border-color: var(--vang) !important; color: var(--vang) !important; }
button.nut-nho.qt-nut-do { border-color: var(--do); color: var(--do); }
.qt-nut-nho { min-height: 36px; padding: 0; font-size: 13px; }
.gach { text-decoration: underline; }

/* trang Tài khoản */
.nut-tai-khoan { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--chu); }
.nut-tai-khoan:hover { color: var(--lime); }
a.huy-hieu:hover { background: rgba(198, 242, 74, 0.1); }
a.the-bam { color: inherit; }
a.the-bam:hover { border-color: var(--chu-mo); }
.gian { flex: 1 1 auto; min-width: 0; }
.chu-dai { min-width: 0; overflow-wrap: anywhere; }
.tk-email { min-width: 0; overflow-wrap: anywhere; }
.tk-may { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--vien); }
.tk-may:first-child { border-top: 0; padding-top: 0; }
.tk-may:last-child { padding-bottom: 0; }
.tk-gd { overflow-wrap: anywhere; }
.chon-het { user-select: all; font-family: var(--chu-so); color: var(--vang); overflow-wrap: anywhere; }
.hoi-lai { border-color: var(--vang) !important; color: var(--vang) !important; }

/* chân trang */
.chan { margin: 0 16px; padding: 24px 0 32px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--vien); }
.hoi-dap { display: flex; flex-direction: column; border: 1px solid var(--vien); border-radius: 14px; background: var(--the); }
.hoi-dap-dong + .hoi-dap-dong { border-top: 1px solid var(--vien); }
.hoi-dap-nut { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; background: transparent; font-weight: 600; font-size: 15px; text-align: left; }
.dau-mo { font-size: 20px; font-weight: 700; }
.hoi-dap-tra-loi { margin: 0; padding: 0 16px 14px; font-size: 14px; line-height: 1.6; color: var(--chu-nhat); }
.chan .hang { font-size: 13px; padding-top: 8px; }
.chan .hang.nho { padding-top: 0; }
.chan a, .chan .nut-chu { min-height: 44px; display: inline-flex; align-items: center; }