/* Khung CMS — dung chung cho trang quan tri va khu vuc thanh vien.
 *
 * VI SAO KHAC TRANG CHU
 * Trang chu de THUYET PHUC nguoi la trong man hinh dau: mot o nhap, mot dong
 * giai thich, khung hep 860px. Hai khu vuc nay de THAO TAC — nguoi dung da
 * biet minh vao lam gi, va can nhin nhieu du lieu cung luc. Cung bang mau,
 * khac kieu bo cuc.
 *
 * KHONG DAT MAU MOI TRONG FILE NAY. Moi mau lay tu bien trong styles.css nen
 * nen sang/toi tu theo. Mot mau viet cung o day la mot cho se sai o nen toi.
 */

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

.cms-shell {
  display: grid;
  grid-template-columns: var(--cms-ben, 244px) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.cms-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* thieu dong nay thi bang rong lam ca trang cuon ngang */
}

.cms-noi-dung {
  flex: 1;
  /* Dung het chieu rong, nhung dung tran: mot dong chu keo dai 2500px thi
     mat khong lan duoc ve dau dong sau. */
  width: 100%;
  max-width: 1600px;
  padding: 1.25rem clamp(1rem, 2.5vw, 2rem) 4rem;
}

/* --- Thanh ben ------------------------------------------------------------ */

.cms-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 0.75rem 1.5rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cms-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.6rem 1rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.cms-brand img {
  width: 26px;
  height: 26px;
  flex: none;
}

.cms-brand-sub {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.cms-nhom {
  margin: 0.9rem 0 0.3rem;
  padding: 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-nhan);
}

.cms-nhom:first-of-type {
  margin-top: 0.2rem;
}

/* Muc dieu huong. Giu ca lop "tab" va thuoc tinh data-tab: admin.js chuyen
   tab bang $$(".tab") — doi bo chon o do la mot cho nua co the sai, ma khong
   duoc loi gi. */
.cms-muc {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}

.cms-muc:hover {
  background: var(--bg-sunken);
  color: var(--ink);
}

.cms-muc.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}

.cms-muc .ico {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  stroke-width: 1.9;
}

.cms-muc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cms-muc .badge {
  margin-left: auto;
}

/* --- Thanh tren ----------------------------------------------------------- */

.cms-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 2.5vw, 2rem);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.cms-vi-tri {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-top-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: none;
}

/* --- Nut mo thanh ben tren man hinh hep ----------------------------------- */

.cms-mo {
  display: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.cms-mo .ico {
  width: 1.15rem;
  height: 1.15rem;
}

.cms-nen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: oklch(0% 0 0 / 0.45);
}

/* --- Bang du lieu --------------------------------------------------------- */

.cms-bang-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.cms-bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.cms-bang th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.6rem 0.85rem;
  background: var(--bg-sunken);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* --ink-soft tren nen chim chi dat 4.04:1 o che do sang — thieu cho chu
     nho. Chu tieu de cot von it chu va viet hoa, dung --ink khong lam nang
     mat ma dat nguong thoai mai. */
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.cms-bang td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.cms-bang tbody tr:last-child td {
  border-bottom: 0;
}

.cms-bang tbody tr:hover td {
  background: var(--bg-sunken);
}

/* Cot so: canh phai va dung chu so cung be rong, de mat so sanh duoc theo
   cot doc thay vi phai doc tung con mot. */
.cms-bang .so {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cms-bang .khong-xuong-dong {
  white-space: nowrap;
}

/* Link trong bang. Khong co quy tac nay thi trinh duyet dung mau mac dinh
   #0000EE — tren nen toi cua trang quan tri, do la 1,2:1, khong doc noi.
   Ap cho MOI bang: cac cot link Drive o Lich su va Link cung dinh loi do. */
.cms-bang a {
  color: var(--accent);
  text-decoration: none;
}
.cms-bang a:hover { text-decoration: underline; }
.cms-bang a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

/* --- Trang thai rong ------------------------------------------------------ */

.cms-rong {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.cms-rong strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ink);
  font-size: 1rem;
}

/* --- Thu nho theo man hinh ------------------------------------------------ */

/* Duoi 1100px: thanh ben chi con bieu tuong. Van bam duoc, van doc duoc bang
   title va aria-label. */
@media (max-width: 1100px) {
  .cms-shell {
    --cms-ben: 60px;
  }
  .cms-sidebar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    align-items: center;
  }
  .cms-muc span,
  .cms-brand-sub,
  .cms-brand span,
  .cms-nhom {
    display: none;
  }
  .cms-muc {
    justify-content: center;
    padding: 0.55rem;
  }
  .cms-muc .badge {
    position: absolute;
    margin: 0;
    transform: translate(0.9rem, -0.75rem);
  }
  .cms-muc {
    position: relative;
  }
}

/* Duoi 760px: thanh ben thanh ngan keo, truot ra khi bam nut. Man hinh hep
   ma van chua mot cot 60px la mat 16% chieu rong cho mot thu it dung toi. */
