/* ==========================================================================
   MintGames — toàn bộ giao diện nằm trong một tệp này.

   MUỐN ĐỔI MÀU THÌ SỬA NGAY KHỐI DƯỚI ĐÂY, không cần đụng chỗ nào khác.
   Sửa xong bấm lưu rồi tải lại trang là thấy đổi liền.
   ========================================================================== */

:root {
  /* --- Màu chính --- */
  --mau-nen:         #f3f2f2;  /* nền cả trang */
  --mau-the:         #ffffff;  /* nền thẻ game và các khung trắng */
  --mau-chu:         #201e1d;  /* màu chữ, cũng là màu viền đen */
  --mau-nhan:        #ec3013;  /* màu đỏ của nút bấm chính */
  --mau-nhan-dam:    #dd2b0f;  /* màu đỏ khi rê chuột lên nút */
  --mau-bac-ha:      #2fd6a3;  /* xanh bạc hà — màu thương hiệu */
  --mau-bac-ha-nhat: #7ff0c8;

  /* --- Màu phụ: dùng cho ảnh bìa tạm và các khối trang trí --- */
  --mau-vang:        #ffd23f;
  --mau-troi:        #4cc9f0;
  --mau-cam:         #ff7a5c;
  --mau-tim:         #a78bfa;
  --mau-la:          #b7e04a;

  /* --- Màu nhạt --- */
  --mau-nen-nhat:    #f8f4f4;  /* nền ô nhập, ô thả tệp */
  --mau-hong-nhat:   #ffe0d9;  /* nền khi rê chuột lên nút trắng */
  --mau-chu-nhat:    #605d5d;  /* chữ phụ */
  --mau-chu-mo:      #9b9797;
  --mau-vien-nhat:   #d7d3d3;

  /* --- Đường nét --- */
  --vien:      3px;   /* độ dày viền đen thường */
  --vien-day:  4px;   /* độ dày viền đen của thẻ game */
  --bo-goc:    0px;   /* đổi thành 16px nếu thích bo tròn */

  /* --- Chữ --- */
  --chu-to:     'Handjet', 'Chakra Petch', ui-monospace, monospace;  /* tiêu đề, nút */
  --chu-thuong: 'Chakra Petch', 'Archivo', system-ui, sans-serif;    /* chữ để đọc */
}

/* ========================================================================== */

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--mau-nen);
  color: var(--mau-chu);
  font-family: var(--chu-thuong);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3 {
  font-family: var(--chu-to);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 12px;
}
h1 { font-size: clamp(30px, 6vw, 46px); }
h2 { font-size: 28px; }
h3 { font-size: 21px; }

p { margin: 0 0 12px; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 3px solid var(--mau-nhan); outline-offset: 2px; }
::selection { background: var(--mau-bac-ha); }

.giua { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.mo   { color: var(--mau-chu-nhat); }
.nho  { font-size: 13px; }
.mono { font-family: var(--chu-to); font-weight: 700; letter-spacing: .5px; }
.an   { display: none !important; }

/* ===== Thanh trên cùng =================================================== */

.thanh-tren {
  position: sticky; top: 0; z-index: 50;
  background: var(--mau-nen);
  border-bottom: var(--vien-day) solid var(--mau-chu);
}
.thanh-tren .giua {
  display: flex; align-items: center; gap: 12px;
  padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; color: inherit; }
.logo:hover { text-decoration: none; }
.logo-vuong {
  width: 34px; height: 34px; flex: 0 0 auto;
  background: var(--mau-bac-ha);
  border: var(--vien) solid var(--mau-chu);
  box-shadow: 3px 3px 0 var(--mau-chu);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.logo-vuong i:nth-child(1), .logo-vuong i:nth-child(4) { background: var(--mau-chu); }
.logo-ten { font-family: var(--chu-to); font-weight: 700; font-size: 26px; line-height: 1; }

.menu { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.menu a { color: inherit; }
.menu a:hover { text-decoration: none; }

/* ===== Nút =============================================================== */

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 14px;
  border: var(--vien) solid var(--mau-chu);
  border-radius: var(--bo-goc);
  background: var(--mau-the); color: var(--mau-chu);
  font-family: var(--chu-thuong); font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--mau-chu);
  transition: transform .08s steps(2), box-shadow .08s steps(2), background .1s;
}
.nut:hover { background: var(--mau-hong-nhat); text-decoration: none; }
.nut:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mau-chu); }
.nut:disabled { opacity: .5; cursor: not-allowed; }

