/* ========================================================================
   Kho Sim Số Đẹp — bảng màu lấy từ đúng chất liệu sản phẩm: đỏ son (mực
   dấu triện, bao lì xì) + vàng đồng (kim loại quý, may mắn) trên nền giấy
   ngà ấm. Ngũ hành (Kim/Mộc/Thủy/Hỏa/Thổ) dùng đúng 5 màu truyền thống của
   từng mệnh thay vì gộp chung 1 màu trang trí.
   Chữ số điện thoại/giá tiền dùng Be Vietnam Pro đậm (sans-serif, rõ nét,
   tránh nhầm hình dạng số) - đổi từ Fraunces sau phản hồi số khó đọc. Chữ
   tiêu đề/logo (không phải số) vẫn dùng Fraunces - serif tương phản cao, có
   cảm giác như khắc/đóng dấu. Chữ nội dung dùng Be Vietnam Pro - font thiết
   kế riêng cho tiếng Việt.
   ======================================================================== */

:root {
  --giay: #faf5ea;
  --giay-dam: #f3ead9;
  --tram: #ffffff;
  --muc: #241a16;
  --muc-nhat: #7a6a5c;
  --do-son: #a6192e;
  --do-son-dam: #7e0f21;
  --vang-dong: #a9781f;
  --vang-dong-sang: #c99a3d;
  --vien: #e6d9c2;

  --menh-kim: #6b6f76;
  --menh-moc: #3f7d4a;
  --menh-thuy: #2b5583;
  --menh-hoa: #a6192e;
  --menh-tho: #93672b;

  --bo-tron: 3px;
  --bo-tron-lon: 5px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  background: var(--giay);
  color: var(--muc);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Dai mau son o mep tren cung trang - goi lien tuong dai chi do tren thu
   phap/hop qua tet, danh dau ban sac ma khong can hoa tiet phuc tap. */
.dai-do {
  height: 6px;
  background: linear-gradient(90deg, var(--do-son) 0%, var(--do-son) 70%, var(--vang-dong-sang) 100%);
}

/* ---------- Header ---------- */
.header {
  background: var(--tram);
  border-bottom: 1px solid var(--vien);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.logo-icon { flex-shrink: 0; width: 42px; height: 42px; }

.logo-chu {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0;
  color: var(--muc);
  line-height: 1.1;
}

.header-search {
  display: flex;
  flex: 1;
  max-width: 400px;
}

.header-search input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--vien);
  border-right: none;
  border-radius: var(--bo-tron) 0 0 var(--bo-tron);
  font-size: 1rem;
  font-family: inherit;
  background: var(--giay);
}

.header-search input:focus {
  outline: none;
  border-color: var(--do-son);
}

.header-search button {
  padding: 13px 26px;
  background: var(--do-son);
  color: var(--giay);
  border: none;
  border-radius: 0 var(--bo-tron) var(--bo-tron) 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
}

.header-search button:hover { background: var(--do-son-dam); }

/* ---------- Thanh dieu huong duoi header (do dam, chu to/dam giong kieu
   header den + thanh do cua cac trang sim tham khao) ---------- */
.header-nav { background: var(--do-son); }
.header-nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 13px 22px;
  font-size: 0.95rem;
}
.header-nav-inner a { color: rgba(255,255,255,0.9); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-right: 28px; }
.header-nav-inner a:last-of-type { margin-right: 0; }
.header-nav-inner a:hover { color: #fff; }
.header-nav-quanly {
  margin-left: auto !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.82rem;
  text-transform: none !important;
  font-weight: 500 !important;
}
.header-nav-quanly:hover { color: #fff !important; }

/* ---------- Main ---------- */
.main-content { padding: 20px 22px 64px; }

/* ---------- Bo loc ---------- */
.bo-loc {
  background: var(--tram);
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron-lon);
  padding: 10px 16px;
  margin-bottom: 12px;
}

.bo-loc-hang {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.bo-loc-hang label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.74rem;
  color: var(--muc-nhat);
  min-width: 112px;
}

.bo-loc-hang input,
.bo-loc-hang select {
  padding: 6px 8px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron);
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--muc);
  background: var(--giay);
}

.bo-loc-hang input:focus,
.bo-loc-hang select:focus {
  outline: none;
  border-color: var(--do-son);
}

.bo-loc-hang .btn { padding: 7px 16px; font-size: 0.85rem; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--bo-tron);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}

.btn-primary { background: var(--do-son); color: var(--giay); }
.btn-primary:hover { background: var(--do-son-dam); }
.btn-ghost { background: transparent; color: var(--muc-nhat); border-color: var(--vien); }
.btn-ghost:hover { border-color: var(--muc-nhat); }
.btn-lg { padding: 15px 24px; font-size: 1.05rem; width: 100%; }

.bo-loc-gia-hang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.bo-loc-nhan-nho { font-size: 0.78rem; color: var(--muc-nhat); font-weight: 600; margin-right: 3px; }