@media (max-width: 760px) {
  .cms-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .cms-sidebar {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    width: 244px;
    align-items: stretch;
    padding: 0.9rem 0.75rem 1.5rem;
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease-out);
  }
  .cms-shell.mo .cms-sidebar {
    transform: none;
  }
  .cms-shell.mo .cms-nen {
    display: block;
  }
  .cms-muc span,
  .cms-brand-sub,
  .cms-brand span,
  .cms-nhom {
    display: revert;
  }
  .cms-muc {
    justify-content: flex-start;
    padding: 0.5rem 0.65rem;
  }
  .cms-muc .badge {
    position: static;
    transform: none;
    margin-left: auto;
  }
  .cms-mo {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cms-sidebar {
    transition: none;
  }
}

/* --- Thanh cong cu tren cung tren man hinh hep ---------------------------- */

/* Duoi 620px thanh cong cu co the khong vua mot hang. Cho xuong dong thay vi
   de chung day ca trang ra ngoai man hinh — mot thanh cong cu lam cuon ngang
   ca trang la doi ca noi dung lay may cai nut.
   Nhung xuong dong phai do CHIEU RONG THAT quyet dinh. Truoc day cho nay ep
   `.cms-top-actions { width: 100% }`, tuc BUOC xuong dong du con thua cho:
   dung cho admin (ba nut + o tick), sai cho trang thanh vien (hai nut). Do
   that o 375px: dau trang /tai-khoan cao 115px thay vi 56px. */
@media (max-width: 620px) {
  .cms-topbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .cms-top-actions {
    /* Khong dat width. `margin-left: auto` van day khoi nay sat phai — trong
       flex co wrap, le tu dong tinh theo TUNG HANG, nen no dung ca khi khoi
       bi day xuong hang duoi. */
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  /* Chu "Tu lam moi" bo di, giu lai o tick va cham bao trang thai */
  .cms-top-actions .check-inline span {
    display: none;
  }
}

/* --- Ngan keo chi tiet ---------------------------------------------------- */

.ct-nen[hidden],
.ct-keo[hidden] {
  display: none;
}

.ct-nen {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: oklch(0% 0 0 / 0.45);
}

.ct-keo {
  position: fixed;
  z-index: 41;
  top: 0;
  right: 0;
  width: min(46rem, 100%);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px -20px oklch(0% 0 0 / 0.5);
}

.ct-dau {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ct-tieu-de {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-dau .cms-mo {
  display: grid;
  margin-left: auto;
}

.ct-than {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.2rem;
}

.ct-khoi {
  margin: 0 0 1.75rem;
}

.ct-khoi h3 {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-nhan);
}

.ct-day {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.7rem 1.2rem;
  margin: 0;
}

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

.ct-o dt {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-nhan);
}

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

/* Email trong bang thanh vien: la nut mo chi tiet, nhung nhin nhu mot lien
   ket de nguoi dung biet bam duoc. */
.ct-mo-nut {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-deep);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.ct-mo-nut:hover {
  text-decoration-color: currentColor;
}

.ct-mo-nut:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Form them quan tri vien: mot hang tren man rong, tu xuong dong khi hep.
   Dung auto-fit thay vi diem ngat co dinh — form nay nam trong vung noi dung
   co be lai khi thanh ben mo, nen do rong that khong doan duoc tu do rong
   man hinh. */
.form-hang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0 0 1.1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface-2, var(--surface));
}
.form-hang .label {
  margin: 0;
}
/* Nen --surface-2 sang hon --surface ma nhan von duoc thiet ke tren do, nen
   --ink-soft tut xuong 4.04:1 o giao dien sang. --ink-nhan la bien dat ra
   dung cho truong hop nay. */
.form-hang .label span {
  color: var(--ink-nhan);
}
.form-nut {
  display: flex;
  gap: 0.5rem;
}
/* Loi trai het chieu ngang, khong bi ep thanh mot cot hep canh cac o nhap */
.form-hang .hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-nhan);
}
/* Nhung loi thi van phai do — mau canh bao khong duoc de bien thanh mau chu
   phu, nguoi ta se khong nhan ra la co gi sai. */
.form-hang .hint.error {
  color: var(--danger-chu, var(--danger));
}

/* Phan phu trong mot o bang: email dat canh ten dang nhap, dia chi canh ma
   don. Phai nhat hon va nho hon phan chinh, neu khong mat khong biet doc cai
   nao truoc. */
.cms-bang .phu {
  color: var(--ink-nhan);
  font-size: 0.85em;
}

/* --- Thanh cong cu tren man hinh rat hep --------------------------------- */
@media (max-width: 420px) {
  .cms-topbar {
    gap: 0.5rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  /* Nut chu trong thanh nay cao 50px o kich thuoc mac dinh — gan bang ca
     chieu cao thanh. Thu gon de tieu de va nut cung nam mot hang. */
  .cms-top-actions .btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.8125rem;
    min-height: 2.1rem;
  }
}