.nut-do   { background: var(--mau-nhan); color: #fff; }
.nut-do:hover { background: var(--mau-nhan-dam); }
.nut-mint { background: var(--mau-bac-ha); }
.nut-mint:hover { background: var(--mau-bac-ha-nhat); }
.nut-den  { background: var(--mau-chu); color: var(--mau-nen); }
.nut-den:hover { background: var(--mau-nhan); color: #fff; }

.nut-to {
  height: 54px; padding: 0 22px; font-size: 17px;
  font-family: var(--chu-to); letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--mau-chu);
}
.nut-to:active { transform: translate(5px, 5px); }
.nut-nho {
  height: 34px; padding: 0 10px; font-size: 13px;
  border-width: 2px; box-shadow: 2px 2px 0 var(--mau-chu);
}
.nut-nho:active { transform: translate(2px, 2px); }
.nut-rong { width: 100%; }

/* ===== Khối đỏ trên trang chủ ============================================ */

.khoi-do {
  background: var(--mau-nhan); color: #fff;
  border-bottom: var(--vien-day) solid var(--mau-chu);
}
.khoi-do .giua {
  padding-top: 36px; padding-bottom: 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px; align-items: center;
}
.khoi-do h1 { text-shadow: 4px 4px 0 var(--mau-chu); margin-bottom: 16px; }
.khoi-do p { font-size: 18px; max-width: 40ch; margin-bottom: 22px; }
.khoi-do-nhan {
  font-family: var(--chu-to); font-weight: 700;
  font-size: 18px; letter-spacing: 1px; margin-bottom: 14px;
}
.khoi-do-nut { display: flex; gap: 10px; flex-wrap: wrap; }

.o-vuong-bay {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  max-width: 400px; width: 100%; justify-self: end;
}
.o-vuong-bay i {
  aspect-ratio: 1; border: var(--vien) solid var(--mau-chu);
  animation: nhun 2.6s ease-in-out infinite;
}
@keyframes nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nhay { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .o-vuong-bay i, .nhay { animation: none; }
}

/* ===== Tiêu đề một mục =================================================== */

.tieu-de-muc {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: var(--vien-day) solid var(--mau-chu);
  padding-bottom: 10px; margin: 28px 0 20px;
}
.tieu-de-muc h2 { margin: 0; }

/* ===== Lưới thẻ game ===================================================== */

.luoi-game {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px; align-items: start;
}
.the-game {
  display: flex; flex-direction: column; color: inherit;
  border: var(--vien-day) solid var(--mau-chu);
  border-radius: var(--bo-goc);
  background: var(--mau-the);
  box-shadow: 6px 6px 0 var(--mau-chu);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.the-game:hover {
  text-decoration: none;
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--mau-chu);
}
.anh-bia {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-bottom: var(--vien-day) solid var(--mau-chu);
}
.anh-bia img { width: 100%; height: 100%; object-fit: cover; }
.anh-bia .caro {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(32,30,29,.10) 25%, transparent 25%, transparent 75%, rgba(32,30,29,.10) 75%),
    linear-gradient(45deg, rgba(32,30,29,.10) 25%, transparent 25%, transparent 75%, rgba(32,30,29,.10) 75%);
  background-size: 28px 28px; background-position: 0 0, 14px 14px;
}
.anh-bia .chu-cai {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--chu-to); font-weight: 700; font-size: 76px; color: var(--mau-chu);
}
.nhan-choi {
  position: absolute; bottom: 8px; right: 8px;
  background: var(--mau-nen); border: var(--vien) solid var(--mau-chu);
  font-family: var(--chu-to); font-weight: 700; letter-spacing: .5px;
  font-size: 13px; padding: 4px 7px;
}
.nhan-goc {
  position: absolute; top: 8px; left: 8px;
  background: var(--mau-chu); color: #fff;
  font-family: var(--chu-to); font-weight: 700; letter-spacing: .5px;
  font-size: 12px; padding: 4px 7px;
}
.than-the { padding: 12px 12px 14px; }
.ten-game {
  font-family: var(--chu-to); font-weight: 700;
  font-size: 21px; line-height: 1.25; margin-bottom: 8px;
}
.dong-ky-luc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13px; font-weight: 600; color: var(--mau-chu-nhat);
  min-height: 2.6em;
}

/* ===== Khung có viền (dùng khắp nơi) ===================================== */

.khung {
  border: var(--vien-day) solid var(--mau-chu);
  border-radius: var(--bo-goc);
  background: var(--mau-the);
  box-shadow: 8px 8px 0 var(--mau-chu);
}
.khung-dau {
  border-bottom: var(--vien-day) solid var(--mau-chu);
  padding: 14px 18px;
  font-family: var(--chu-to); font-weight: 700; letter-spacing: .5px;
  font-size: 22px; text-transform: uppercase;
  background: var(--mau-bac-ha);
}
.khung-dau.vang { background: var(--mau-vang); }
.khung-dau.troi { background: var(--mau-troi); }
.khung-than { padding: 20px; display: grid; gap: 16px; }

.cot-doi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px; align-items: start;
}

/* ===== Ô nhập ============================================================ */