.chip-gia {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  color: var(--muc);
  background: var(--giay);
}
.chip-gia:hover { border-color: var(--do-son); }
.chip-gia.chip-active { background: var(--muc); color: #fff; border-color: var(--muc); }

.chip-row { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-row + .chip-row { margin-top: 4px; }
.chip-label { font-size: 0.76rem; color: var(--muc-nhat); margin-right: 3px; }

.chip {
  font-size: 0.76rem;
  padding: 4px 11px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  color: var(--muc);
  background: var(--giay);
}

.chip:hover { border-color: var(--vang-dong); }
.chip small { color: var(--muc-nhat); }
.chip-active { background: var(--do-son); color: var(--giay); border-color: var(--do-son); }
.chip-active small { color: rgba(255,255,255,0.8); }

.mang-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---------- Ket qua / grid sim ---------- */
.ket-qua-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--muc);
}

.ket-qua-count { color: var(--muc-nhat); font-size: 0.88rem; }

.ket-qua-cong-cu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.nhom-sap-xep, .nhom-giao-dien {
  display: flex;
  gap: 2px;
  background: var(--giay-dam);
  border-radius: var(--bo-tron);
  padding: 3px;
}

.nut-sap-xep, .nut-giao-dien {
  padding: 6px 13px;
  border-radius: calc(var(--bo-tron) - 1px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muc-nhat);
}
.nut-sap-xep.active, .nut-giao-dien.active { background: var(--tram); color: var(--do-son); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* ---------- Che do xem dang bang ---------- */
.bang-sim-list { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 640px; }
.bang-sim-list th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--muc);
  font-size: 0.78rem;
  color: var(--muc-nhat);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bang-sim-list td { padding: 6px 12px; border-bottom: 1px solid var(--vien); vertical-align: middle; line-height: 1.2; }
.bang-sim-list tr:hover { background: var(--giay-dam); }
.bang-sim-so { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--do-son); }
.bang-sim-gia { font-weight: 700; color: var(--muc); font-size: 1.05rem; }
.bang-sim-list .tag { font-size: 0.85rem; padding: 5px 13px; font-weight: 700; }

.sim-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sim-card {
  position: relative;
  flex: 1 1 220px;
  max-width: 260px;
  background: var(--tram);
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron-lon);
  padding: 13px 14px 12px;
  display: block;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.sim-card:hover {
  border-color: var(--do-son);
  transform: translateY(-2px);
}

.sim-card-so {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--do-son);
  margin: 6px 0 10px;
  /* Khong bao gio cat bot so dien thoai (vd bang dau "..."): thu gon vua du
     de khong xuong dong voi da so dinh dang, neu van dai qua thi cho xuong
     dong binh thuong con hon lam khach khong thay het so. */
  overflow-wrap: break-word;
}

.tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--giay-dam);
  color: var(--muc-nhat);
}

/* tag-mang LUON nen dac mau + chu trang (khong chi rieng trong .sim-card) -
   truoc day chi ap dung trong .sim-card nen o che do Bang chu bi xam nhat
   de len nen mau dam, rat kho doc. */
