/* Trang chủ công khai. Chỉ nạp ở trang này, không nạp ở trang đăng nhập/quản trị. */

body { line-height: 1.6; }

/* --- Thanh đầu trang --- */

.dinh-tren {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 17, 23, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vien);
}

.dinh-tren .trong {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.hieu {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.3px;
  color: var(--chu);
  text-decoration: none;
  white-space: nowrap;
}

.hieu .dau {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #164e63, #0f766e);
  border: 1px solid #2c6b6b;
  color: var(--nhan);
}

.menu {
  display: flex;
  gap: 26px;
  margin-left: 12px;
  flex: 1;
}

.menu a {
  color: var(--chu-mo);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.menu a:hover { color: var(--chu); }

.nut-dau { display: flex; align-items: center; gap: 14px; white-space: nowrap; }

.lien-ket-nhat {
  color: var(--chu);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}

.lien-ket-nhat:hover { color: var(--nhan); }

/*
  Nút hỗ trợ Telegram trên đầu trang.

  Xanh Telegram nhạt trên nền tối: nhận ra ngay là kênh liên hệ, nhưng nhạt hơn
  nút chính để không tranh chỗ với việc khách đến đây để làm.
*/
.nut-tele {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(56, 161, 219, .45);
  border-radius: 8px;
  background: rgba(56, 161, 219, .12);
  color: #7cc4e8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.nut-tele:hover {
  border-color: rgba(56, 161, 219, .8);
  background: rgba(56, 161, 219, .2);
  color: #a8dcf5;
}

/* Màn hình hẹp: giữ biểu tượng, bỏ chữ - đầu trang không đủ chỗ cho cả hai. */
@media (max-width: 560px) {
  .nut-tele { padding: 7px 9px; }
  .nut-tele span { display: none; }
}

.tele-chan { font-weight: 600; }

/* --- Phần đầu (hero) --- */

/*
  Bảng thông báo dưới đầu trang.

  Màu hổ phách trên nền tối: đủ nổi để khách vừa vào là thấy, mà không đỏ như
  một lỗi hệ thống — đây là lời báo trước, không phải sự cố.
*/
.bang-thong-bao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 13px 24px;
  background: rgba(245, 158, 11, .12);
  border-bottom: 1px solid rgba(245, 158, 11, .3);
  color: #fcd34d;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
}

.bang-thong-bao svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .bang-thong-bao {
    align-items: flex-start;
    padding: 12px 16px;
    font-size: 13.5px;
    text-align: left;
  }
}

/*
  Bảng thứ hai: khách hệ thống cũ còn dư credit.

  Xanh lá thay vì hổ phách: đây là tin có lợi cho khách — tiền cũ vẫn còn — chứ
  không phải lời báo trước như bảng bảo trì. Hai màu khác nhau để người đọc
  không lướt qua cả hai vì tưởng là một.
*/
.bang-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  background: rgba(34, 197, 94, .1);
  border-bottom: 1px solid rgba(34, 197, 94, .28);
  color: #86efac;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
}

.bang-credit svg { flex: 0 0 auto; }

.bang-credit-nut {
  padding: 5px 12px;
  border: 1px solid rgba(34, 197, 94, .5);
  border-radius: 7px;
  color: #bbf7d0;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.bang-credit-nut:hover {
  background: rgba(34, 197, 94, .18);
  border-color: rgba(34, 197, 94, .85);
}

@media (max-width: 560px) {
  .bang-credit {
    padding: 12px 16px;
    font-size: 13.5px;
    text-align: left;
  }
}

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px 24px 130px;
}

/* Lưới mờ phía sau, dựng bằng CSS nên không tốn thêm request ảnh nào. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 2; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  pointer-events: none;
  z-index: 0;

  /*
    File video đã được mã hoá lại: phóng từ 500x500 lên 1080x1080 bằng lanczos,
    làm nét nhẹ, và nén nhẹ tay hơn. Nhờ vậy trình duyệt nhận đầu vào tốt hơn
    hẳn và không còn nhiều khối vuông của nén để phải che.

    Vì thế chỉ cần làm mờ 1px - vừa đủ xoá hạt còn sót, không làm mất nét.

    scale(1.06) để bù phần mép bị nhạt đi khi làm mờ.
  */
  filter: blur(1px) saturate(1.2) contrast(1.06);
  transform: scale(1.06);
}

/*
  Lớp phủ tối. Không có nó thì khung hình sáng của video sẽ nuốt mất chữ trắng
  và trang thành không đọc nổi ở đúng những cảnh chói nhất.
*/
.hero-phu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 17, 23, .62) 0%,
    rgba(11, 17, 23, .30) 42%,
    rgba(11, 17, 23, .96) 100%
  );
}

/* Có video rồi thì lưới kẻ phía sau phải nhạt bớt, không thì rối mắt. */
.hero.co-video::before { opacity: .35; }