.nhan-o { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.o-nhap {
  width: 100%; height: 46px; padding: 0 12px;
  border: var(--vien) solid var(--mau-chu); border-radius: var(--bo-goc);
  background: var(--mau-nen-nhat); color: var(--mau-chu);
  font-family: var(--chu-thuong); font-size: 16px;
}
textarea.o-nhap { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
select.o-nhap { padding: 0 8px; }
.o-nhap:focus { background: #fff; }
.hang-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ===== Bảng ============================================================== */

.bang { width: 100%; border-collapse: collapse; font-size: 15px; }
.bang th {
  text-align: left; padding: 10px 12px;
  border-bottom: var(--vien) solid var(--mau-chu);
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  background: var(--mau-nen-nhat);
}
.bang td { padding: 10px 12px; border-bottom: 2px solid var(--mau-vien-nhat); }
.bang tr.toi { background: var(--mau-bac-ha); }
.bang tr.toi td { font-weight: 700; }
.bang .phai { text-align: right; }
.cuon-ngang { overflow-x: auto; }
.hang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border: 2px solid var(--mau-chu); background: var(--mau-the);
  font-family: var(--chu-to); font-weight: 700; font-size: 16px;
}
.hang.h1 { background: var(--mau-vang); }
.hang.h2 { background: var(--mau-vien-nhat); }
.hang.h3 { background: var(--mau-cam); }

/* ===== Thẻ số (trang quản trị) =========================================== */

.luoi-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.the-so {
  border: var(--vien-day) solid var(--mau-chu); padding: 16px;
  box-shadow: 5px 5px 0 var(--mau-chu); background: var(--mau-the);
}
.the-so b {
  display: block; font-family: var(--chu-to); font-weight: 700;
  font-size: 40px; line-height: 1; margin-bottom: 8px;
}
.the-so span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* ===== Ô thả tệp ========================================================= */

.o-tha {
  border: var(--vien-day) dashed var(--mau-chu);
  background: var(--mau-nen-nhat);
  padding: 44px 20px; text-align: center; cursor: pointer;
}
.o-tha:hover, .o-tha.dang-keo { background: var(--mau-hong-nhat); }
.o-tha .hop { font-size: 42px; line-height: 1; margin-bottom: 12px; }
.o-tha .to {
  font-family: var(--chu-to); font-weight: 700; letter-spacing: .5px;
  font-size: 20px; text-transform: uppercase; margin-bottom: 6px;
}

.thanh-tien-do {
  height: 22px; border: var(--vien) solid var(--mau-chu);
  padding: 3px; background: var(--mau-the);
}
.thanh-tien-do i {
  display: block; height: 100%; width: 0;
  background: var(--mau-bac-ha); transition: width .2s steps(6);
}

/* ===== Thông báo ========================================================= */

.bao {
  border: var(--vien) solid var(--mau-chu); padding: 12px 14px;
  font-weight: 600; background: var(--mau-bac-ha);
}
.bao.loi { background: var(--mau-hong-nhat); border-color: var(--mau-nhan); color: #ae1800; }
.bao.vang { background: var(--mau-vang); }

.rong {
  border: var(--vien-day) dashed var(--mau-chu);
  padding: 48px 20px; text-align: center;
}
.rong .to {
  font-family: var(--chu-to); font-weight: 700; letter-spacing: .5px;
  font-size: 26px; text-transform: uppercase; margin-bottom: 10px;
}

/* ===== Trang chơi ======================================================== */

.khu-choi {
  border: var(--vien-day) solid var(--mau-chu);
  background: var(--mau-chu);
  box-shadow: 8px 8px 0 var(--mau-chu);
  margin-bottom: 26px;
}
.khu-choi-dau {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: var(--vien-day) solid var(--mau-nen);
  color: var(--mau-nen);
}
.khu-choi-dau .ten {
  font-family: var(--chu-to); font-weight: 700; font-size: 20px; color: var(--mau-bac-ha);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.khu-choi-dau .nut { height: 38px; box-shadow: none; }
.khung-game { position: relative; background: #000; }
.khung-game iframe {
  display: block; width: 100%; height: min(72vh, 720px); border: 0; background: #000;
}
.nhay { animation: nhay 1.2s steps(1) infinite; }

.diem-vua-ghi {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: var(--vien) solid var(--mau-chu); background: var(--mau-bac-ha);
  padding: 10px 14px; margin-bottom: 16px; font-weight: 700;
}

/* ===== Chân trang ======================================================== */

.chan-trang {
  border-top: var(--vien-day) solid var(--mau-chu);
  background: var(--mau-chu); color: var(--mau-nen);
  margin-top: 60px;
}
.chan-trang .giua {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px;
}
.chan-trang .ten { font-family: var(--chu-to); font-weight: 700; font-size: 18px; }
.chan-trang .nho { color: var(--mau-chu-mo); }

/* ===== Trang hẹp (vào, đăng nhập) ======================================== */

.trang-hep { max-width: 480px; margin: 0 auto; padding: 48px 16px 60px; }

/* ===== Điện thoại ======================================================== */

@media (max-width: 640px) {
  body { font-size: 15px; }
  .luoi-game { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .ten-game { font-size: 18px; }
  .anh-bia .chu-cai { font-size: 54px; }
  .khung { box-shadow: 5px 5px 0 var(--mau-chu); }
  .khung-than { padding: 14px; }
  .the-game { box-shadow: 4px 4px 0 var(--mau-chu); }
  .hang-hai { grid-template-columns: 1fr; }
  .khung-game iframe { height: min(64vh, 560px); }
  .o-vuong-bay { max-width: 100%; }
  .logo-ten { font-size: 22px; }
  .chan-trang { margin-top: 40px; }
}