.tag-mang { color: #fff !important; font-weight: 600; }

/* Mau rieng cho tung nha mang - nen dac (khong nhat) de bat mat hon,
   chi dung mau, khong sao chep logo/hinh anh thuong hieu that. */
.mang-viettel { background: #ee2a24; }
.mang-vinaphone { background: #0099cc; }
.mang-mobifone { background: #003da5; }
.mang-vietnamobile { background: #ec008c; }
.mang-gmobile { background: #f7941d; }
.mang-itelecom { background: #ff6600; }
.mang-reddi { background: #7b2d8e; }
.mang-khac { background: var(--muc-nhat); }

/* Mau rieng cho tung menh ngu hanh - dung mau chu, nen nhat cua chinh mau do. */
.tag-menh { color: #fff; }
.menh-kim { background: var(--menh-kim); }
.menh-moc { background: var(--menh-moc); }
.menh-thuy { background: var(--menh-thuy); }
.menh-hoa { background: var(--menh-hoa); }
.menh-tho { background: var(--menh-tho); }

.sim-card-chan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sim-card-gia { font-weight: 700; color: var(--muc); font-size: 1rem; font-family: 'Be Vietnam Pro', sans-serif; }

.khong-co-du-lieu { color: var(--muc-nhat); padding: 48px 0; text-align: center; }

/* ---------- Phan trang ---------- */
.phan-trang { display: flex; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.phan-trang a {
  padding: 8px 14px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron);
  font-size: 0.88rem;
  background: var(--tram);
}
.phan-trang a.active { background: var(--do-son); color: var(--giay); border-color: var(--do-son); }

/* ---------- Chi tiet sim ---------- */
.quay-lai { display: inline-block; margin-bottom: 20px; color: var(--muc-nhat); font-size: 0.9rem; }
.quay-lai:hover { color: var(--do-son); }

.chi-tiet {
  background: var(--tram);
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron-lon);
  padding: 34px;
  max-width: 540px;
  position: relative;
  overflow: hidden;
}

.chi-tiet::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--do-son), var(--vang-dong-sang));
}

.chi-tiet-so {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.chi-tiet-meta { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.tag-duoi { background: var(--giay-dam); }

.chi-tiet-gia {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--do-son);
  margin-bottom: 26px;
}

.form-dat-mua { border-top: 1px dashed var(--vien); padding-top: 24px; }
.form-dat-mua h3 { margin-bottom: 16px; font-size: 1.1rem; }

.form-dat-mua label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--muc-nhat);
  margin-bottom: 15px;
}

.form-dat-mua input,
.form-dat-mua textarea {
  padding: 11px 13px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--muc);
  background: var(--giay);
  resize: vertical;
}

.form-dat-mua input:focus,
.form-dat-mua textarea:focus {
  outline: none;
  border-color: var(--do-son);
}

.loi { background: #fbeaec; color: var(--do-son-dam); padding: 11px 15px; border-radius: var(--bo-tron); font-size: 0.88rem; }

/* ---------- Thanh cong / 404 ---------- */
.thanh-cong { text-align: center; padding: 70px 20px; max-width: 460px; margin: 0 auto; }
.thanh-cong-icon { font-size: 2.6rem; margin-bottom: 10px; }
.thanh-cong h2 { font-size: 1.5rem; }
.thanh-cong .btn { margin-top: 20px; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--vien);
  padding: 26px 0;
  color: var(--muc-nhat);
  font-size: 0.82rem;
  text-align: center;
}
.footer-links { margin-top: 6px; }
.footer-links a { color: var(--do-son-dam); }
.footer-version { opacity: 0.5; margin-top: 4px; }

/* ---------- Tra cuu don hang ---------- */
.tra-cuu-khoi { max-width: 640px; margin: 0 auto; }
.tra-cuu-khoi h1 { margin-bottom: 6px; }

.tra-cuu-form {
  display: flex;
  gap: 10px;
  margin: 18px 0 8px;
}
.tra-cuu-form input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--tram);
}
.tra-cuu-form input:focus { outline: none; border-color: var(--do-son); }

.tra-cuu-nhom { margin-top: 26px; }
.tra-cuu-nhom h2 { font-size: 1.05rem; margin-bottom: 10px; }

.tra-cuu-dong {
  background: var(--tram);
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron);
  padding: 13px 16px;
  margin-bottom: 8px;
}
.tra-cuu-dong-chinh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tra-cuu-so { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 1.05rem; }
.tra-cuu-dong-phu { font-size: 0.82rem; color: var(--muc-nhat); margin-top: 4px; }

.tra-cuu-trang-thai {
  font-size: 0.75rem;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--giay-dam);
  color: var(--muc-nhat);
}
.tt-dang-dat { background: rgba(169,120,31,0.16); color: #a9781f; }
.tt-da-ban { background: rgba(63,125,74,0.14); color: #3f7d4a; }
.tt-da-huy { background: rgba(166,25,46,0.1); color: var(--do-son-dam); }

/* ---------- Admin ---------- */
.admin-block {
  background: var(--tram);
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron-lon);
  padding: 22px 24px;
  margin-bottom: 22px;
}

.admin-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.stat-box {
  flex: 1;
  min-width: 110px;
  text-align: center;
  padding: 16px 10px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-tron);
}
.stat-so { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--do-son); }

.ghi-chu-nho { color: var(--muc-nhat); font-size: 0.85rem; }

.form-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

.thong-bao-upload { padding: 11px 15px; border-radius: var(--bo-tron); font-size: 0.9rem; margin-top: 12px; }
.thong-bao-upload.thanh-cong { background: #e7f6ec; color: #1e7a3d; }
.thong-bao-upload.loi { background: #fbeaec; color: var(--do-son-dam); }

.bang-cuon { overflow-x: auto; }
.bang-don { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 720px; }
.bang-don th, .bang-don td {
  text-align: left;
  padding: 9px 11px;
  border-bottom: 1px solid var(--vien);
  white-space: nowrap;
}
.bang-don select { padding: 5px 9px; border-radius: var(--bo-tron); border: 1px solid var(--vien); font-family: inherit; }
.form-inline { margin: 0; }

.ql-form-don {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  min-width: 220px;
}
.ql-form-don select,
.ql-form-don input {
  padding: 5px 8px;
  border-radius: var(--bo-tron);
  border: 1px solid var(--vien);
  font-size: 0.82rem;
  font-family: inherit;
}
.btn-nho { padding: 6px 14px; font-size: 0.82rem; align-self: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; }
  .header-search { max-width: none; width: 100%; order: 3; }
  .bo-loc-hang { gap: 12px; }
  .bo-loc-hang label { min-width: 47%; }
  .chi-tiet { padding: 24px; }
  .chi-tiet-so { font-size: 1.7rem; }
}