/*
  Người bật chế độ giảm chuyển động trong hệ điều hành thường là do chóng mặt
  hoặc nhạy cảm với ánh sáng nhấp nháy. Tắt hẳn video cho họ.
*/
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(46px, 9vw, 104px);
  line-height: 1.02;
  letter-spacing: -3px;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 30%, #7d8fa3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /*
    Dùng drop-shadow chứ không phải text-shadow: chữ này tô bằng gradient cắt
    theo hình chữ (color: transparent), mà text-shadow vẽ phía sau nền trong
    suốt đó nên sẽ hiện thành vệt loang quanh nét chữ. drop-shadow đổ bóng
    theo đúng hình đã cắt.
  */
  filter: drop-shadow(0 3px 20px rgba(0, 0, 0, .72));
}

/*
  Video sáng hơn thì chữ phải tự bảo vệ mình. Đổ bóng vào chữ giữ được độ đọc
  mà không phải làm tối cả khung hình - tức là vẫn thấy rõ video.
*/
.hero .dan {
  margin: 0 auto;
  max-width: 680px;
  font-size: clamp(18px, 2.4vw, 25px);
  color: #c3cedb;
  letter-spacing: -.2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .6);
}

.hero .dan .noi-bat {
  background: linear-gradient(90deg, var(--nhan), #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Các khối nội dung --- */

.khoi { max-width: 1160px; margin: 0 auto; padding: 76px 24px; }

.khoi > h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -1px;
  text-align: center;
}

.khoi > .mo-ta {
  margin: 0 auto 44px;
  max-width: 620px;
  text-align: center;
  color: var(--chu-mo);
  font-size: 16px;
}

/* --- Lưới phương thức --- */

/*
  Ep dung 6 cot tren man hinh rong thay vi de auto-fit tu quyet: auto-fit tinh
  theo be rong toi thieu nen o kich thuoc man hinh thong thuong no chi xep vua
  5 the, cai thu 6 roi xuong hang duoi mot minh - nhin rat lech.
*/
.luoi-pt {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

@media (max-width: 1100px) { .luoi-pt { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .luoi-pt { grid-template-columns: repeat(2, 1fr); } }

/*
  Mỗi thẻ mang màu riêng qua biến --mau và --nen-mau, nên phần khai báo kiểu
  dáng chỉ viết một lần. Thêm phương thức mới chỉ cần thêm hai dòng màu.
*/
/* Cot hep hon truoc (6 thay vi 5) nen phai bot khoang dem va co chu cho vua. */
.the-pt {
  background: linear-gradient(165deg, var(--nen-mau), var(--nen-the) 62%);
  border: 1px solid var(--vien);
  border-radius: 14px;
  padding: 18px;
}

.the-pt .pt-dau {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--mau);
  color: #fff;
  margin-bottom: 14px;
}

.the-pt h3 { margin: 0 0 6px; font-size: 15.5px; letter-spacing: -.2px; }
.the-pt p { margin: 0; color: var(--chu-mo); font-size: 13px; }

.pt-the { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }

.pt-the span {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--nen-mau);
  border: 1px solid var(--nen-mau);
  color: var(--mau);
  white-space: nowrap;
}

.pt-anh   { --mau: #3b82f6; --nen-mau: rgba(59, 130, 246, .16); }
.pt-video { --mau: #a855f7; --nen-mau: rgba(168, 85, 247, .16); }
.pt-giong { --mau: #f59e0b; --nen-mau: rgba(245, 158, 11, .16); }
.pt-nhac  { --mau: #f43f5e; --nen-mau: rgba(244, 63, 94, .16); }
.pt-chat  { --mau: #10b981; --nen-mau: rgba(16, 185, 129, .16); }
.pt-code  { --mau: #6366f1; --nen-mau: rgba(99, 102, 241, .16); }

/* --- Dải phân cách có chữ --- */

.dai-phan {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 46px 0 22px;
  color: var(--chu-mo);
  font-size: 14px;
}

.dai-phan::before,
.dai-phan::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vien);
}

/* --- Hàng chuyển đổi định dạng --- */

.hang-doi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.chip-doi {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--vien);
  border-radius: 11px;
  background: var(--nen-the);
  font-size: 14px;
  color: var(--chu);
}

.chip-doi b { font-weight: 600; }
.chip-doi i { font-style: normal; color: var(--chu-mo); }

.chip-doi .m-anh   { color: #60a5fa; }
.chip-doi .m-video { color: #c084fc; }
.chip-doi .m-giong { color: #fbbf24; }
.chip-doi .m-chat  { color: #34d399; }
.chip-doi .m-code  { color: #818cf8; }

/* --- Hàng ô số --- */

.luoi-so {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.o-so {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}

.o-so .so-dau {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--chu-mo);
}

.o-so .so { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.o-so .ten { font-size: 13px; color: var(--chu-mo); margin-top: 4px; }

/* --- Chân trang --- */

.chan {
  border-top: 1px solid var(--vien);
  padding: 30px 24px;
  text-align: center;
  color: var(--chu-mo);
  font-size: 14px;
}

.chan a { margin: 0 10px; }

@media (max-width: 900px) {
  .menu { display: none; }
  .hero { padding: 72px 20px 80px; }
  .khoi { padding: 56px 20px; }
}