/* Trang tai khoan: dang ky, dang nhap, quen mat khau, ho so.
   Dung lai bien mau va bo chu cua styles.css — khong dat mau cung o day. */

.tk-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem) 1rem clamp(3rem, 8vw, 5rem);
}

.tk-card {
  width: 100%;
  max-width: 27rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.tk-card.tk-rong {
  max-width: 42rem;
}

.tk-tieu-de {
  margin: 0 0 0.4rem;
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  line-height: 1.25;
  text-wrap: balance;
}

.tk-phu {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Truong nhap ---------------------------------------------------------- */

.tk-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.tk-truong {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tk-truong label {
  font-size: 0.875rem;
  font-weight: 500;
}

.tk-truong input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 1rem; /* 16px: duoi muc nay iOS tu phong to trang khi bam vao o nhap */
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.tk-truong input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tk-truong input[aria-invalid="true"] {
  border-color: var(--danger);
}

.tk-goi-y {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* Hang co nhan ben trai va lien ket ben phai */
.tk-hang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tk-hang a {
  font-size: 0.8125rem;
}

/* --- Nut ------------------------------------------------------------------ */

.tk-form .btn {
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
}

.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

/* --- Thong bao ------------------------------------------------------------ */

.tk-bao {
  margin: 0 0 1.2rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.55;
  border: 1px solid transparent;
}

.tk-bao[hidden] {
  display: none;
}

.tk-bao.loi {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: color-mix(in srgb, var(--danger) 80%, var(--ink));
}

.tk-bao.xong {
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  color: color-mix(in srgb, var(--ok) 78%, var(--ink));
}

.tk-bao.tin {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-deep);
}

/* --- Chan the ------------------------------------------------------------- */

.tk-chan {
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}

/* --- Trang ho so ---------------------------------------------------------- */

.tk-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem 1.4rem;
  margin: 0 0 1.75rem;
}

@media (max-width: 32rem) {
  .tk-day {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tk-o {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tk-o dt {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tk-o dd {
  margin: 0;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.tk-muc {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.tk-muc h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.tk-muc > p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.tk-the {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--pill);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--bg-sunken);
  color: var(--ink-soft);
}

.tk-the.hoat-dong {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  color: color-mix(in srgb, var(--ok) 80%, var(--ink));
}

.tk-the.cho {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.tk-the.khoa {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: color-mix(in srgb, var(--danger) 80%, var(--ink));
}

/* Trang thai dang doi ket qua tu may chu */
.tk-dang-tai {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* --- O tick dong y dieu khoan -------------------------------------------- */

.tk-dong-y {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}

.tk-dong-y input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.tk-dong-y a {
  color: var(--accent-deep);
}

/* --- Khung reCAPTCHA ------------------------------------------------------ */

.tk-captcha[hidden] {
  display: none;
}

/* O reCAPTCHA rong co dinh 304px, hep hon the chua no — de nguyen thi no
   lech han ve mot ben. Canh giua cho can voi cac o nhap va nut ben tren. */
.tk-captcha {
  display: flex;
  justify-content: center;
}

/* Man hinh hep hon 304px thi phai thu nho lai, neu khong no day ca the ra
   ngoai va trang bi cuon ngang.
   `transform-origin: top center` chu khong phai `0 0`: thu nho tu goc trai
   thi o bi keo lech sang trai dung luc no vua duoc canh giua. */
@media (max-width: 24rem) {
  .tk-captcha > div {
    transform: scale(0.86);
    transform-origin: top center;
  }
}

/* --- Khu vuc thanh vien (dung chung khung cms.css) ----------------------- */

/* The so tren trang Tong quan */
.tk-the-so {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.75rem;
}

.tk-so {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.tk-so strong {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tk-so span {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.tk-so small {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* Trong khung CMS, the khong con la mot cot hep giua man hinh nen bieu mau
   phai tu gioi han lai — mot o nhap keo dai 1400px thi khong ai muon dung. */
.tk-form-hep {
  max-width: 24rem;
}

.tk-day {
  max-width: 46rem;
}

.so-am { color: var(--danger); }
.so-duong { color: var(--ok); }

/* --- Nap credit ---------------------------------------------------------- */
/* Khoi nap gom form ben trai va thong tin chuyen khoan ben phai. Duoi 900px
   thi xep doc — hai cot 300px canh nhau la khong doc duoc tren dien thoai. */
.np-khoi {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
  margin: 0 0 1.2rem;
}
@media (max-width: 900px) {
  .np-khoi {
    grid-template-columns: 1fr;
  }
}
.np-khoi .form-hang {
  margin: 0;
}

.np-ck {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface-2, var(--surface));
}
.np-ck-ds {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.np-ck-ds dt {
  color: var(--ink-nhan);
  white-space: nowrap;
}
.np-ck-ds dd {
  margin: 0;
  font-weight: 600;
  /* So tai khoan la thu nguoi ta chep tay hoac boi den de sao chep: chu deu
     nhau giup do nham chu so, va cho phep chon bang chuot. */
  font-variant-numeric: tabular-nums;
  user-select: all;
  overflow-wrap: anywhere;
}
.np-luu-y {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  /* Tren nen --surface-2, --ink-soft chi dat 4.04:1. Dong nay chua ma don ma
     khach phai chep sang app ngan hang — doc nham mot ky tu la mat don. */
  color: var(--ink-nhan);
}
.np-luu-y strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  user-select: all;
}
.np-tieu-de {
  margin: 1.4rem 0 0.6rem;
  font-size: 1rem;
}

/* --- An cac muc khong mo ---------------------------------------------------
   Luat nay von CHI nam trong admin.css, ma trang thanh vien khong nap file
   do — nen moi muc hien chong len nhau thanh mot trang dai, va bam tab chi
   doi class chu khong doi duoc gi nhin thay. Cac bo kiem truoc do deu doc
   classList nen khong bat duoc: class dung, con man hinh thi sai. */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* --- Dang nhap bang Google ------------------------------------------------
   Nut do chinh Google ve (trong mot iframe), nen o day chi lo cho dat va
   duong ke "hoac". Khong to mau nut: Google buoc giu nguyen dang cua no. */
.tk-google {
  display: grid;
  /* Khoang cach nut <-> "hoac" hep hon khoang cach "hoac" <-> form ben duoi:
     duong ke thuoc ve phan NGAN CACH, nen no phai dinh vao khoang trong lon
     hon chu khong nam lung chung giua hai ben bang nhau. */
  gap: 1.1rem;
  margin: 0 0 1.35rem;
}

.tk-google-nut {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.tk-hoac {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}
.tk-hoac::before,
.tk-hoac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}