:root {
  --brand-blue: #0e9ed9;
  --brand-blue-dark: #0a6f99;
  --brand-blue-darker: #075170;
  --brand-orange: #f37321;
  --brand-orange-dark: #c85814;
  --brand-navy: #0c3b52;
}

body { font-family: 'Segoe UI', Arial, sans-serif; background: #f0f9ff; color: #0c3b52; }

.nav-link { color: #d6f1ff; text-decoration: none; padding: 4px 2px; }
.nav-link:hover { color: #fff; text-decoration: underline; }
.nav-link.active { color: #fff; font-weight: 600; border-bottom: 2px solid var(--brand-orange); }

.card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(12,59,82,0.12); padding: 1.25rem; }

/* 3 o tong quan quy bong (Tong thu / Tong chi / So du) - dung clamp() de font tu co lai theo be rong
   man hinh thay vi 1 kich thuoc co dinh (text-xl) từng gay tran chu tren dien thoai. Cho phep xuong
   dong + ngat tu neu can, khong de tran ra ngoai khung .card. */
.fund-summary-amount { font-size: clamp(0.82rem, 4vw, 1.25rem); line-height: 1.25; overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 640px) {
  .fund-summary-grid { gap: 0.4rem; }
  .fund-summary-card { padding: 0.55rem 0.3rem; }
  .fund-summary-card p.text-sm { font-size: 0.62rem; margin-bottom: 2px; }
}

.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: background 0.15s; }
.btn-primary { background: var(--brand-orange); color: #fff; }
.btn-primary:hover { background: var(--brand-orange-dark); }
.btn-secondary { background: #e0f2fe; color: var(--brand-blue-darker); }
.btn-secondary:hover { background: #bae6fd; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }

.input { border: 1px solid #bae6fd; border-radius: 8px; padding: 0.5rem 0.75rem; width: 100%; }
.input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 2px rgba(14,158,217,0.2); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }

/* Mau nen cho select trang thai duyet thanh vien (thay cho badge cu) - giu cung bang mau de van
   nhan biet nhanh bang mau nhu truoc. */
.status-select-approved { background: #dcfce7; color: #166534; }
.status-select-rejected { background: #fee2e2; color: #991b1b; }
.status-select-pending { background: #fef3c7; color: #92400e; }
.badge-gray { background: #e2e8f0; color: #334155; }
.badge-blue { background: #e0f2fe; color: var(--brand-blue-darker); }
.badge-orange { background: #ffedd5; color: var(--brand-orange-dark); }

.jersey-yellow { background: #f7b500; color: #7c2d12; }
.jersey-white { background: #f8fafc; color: #0f172a; border: 1px solid #cbd5e1; }
.jersey { border: 1px solid rgba(0,0,0,0.08); }
.pitch { background: linear-gradient(#0a6f99,#0c3b52); border-radius: 12px; padding: 1rem; color: #fff; }

/* So do doi hinh da chinh (kieu anh so do Premier League): logo + ten doi tren cung, cac hang cau thu
   (anh + ten) xep tu tren (tan cong) xuong duoi (thu mon), nen mau theo mau doi voi net san mo lam nen. */
.formation-card {
  border-radius: 14px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--team-color, #334155) 0%, #0f172a 145%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
}
.formation-header {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 0.5rem; font-weight: 700; font-size: 0.95rem;
  background: rgba(0,0,0,0.25);
}
.formation-pitch-wrap { position: relative; min-height: 380px; padding: 1rem 0.5rem; }
/* Chi co 1 doi duoc chia (vd chua du nguoi de chia >=2 doi): ve san to hon han, gioi han chieu rong
   vua phai va can giua de trong giong 1 san bong that thay vi 1 dai ngang det bi "nho" so voi khung. */
.formation-grid-single { display: flex; justify-content: center; }
.formation-grid-single .formation-card { width: 100%; max-width: 480px; }
.formation-grid-single .formation-pitch-wrap { min-height: 720px; padding: 1.5rem 0.75rem; }
.formation-grid-single .formation-rows { min-height: 690px; }
.formation-grid-single .formation-player-avatar img,
.formation-grid-single .formation-player-avatar .avatar-img,
.formation-grid-single .formation-player-avatar .avatar-fallback { width: 64px !important; height: 64px !important; font-size: 26px !important; }
.formation-pitch-lines {
  position: absolute; inset: 8px; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 500"><rect x="6" y="6" width="288" height="488" fill="none" stroke="white" stroke-width="3" opacity="0.35"/><line x1="6" y1="250" x2="294" y2="250" stroke="white" stroke-width="3" opacity="0.35"/><circle cx="150" cy="250" r="55" fill="none" stroke="white" stroke-width="3" opacity="0.35"/><circle cx="150" cy="250" r="3" fill="white" opacity="0.35"/><rect x="80" y="6" width="140" height="70" fill="none" stroke="white" stroke-width="3" opacity="0.35"/><rect x="115" y="6" width="70" height="28" fill="none" stroke="white" stroke-width="3" opacity="0.35"/><rect x="80" y="424" width="140" height="70" fill="none" stroke="white" stroke-width="3" opacity="0.35"/><rect x="115" y="466" width="70" height="28" fill="none" stroke="white" stroke-width="3" opacity="0.35"/></svg>');
}
.formation-rows {
  position: relative; z-index: 1; height: 100%; min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;
}
.formation-row { display: flex; justify-content: center; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; }
/* Truoc day co do rong co dinh 68px + ten chi hien 1 tu (ho ten rut gon) cat bot bang dau "...". Gio
   hien FULL ho ten, khong xuong dong: bo do rong co dinh (de khung tu gian theo do dai ten), bo cat
   chu (ellipsis), dung co chu co the tu thu nho theo be rong man hinh (clamp) de ten dai van vua 1
   dong ma khong qua nho tren desktop. */
.formation-player { display: flex; flex-direction: column; align-items: center; width: auto; max-width: 168px; }
.formation-player-avatar { position: relative; }
.formation-player-name {
  margin-top: 0.3rem; font-size: clamp(0.56rem, 2.3vw, 0.72rem); font-weight: 700; text-align: center; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65); line-height: 1.15;
  white-space: nowrap;
}
.formation-captain-badge {
  position: absolute; top: -2px; right: -2px; background: #dc2626; color: #fff;
  font-size: 0.6rem; font-weight: 800; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;
}
.formation-empty { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
/* border-collapse:collapse + hang "dong bang" (position:sticky) hay bi loi hien thi khi cuon doc:
   duong vien cua hang dong bang bi lech, de lo hang cuon phia duoi chen len tao cam giac "2 lop chong
   nhau". Doi sang border-collapse:separate de tranh loi nay (giong sua cho .fund-table). */
.roster-table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid #cbd5e1; table-layout: fixed; }
.roster-table th { text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: #64748b; padding: 6px 8px; background: #f1f5f9; border: 1px solid #cbd5e1; }
.roster-table td { padding: 5px 8px; border: 1px solid #e2e8f0; vertical-align: middle; overflow: hidden; }
.roster-table th:first-child, .roster-table td:first-child { width: 64px; }
/* Dinh (sticky) 2 hang dau cua bang danh sach cau thu (ten doi + hang "Chi so") vao dau khung cuon
   .roster-box, de khi cuon xuong xem danh sach cau thu phia duoi, 2 hang nay khong bi troi mat. */
.roster-table thead tr:first-child th { position: sticky; top: 0; z-index: 3; }
.roster-table thead tr.roster-total-row td { position: sticky; top: 28px; z-index: 3; }
.roster-chip {
  display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px; border-radius: 6px;
  font-size: 0.7rem; font-weight: 600; border: 1px solid rgba(0,0,0,0.08); box-sizing: border-box; line-height: 1.3;
}
/* Ten cau thu duoc phep cat bot + "..." neu qua dai, NHUNG icon dau doi truong (C) ben duoi (flex-shrink:0)
   luon duoc giu nguyen, khong bao gio bi che/cat mat - sua loi "ten dai thi khong thay (C)". */
.roster-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.roster-chip-captain {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: #dc2626; color: #fff;
  font-size: 0.62rem; font-weight: 800; line-height: 1;
}
.roster-total-row td { background: #f0f9ff; border-bottom: 2px solid #bae6fd; padding: 6px; font-size: 0.85rem; color: var(--brand-blue-dark, #0369a1); text-align: center; }
.rich-content p { margin: 0 0 0.4em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content img { max-width: 100%; border-radius: 6px; }
.quill-editor-box { background: #fff; border-radius: 0 0 8px 8px; }
.quill-editor-box .ql-editor { min-height: 120px; }
.quill-editor-box .ql-toolbar { border-radius: 8px 8px 0 0; background: #f8fafc; }
.hidden { display: none !important; }

h1, h2, h3 { color: var(--brand-navy); }
.text-brand-blue { color: var(--brand-blue); }
.text-brand-orange { color: var(--brand-orange); }
.bg-brand-blue { background: var(--brand-blue); }
.bg-brand-orange { background: var(--brand-orange); }

/* Bang quy dang ma tran (thanh vien x 12 thang) */
/* Bang danh sach thanh vien (trang nguoi dung + trang quan tri): tren mobile, KHONG cho phep chu xuong
   dong trong o - thay vao do de bang rong hon man hinh va cuon ngang (container cha da co overflow-x-auto).
   "width:max-content" de bang tu gian ra vua du noi dung that su can, "min-width:100%" de tren man hinh
   rong bang van lap day the card nhu binh thuong (khong bi hep lai neu noi dung it hon do rong container). */
.member-table { width: max-content; min-width: 100%; white-space: nowrap; border-collapse: collapse; }
.member-table th, .member-table td { white-space: nowrap; }

/* border-collapse:collapse + o "dong bang" (position:sticky) hay bi loi hien thi khi cuon: duong vien/
   nen cua o dong bang bi lech hoac de lo noi dung cuon phia duoi chen len, tao cam giac "2 lop chong
   nhau". Doi sang border-collapse:separate de moi o tu giu duong vien rieng, tranh loi nay khi cuon. */
.fund-table { border-collapse: separate; border-spacing: 0; white-space: nowrap; isolation: isolate; }
.fund-table th, .fund-table td { border: 1px solid #e0f2fe; padding: 4px 8px; font-size: 0.8rem; }
/* Tat ca cac cot THANG (T1..T12) can GIUA gia tri (mac dinh trinh duyet can trai cho <td>) - loai tru
   cac cot/o da co canh chinh rieng (STT/Thanh vien da can giua/trai o rule rieng ben duoi, va o nhan
   "Muc quy/thang" dung tien ich text-right cua Tailwind can giu nguyen). */
.fund-table td:not(.fund-col-stt):not(.fund-col-name):not(.fund-col-frozen-group) { text-align: center; }
.fund-table thead th { background: #ecfeff; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; color: var(--brand-navy); }
/* 2 cot dau bang (STT, Thanh vien) duoc "dong bang" (sticky ben trai) thanh 1 khoi - luon nhin thay du
   khi keo thanh cuon ngang sang cac cot thang. Do rong/left PHAI khop chinh xac voi hang so
   FUND_FROZEN_COL_WIDTHS trong common.js (dung de tinh vi tri cuon toi thang hien tai).
   Luu y: dung ca "position: -webkit-sticky" (truoc "position: sticky") de dam bao hoat dong dung tren
   trinh duyet di dong (Safari/Chrome iOS-Android cu); dong thoi dung "isolation: isolate" o bang va
   z-index tang dan ro rang (than=2 < dau bang thuong=1 nhung frozen than=2, frozen dau bang=4) de tranh
   loi 2 lop chong len nhau khi cuon ngang tren man hinh dien thoai. */
.fund-table th.fund-col-stt, .fund-table td.fund-col-stt { position: -webkit-sticky; position: sticky; left: 0px; z-index: 2; width: 40px; min-width: 40px; max-width: 40px; background: #fff; text-align: center; }
.fund-table th.fund-col-name, .fund-table td.fund-col-name { position: -webkit-sticky; position: sticky; left: 40px; z-index: 2; width: 200px; min-width: 200px; max-width: 200px; background: #fff; text-align: left; white-space: normal; border-right: 2px solid #7dd3fc; box-shadow: 3px 0 6px -2px rgba(12,59,82,0.18); }
.fund-table thead th.fund-col-stt, .fund-table thead th.fund-col-name { z-index: 4; background: #ecfeff; }

/* Man hinh nho (dien thoai): 2 cot "dong bang" (STT/Thanh vien) o kich thuoc mac dinh (40+200=240px).
   Cung bat cuon cham (touch) muot cho iOS - thieu thuoc tinh nay la nguyen nhan pho bien khien cac o
   "dong bang" (sticky) bi ve SAI LOP (hien phia sau noi dung dang cuon) trong luc cuon tren dien thoai. */
.fund-table-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .fund-table th.fund-col-stt, .fund-table td.fund-col-stt { width: 28px; min-width: 28px; max-width: 28px; }
  .fund-table th.fund-col-name, .fund-table td.fund-col-name { left: 28px; width: 120px; min-width: 120px; max-width: 120px; font-size: 0.72rem; }
  .fund-table th, .fund-table td { padding: 3px 5px; font-size: 0.72rem; }
}
/* O gop 2 cot lam 1 (dung o hang "Muc quy/thang") - vi la 1 the <td colspan="2"> duy nhat nen chi can
   dong bang tu vi tri trai cung (left:0), do rong se tu dong khop voi tong 2 cot ben tren. */
.fund-table td.fund-col-frozen-group { position: -webkit-sticky; position: sticky; left: 0px; z-index: 2; background: #f0f9ff; border-right: 2px solid #7dd3fc; box-shadow: 3px 0 6px -2px rgba(12,59,82,0.18); }
.fund-cell-full { background: #dcfce7; }
.fund-cell-half { background: #fef3c7; }
.fund-cell-none { background: #fee2e2; }
.fund-cell-leave { background: #e2e8f0; color: #64748b; }

/* Luoi 12 thang thu nho, dung trong modal "Thong tin cau thu" (xem playerFundMiniTableHtml o common.js) */
.player-fund-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.player-fund-cell { border-radius: 6px; padding: 4px 2px; text-align: center; font-size: 0.68rem; line-height: 1.5; }
.player-fund-cell span { display: block; opacity: 0.75; }
.player-fund-cell b { display: block; }
.fund-cell-input { width: 48px; border: 1px solid #bae6fd; border-radius: 4px; padding: 2px 4px; font-size: 0.8rem; text-align: center; }
.fund-due-row td { background: #f0f9ff; font-weight: 600; }
.fund-due-row td.fund-col-frozen-group { background: #f0f9ff; }
.fund-due-input { width: 76px; border: 1px solid #7dd3fc; border-radius: 4px; padding: 2px 4px; font-size: 0.8rem; text-align: center; font-weight: 600; background: #fff; }
/* Cot thang hien tai trong bang quy - to sang de de nhan biet, giup nguoi dung/quan tri theo doi nhanh */
.fund-table th.fund-current-col { background: #0e9ed9; color: #fff; }
.fund-table td.fund-current-col { box-shadow: inset 0 0 0 2px #0e9ed9; }
.fund-table td.fund-current-col.fund-cell-full { background: #a7f3d0; }
.fund-table td.fund-current-col.fund-cell-none { background: #fecaca; }
.fund-table td.fund-due-row.fund-current-col, .fund-due-row td.fund-current-col { background: #cffafe; }
.team-badge-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; background: #fff; }

/* Thanh ty le vote (Tham gia / Vang mat / Den muon) */
.vote-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.vote-bar-yes { background: #16a34a; }
.vote-bar-late { background: #f59e0b; }
.vote-bar-no { background: #dc2626; }

/* Bai diem danh dang danh sach: moi lua chon 1 hang, kem so nguoi da vote ben canh */
.vote-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #e0f2fe; border-radius: 10px; padding: 0.6rem 0.9rem;
  background: #f8fcff; transition: background 0.15s, border-color 0.15s;
}
.vote-row:hover { background: #ecfeff; }
.vote-row-label { font-weight: 600; font-size: 0.92rem; color: var(--brand-navy); }
.vote-row-count { font-weight: 700; font-size: 1rem; min-width: 28px; text-align: center; color: var(--brand-blue-darker); }
.vote-row-active-yes { border-color: #16a34a; background: #dcfce7; }
.vote-row-active-yes .vote-row-count { color: #166534; }
.vote-row-active-late { border-color: #f59e0b; background: #fef3c7; }
.vote-row-active-late .vote-row-count { color: #92400e; }
.vote-row-active-no { border-color: #dc2626; background: #fee2e2; }
.vote-row-active-no .vote-row-count { color: #991b1b; }

/* Bo cuc 1 bai diem danh tren trang chu: 1 luoi grid duy nhat cho ca card, dat ten vung ro rang de:
   - Tieu de "Bang danh sach cau thu" THANG HANG voi tieu de bai diem danh (hang 1)
   - Khung danh sach chi tiet (bang) THANG HANG voi dong "Deadline diem danh: ..." (hang 2), khong con
     bi lech qua xa xuong duoi khi noi dung bai viet dai, vi noi dung dai chi anh huong toi cot trai. */
.match-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  grid-template-areas:
    "title       roster-title"
    "meta        roster"
    "content     roster"
    "vote        roster"
    "formation   roster";
  column-gap: 1.5rem;
  row-gap: 0.4rem;
  align-items: start;
}
.mc-title { grid-area: title; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mc-meta { grid-area: meta; }
.mc-roster-title { grid-area: roster-title; display: flex; align-items: center; }
.mc-content { grid-area: content; }
.mc-vote { grid-area: vote; margin-top: 0.6rem; }
.mc-formation { grid-area: formation; margin-top: 0.6rem; }
.mc-roster { grid-area: roster; }

@media (max-width: 1023px) {
  .match-card-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title" "meta" "content" "vote" "formation" "roster-title" "roster";
    row-gap: 0.5rem;
  }
  .mc-roster-title { margin-top: 0.5rem; }
}

/* Khung danh sach chi tiet cau thu (cot phai, cao suot chieu cao): gioi han chieu cao toi da + cho
   cuon rieng, tranh chiem qua nhieu khong gian khi danh sach dai (nhieu vi tri / nhieu cau thu). */
.roster-box { max-height: 620px; overflow-y: auto; overflow-x: auto; border-radius: 8px; }

/* Modal dang ky tai khoan (hien khi khach bam diem danh ma chua co tai khoan) */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12,59,82,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}

/* Dropdown "Tài khoản" tren nav (khi da dang nhap): bam de mo/dong */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { background: none; border: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 3px; }
.nav-dropdown-caret { font-size: 0.65em; transition: transform 0.15s; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px;
  background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(12,59,82,0.25); overflow: hidden; z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block; padding: 10px 14px; font-size: 0.85rem; color: var(--brand-navy);
  text-decoration: none; white-space: nowrap;
}
.nav-dropdown-item:hover { background: #f0f9ff; }
.nav-dropdown-item.active { background: #e0f2fe; font-weight: 700; }
.nav-dropdown-item + .nav-dropdown-item { border-top: 1px solid #f1f5f9; }

/* Anh dai dien cau thu */
.avatar-img, .avatar-fallback { border: 2px solid #fff; box-shadow: 0 1px 3px rgba(12,59,82,0.25); }
.avatar-upload-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: #e0f2fe; color: var(--brand-blue-darker);
  cursor: pointer; font-size: 0.9rem; border: 1px dashed var(--brand-blue);
}

/* 2 nut tab "Thu" / "Chi" tren trang quan tri quy bong (canh o chon Nam) */
.fund-tab-group { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--brand-blue); }
.tab-btn {
  padding: 6px 18px; font-size: 0.85rem; font-weight: 700; text-decoration: none;
  color: var(--brand-blue-darker); background: #e0f2fe; transition: background 0.15s, color 0.15s;
}
.tab-btn:hover { background: #bae6fd; text-decoration: none; }
.tab-btn-active, .tab-btn-active:hover { background: var(--brand-blue); color: #fff; }
.tab-btn + .tab-btn { border-left: 1px solid var(--brand-blue); }

/* ==================== Giao dien Dang ky / Dang nhap / Quen mat khau ====================
   Dung chung cho: login, register, verify-otp, set-password, forgot-password, reset-password,
   setup-profile. Muc tieu: gon gang, ro rang, dep tren ca man hinh may tinh va dien thoai. */
.auth-page {
  min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 1rem 2.5rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(14,158,217,0.12), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(243,115,33,0.10), transparent 45%);
}
.auth-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 16px;
  box-shadow: 0 8px 28px rgba(12,59,82,0.14); padding: 1.75rem 1.5rem;
}
@media (max-width: 480px) {
  .auth-card { padding: 1.35rem 1.1rem; border-radius: 14px; }
  .auth-page { padding: 0.75rem 0.6rem 2rem; align-items: flex-start; }
}
.auth-logo {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 0.85rem;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 4px 12px rgba(12,59,82,0.18);
  overflow: hidden;
}
.auth-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-title { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--brand-navy); margin-bottom: 0.2rem; }
.auth-subtitle { text-align: center; font-size: 0.85rem; color: #64748b; margin-bottom: 1.25rem; line-height: 1.4; }
.auth-subtitle b { color: var(--brand-navy); }

/* Thanh tien trinh 3 buoc (dang ky): so + nhan, buoc hien tai to sang, buoc da xong co dau tick */
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-bottom: 1.4rem; }
.auth-step-dot {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; background: #e2e8f0; color: #94a3b8; flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.auth-step-dot.done { background: #16a34a; color: #fff; }
.auth-step-dot.active { background: var(--brand-orange); color: #fff; box-shadow: 0 0 0 4px rgba(243,115,33,0.18); }
.auth-step-line { width: 22px; height: 2px; background: #e2e8f0; flex-shrink: 0; }
.auth-step-line.done { background: #16a34a; }

/* O nhap mat khau kem nut hien/an (icon con mat) */
.password-field { position: relative; }
.password-field .input { padding-right: 2.5rem; }
.password-toggle {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1.05rem;
  padding: 4px; line-height: 1; -webkit-tap-highlight-color: transparent;
}
.password-toggle:hover { color: var(--brand-blue-darker); }

/* O nhap ma OTP 6 so - to, de nhin, thuan tien go tren dien thoai (ban phim so tu bat qua inputmode) */
.otp-input {
  font-size: 1.7rem; letter-spacing: 0.5rem; text-align: center; font-weight: 700;
  color: var(--brand-navy); padding-top: 0.65rem; padding-bottom: 0.65rem;
}
@media (max-width: 380px) {
  .otp-input { font-size: 1.4rem; letter-spacing: 0.35rem; }
}

.auth-footer-link { text-align: center; font-size: 0.85rem; color: #64748b; margin-top: 1.1rem; }
.auth-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: #64748b; text-decoration: none; margin-bottom: 0.75rem; }
.auth-back-link:hover { color: var(--brand-blue-darker); }

.auth-info-box {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px;
  padding: 0.65rem 0.85rem; font-size: 0.8rem; color: var(--brand-blue-darker); margin-bottom: 1rem;
}

/* Nut submit: hien trang thai "dang xu ly..." + spinner nho khi dang goi API, tranh nguoi dung bam trung
   nhieu lan (dac biet quan trong tren mobile, cham man hinh de vo tinh bam 2 lan). */
.btn[disabled] { opacity: 0.65; cursor: not-allowed; }
.btn-spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  animation: btn-spin 0.7s linear infinite; margin-right: 6px; vertical-align: -2px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.password-strength-hint { font-size: 0.72rem; color: #94a3b8; margin-top: -0.35rem; margin-bottom: 0.4rem; }


/* ---- Chan trang website (logo mang xa hoi + dong ban quyen), cau hinh boi super_admin
   tai /admin/settings.html - xem footerHtml()/renderFooter() trong common.js ----
   Dong bo voi phong cach cua .nav (gradient navy -> xanh thuong hieu, chu trang) thay vi nen trang
   roi rac nhu truoc - tao cam giac footer la phan "dong khung" cho trang, doi xung voi header o tren. */
.site-footer {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue-dark));
  color: #d6f1ff;
}
/* Vien accent mong (cam -> xanh) tren cung footer - lap lai mau thuong hieu, tao diem nhan tach biet
   ro rang voi noi dung chinh cua trang ma khong can them bong do nang. */
.site-footer-accent { height: 3px; background: linear-gradient(90deg, var(--brand-orange), var(--brand-blue)); }
.site-footer-inner { padding: 2rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 0.55rem; }
.footer-brand img { width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.footer-brand span { font-weight: 700; letter-spacing: 0.04em; color: #fff; font-size: 0.95rem; }
.footer-social-row { display: flex; gap: 0.65rem; flex-wrap: wrap; justify-content: center; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.footer-social-link:hover { background: var(--brand-orange); color: #fff; transform: translateY(-2px); }
/* Gach ngan nho giua khoi icon va dong ban quyen - chi hien khi CA HAI cung co (xem footerHtml()),
   giup tach 2 khoi noi dung ma khong can them khoang trang lon. */
.footer-divider { width: 40px; height: 1px; background: rgba(255,255,255,0.22); }
.footer-copyright { font-size: 0.78rem; color: rgba(214,241,255,0.72); }

/* ---- Toggle switch don gian (bat/tat), dung o trang cau hinh chan trang ---- */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-switch .toggle-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  pointer-events: none; transition: background 0.15s;
}
.toggle-switch .toggle-slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--brand-blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ---- 1 dong cau hinh (icon + noi dung + toggle) trong trang /admin/settings.html ---- */
.footer-config-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid #e2e8f0; }
.footer-config-row:last-child { border-bottom: none; }
.footer-config-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #e0f2fe; color: var(--brand-blue-darker);
  display: flex; align-items: center; justify-content: center;
}