/* =====================================================================
   styles.css — Giao diện đơn giản, chữ to, nút to (hợp với điện thoại)
   Màu theo bộ nhận diện: nền #01093b, nút cam #eb3309, cảnh báo #fafa07
   ===================================================================== */
:root{
  --nen:#01093b; --nen2:#0b1550; --the:#ffffff; --chu:#12183a; --chu-nhat:#5b6382;
  --cam:#eb3309; --cam-dam:#c62905; --vang:#fafa07; --xanh:#1aa251; --do:#d63535;
  --vien:#d7dbe8; --bong:0 6px 24px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.5 -apple-system,"Segoe UI",Roboto,system-ui,Arial,sans-serif;
  color:var(--chu); background:var(--nen);
  -webkit-text-size-adjust:100%;
}
/* Nền có chút chuyển sắc cho đỡ đơn điệu */
body{background:linear-gradient(160deg,var(--nen),var(--nen2))}

.boc{ max-width:440px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; padding:18px; }

.the{
  background:var(--the); border-radius:18px; box-shadow:var(--bong);
  padding:22px 20px; }

/* Thương hiệu */
.hieu{ text-align:center; margin:6px 0 16px; }
.hieu .ten{ font-size:26px; font-weight:800; color:var(--nen); letter-spacing:.3px }
.hieu .phu{ color:var(--chu-nhat); font-size:14px; margin-top:2px }

/* Màn hình: mặc định ẩn, chỉ .hien mới hiện */
.man{ display:none }
.man.hien{ display:block; animation:vao .18s ease }
@keyframes vao{ from{opacity:0; transform:translateY(6px)} to{opacity:1} }

h1,h2{ margin:0 0 6px; color:var(--nen); font-size:20px }
.mota{ color:var(--chu-nhat); font-size:14px; margin:0 0 16px }

/* Ô nhập */
label{ display:block; font-size:14px; font-weight:600; margin:12px 0 6px }
.o-nhap{ position:relative }
input[type=text],input[type=email],input[type=tel],
input[type=password],input[type=number],select{
  width:100%; padding:14px 44px 14px 14px; font-size:17px;
  border:1.5px solid var(--vien); border-radius:12px; background:#fbfcff;
  outline:none;
}
input:focus,select:focus{ border-color:var(--cam); background:#fff }
.o-nhap .mat{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; font-size:20px; padding:8px; cursor:pointer;
}

/* Nút */
.nut{
  display:block; width:100%; padding:15px; font-size:18px; font-weight:800;
  border:0; border-radius:12px; cursor:pointer; margin-top:16px; color:#fff;
  background:var(--cam);
}
.nut:hover{ background:var(--cam-dam) }
.nut:disabled{ opacity:.6; cursor:default }
.nut.phu{ background:#eef0f7; color:var(--nen); font-weight:700 }
.nut.phu:hover{ background:#e2e6f3 }
.nut.xanh{ background:var(--xanh) } .nut.xanh:hover{ background:#158a44 }
.nut.nho{ width:auto; display:inline-block; padding:10px 16px; font-size:15px; margin-top:0 }

/* Dòng liên kết dưới nút */
.lienket{ text-align:center; margin-top:14px; font-size:15px }
.lienket a{ color:var(--cam-dam); font-weight:700; text-decoration:none; cursor:pointer }
.lienket a:hover{ text-decoration:underline }
.chan{ text-align:center; margin-top:18px; font-size:12.5px; color:var(--chu-nhat) }
.chan a{ color:var(--chu-nhat) }

/* Ô tích ghi nhớ */
.ghinho{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:15px }
.ghinho input{ width:20px; height:20px }

/* Danh sách lựa chọn (khôi phục) — mỗi dòng là 1 nút to */
.chon{ display:flex; flex-direction:column; gap:10px; margin-top:10px }
.chon button{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:16px; border:1.5px solid var(--vien); border-radius:14px;
  background:#fbfcff; cursor:pointer; font-size:16px; color:var(--chu);
}
.chon button:hover{ border-color:var(--cam); background:#fff }
.chon .icon{ font-size:22px; width:28px; text-align:center }
.chon .tit{ font-weight:700 } .chon .sub{ font-size:13px; color:var(--chu-nhat) }

/* Ô báo lỗi / báo tình trạng khóa */
.hop{ border-radius:12px; padding:12px 14px; font-size:14.5px; margin-top:14px; display:none }
.hop.hien{ display:block }
.hop.loi{ background:#fdecec; color:#8a1c1c; border:1px solid #f3b4b4 }
.hop.ok{  background:#e9f8ef; color:#155e33; border:1px solid #b7e6c8 }
.hop.canhbao{ background:#fffbe0; color:#6a5b00; border:2px solid var(--vang) }

/* Nút liên hệ hỗ trợ */
.lienhe{ display:flex; gap:10px; margin-top:12px }
.lienhe a{
  flex:1; text-align:center; text-decoration:none; padding:13px; border-radius:12px;
  font-weight:700; color:#fff;
}
.lienhe .zalo{ background:#0068ff } .lienhe .goi{ background:var(--xanh) }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(30px);
  background:#111; color:#fff; padding:12px 18px; border-radius:10px; font-size:15px;
  opacity:0; pointer-events:none; transition:.25s; max-width:92%; text-align:center; z-index:9999;
}
.toast.hien{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast.loi{ background:#b02020 } .toast.ok{ background:#178a46 }

/* Quay lại */
.quaylai{ background:none; border:0; color:var(--chu-nhat); font-size:15px;
  cursor:pointer; padding:6px 0; margin-bottom:6px }
.quaylai:hover{ color:var(--nen) }

/* ---------- Giao diện ADMIN ---------- */
.admin-wrap{ max-width:820px; margin:0 auto; padding:16px }
.admin-top{ display:flex; justify-content:space-between; align-items:center;
  color:#fff; margin-bottom:14px; gap:10px; flex-wrap:wrap }
.admin-top .ten{ font-size:20px; font-weight:800 }
.tim-hop{ display:flex; gap:8px; margin-bottom:14px }
.tim-hop input{ background:#fff }
.the-tk{ background:#fff; border-radius:14px; padding:16px; margin-bottom:12px; box-shadow:var(--bong) }
.the-tk .dong1{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.the-tk .tenh{ font-weight:800; font-size:17px }
.the-tk .meta{ color:var(--chu-nhat); font-size:13.5px; margin-top:2px }
.cham{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:middle }
.cham.xanh{ background:var(--xanh) } .cham.vang{ background:#e0b400 } .cham.do{ background:var(--do) }
.trthai{ font-size:13px; font-weight:700 }
.nut-hang{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.nut-hang .nut{ margin-top:0; width:auto; flex:1 1 160px; font-size:15px; padding:12px }
.cuu-hop{ background:#fff; border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:var(--bong);
  border:2px solid var(--vang) }

/* Màn nhỏ hơn nữa */
@media (max-width:360px){ .the{ padding:18px 15px } .hieu .ten{ font-size:23px } }