/* =========================================================
   PickCM – file giao diện dùng chung cho cả 2 trang
   Mục lục:
   1. Bảng màu & phông       5. Trang chủ: khoảnh khắc cộng đồng
   2. Nền tảng               6. Trang chủ: giải đấu
   3. Header                 7. Trang vận động viên
   4. Trang chủ: hero        8. Footer & màn hình lớn
   ========================================================= */

/* 1. BẢNG MÀU & PHÔNG */
:root {
  --trang: #ffffff;         /* nền trắng sáng */
  --nen-xam: #f4f5f2;       /* nền xám rất nhạt cho khối phụ */
  --den: #101817;           /* chữ đen than */
  --chu-phu: #5b6461;       /* chữ phụ (đủ tương phản trên nền trắng) */
  --lime: #b9ef26;          /* điểm nhấn lime – chỉ dùng làm nền/vạch, không làm chữ nhỏ */
  --lime-dam: #a3d618;      /* lime khi rê chuột */
  --xanh-rung: #0c3d2e;     /* xanh rừng – dùng ít */
  --xanh-navy: #0f2c4c;     /* navy theo logo – nút đăng ký, điểm nhấn trang đăng ký */
  --do-loi: #b42318;        /* đỏ báo lỗi (đủ tương phản trên nền trắng) */
  --nen-loi: #fef3f2;
  --vien: #e3e6e1;          /* đường kẻ mảnh */
  --vang-nhat: #fdf3c8;     /* nền "Chờ xét duyệt" */
  --vang-sam: #5c4600;      /* chữ "Chờ xét duyệt" */
  --bo: 8px;                /* bo góc nhỏ, gọn */

  /* Phông thường: phông hệ thống, hiển thị tốt tiếng Việt */
  --phong: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Phông tiêu đề thể thao: Avenir Next Condensed có sẵn trên Mac/iPhone;
     máy khác tự dùng phông hệ thống */
  --phong-tieu-de: "Avenir Next Condensed", "Arial Narrow", var(--phong);
}

/* 2. NỀN TẢNG */
* {
  box-sizing: border-box;
}

/* Thuộc tính hidden luôn thắng quy tắc display của các lớp (vd. .nut-vien, .hang-nut):
   phần tử đang bị JS ẩn thì không bao giờ hiện ra */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--phong);
  background: var(--trang);
  color: var(--den);
  line-height: 1.5;
  overflow-wrap: anywhere;   /* chữ dài tự xuống dòng, không tràn ngang */
}

img {
  max-width: 100%;
  display: block;
}

/* Khung chung: rộng tối đa 1320px, căn giữa, đệm hai bên */
.khung {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--den);
  outline-offset: 2px;
}

/* 3. HEADER – nền trắng, dính trên cùng */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--trang);
  border-bottom: 1px solid var(--vien);
}

/* Điện thoại: logo một hàng, menu xuống hàng dưới */
.header-trong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  padding-top: 8px;
  padding-bottom: 4px;
}

.logo {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Logo: cố định chiều cao, chiều rộng tự tính theo tỷ lệ ảnh (không kéo giãn, không cắt) */
.logo picture { display: flex; }
.logo img {
  height: 36px;              /* điện thoại: biểu tượng + chữ 3 dòng "Diễn đàn / Pickleball / Cà Mau" (logo-dien-thoai.png);
                                cân với nút Menu / Trang của tôi – Founder duyệt cỡ 36px ngày 09/11/2026 */
  width: auto;
  max-width: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 -10px;
  padding: 0;
  list-style: none;
}

.menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--chu-phu);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.menu a:hover {
  color: var(--den);
}

/* Mục đang mở: chữ đen + gạch lime nhỏ bên dưới */
.menu a[aria-current="page"] {
  color: var(--den);
}

.menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 3px;
  background: var(--lime);
}

/* Nút nổi bật trên header ("Đăng ký" hoặc "Trang của tôi") – nằm trong cụm tài khoản .cum-tk */
.nut-header {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--bo);
  background: var(--xanh-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nut-header:hover {
  background: var(--den);
}

/* Nút Đăng xuất trên header (chỉ trang cá nhân): dạng viền để khác nút chính, dùng thẻ <button> */
.nut-dang-xuat {
  border: 2px solid var(--xanh-navy);
  background: var(--trang);
  color: var(--xanh-navy);
  font-family: inherit;
  cursor: pointer;
}

.nut-dang-xuat:hover {
  background: var(--xanh-navy);
  color: #fff;
}

.nut-dang-xuat:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Khi đang ở trang đăng ký: viền lime để biết đang mở */
.nut-header[aria-current="page"] {
  box-shadow: inset 0 0 0 2px var(--lime);
}

.header-trong .menu {
  order: 3;
  flex-basis: 100%;
}

/* Cụm tài khoản (Đăng nhập / Đăng ký, hoặc Trang của tôi): LUÔN đứng sau menu (sau "Giải đấu").
   Điện thoại: một hàng riêng ngay dưới menu, căn trái. */
.cum-tk {
  order: 4;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}

.lien-ket-dn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin-left: -10px;
  color: var(--den);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.lien-ket-dn:hover {
  text-decoration: underline;
}

/* Đang ở trang Đăng nhập: gạch lime giống mục menu đang mở */
.lien-ket-dn[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* Điện thoại hẹp: thu khoảng đệm menu để 4 mục dễ nằm trên một hàng */
@media (max-width: 480px) {
  .menu {
    margin-left: -8px;
  }
  .menu a {
    padding: 0 8px;
  }
  .menu a[aria-current="page"]::after {
    left: 8px;
    right: 8px;
  }
}

/* Nút "Menu" (thu gọn điều hướng trên điện thoại). Mặc định KHÔNG hiện ở mọi độ rộng;
   chỉ hiện trên điện thoại khi phien-menu.js đã gắn lớp .co-menu-gon (không có JS → menu hiện đủ như cũ). */
.nut-menu {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--vien);
  border-radius: var(--bo);
  background: var(--trang);
  color: var(--den);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Mũi tên nhỏ: xuống khi đóng, lên khi mở */
.nut-menu::after {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.nut-menu[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ĐIỆN THOẠI (≤767px) + có JS: hàng đầu = logo | Menu | cụm tài khoản; danh sách điều hướng xổ xuống bên dưới.
   Desktop (≥768px) không bị ảnh hưởng: mọi quy tắc dưới đây nằm trong khối này. */
@media (max-width: 767px) {
  .header-trong.co-menu-gon {
    gap: 0 4px;
    padding-bottom: 8px;
  }
  .header-trong.co-menu-gon .logo {
    order: 1;
    margin-right: auto;
  }
  .header-trong.co-menu-gon .nut-menu {
    order: 2;
    display: inline-flex;
    gap: 4px;
    padding: 0 6px;
    font-size: 14px;
  }
  .header-trong.co-menu-gon .cum-tk {
    order: 3;
    flex-basis: auto;
    gap: 4px;
    padding-bottom: 0;
  }
  .header-trong.co-menu-gon .lien-ket-dn {
    margin-left: 0;
    padding: 0 4px;
    font-size: 14px;
  }
  .header-trong.co-menu-gon .cum-tk .nut-header {
    padding: 0 8px;
    font-size: 14px;
  }
  .header-trong.co-menu-gon .menu {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    margin: 4px 0 0;
    border-top: 1px solid var(--vien);
  }
  /* Menu ĐÓNG: display:none → các liên kết không nhận focus và trình đọc màn hình bỏ qua */
  .header-trong.co-menu-gon:not(.menu-mo) .menu {
    display: none;
  }
}

/* Nút chính: nền lime, chữ đen */
.nut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--bo);
  background: var(--lime);
  color: var(--den);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.nut:hover {
  background: var(--lime-dam);
}

/* Liên kết phụ: chữ đen, gạch chân lime dày */
.lien-ket-phu {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--den);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.lien-ket-phu:hover {
  text-decoration-color: var(--den);
}

/* 4. TRANG CHỦ: HERO */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* điện thoại: chữ trước, ảnh sau */
  gap: 28px;
  padding-top: 32px;
  padding-bottom: 40px;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--den);
}

/* Headline: chữ lớn, đậm, hơi nghiêng */
.hero h1 {
  margin: 0;
  font-family: var(--phong-tieu-de);
  font-size: 46px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
}

.hero-mo-ta {
  margin: 18px 0 0;
  max-width: 28em;
  font-size: 17px;
  color: var(--chu-phu);
}

.hero-hanh-dong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 26px;
}

/* Ảnh hero: giữ đủ nhóm người cười qua lưới */
.hero-anh img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% 40%;
  border-radius: var(--bo);
}

/* Đường kẻ ngăn cách đậm, mảnh */
.duong-ke {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--den);
}

/* 5. TRANG CHỦ: KHOẢNH KHẮC CỘNG ĐỒNG */
.cong-dong {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-top: 36px;
  padding-bottom: 40px;
}

.tieu-de-muc {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Vạch lime ngắn dưới tiêu đề mục */
.cong-dong-chu .tieu-de-muc::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 14px;
  background: var(--lime);
}

.mo-ta-muc {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--chu-phu);
}

.ds-anh {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.anh-cong-dong {
  margin: 0;
}

.anh-cong-dong img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bo);
  background: var(--nen-xam);
}

/* Ảnh bục nhận giải: dịch phần cắt xuống dưới để giữ số 1-2-3 trên bục
   (chỉ đổi cách hiển thị, ảnh gốc không bị sửa) */
.anh-cong-dong.anh-buc-giai img {
  object-position: 50% 75%;
}

.anh-cong-dong figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}

/* Vạch lime nhỏ sau chú thích ảnh */
.anh-cong-dong figcaption::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--lime);
}

/* 6. TRANG CHỦ: GIẢI ĐẤU */
.giai-dau {
  scroll-margin-top: 110px;   /* chừa chỗ cho header dính khi cuộn tới */
}

.giai-dau-hop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 22px 24px;
  background: var(--nen-xam);
  border-radius: var(--bo);
}

.giai-dau-hop h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.bong-nho {
  width: 28px;
  height: 28px;
}

/* Điện thoại: dòng mô tả nằm dưới tiêu đề, không có vạch dọc */
.giai-dau-hop p {
  margin: 0;
  color: var(--chu-phu);
}

/* 7. TRANG VẬN ĐỘNG VIÊN */
.noi-dung {
  padding-top: 20px;
}

.quay-lai {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--den);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.tieu-de-trang h1 {
  margin: 4px 0 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tieu-de-trang p {
  margin: 8px 0 0;
  color: var(--chu-phu);
}

.nhan-minh-hoa {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--vang-nhat);
  color: var(--vang-sam);
  font-size: 13px;
  font-weight: 700;
}

/* Điện thoại: ô tìm kiếm và bộ lọc xếp chồng */
.bo-loc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.o-nhap {
  display: block;
}

/* Nhãn hiển thị phía trên ô nhập */
.o-nhap-nhan {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.bo-loc input,
.bo-loc select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;            /* tối thiểu 16px để iPhone không tự phóng to */
  color: var(--den);
  background: var(--trang);
  border: 1px solid #c9cdc7;
  border-radius: var(--bo);
}

.bo-loc input::placeholder {
  color: #8a918e;
}

.bo-loc input:focus,
.bo-loc select:focus {
  border-color: var(--den);
}

.so-ket-qua {
  margin: 20px 0 12px;
  font-size: 14px;
  color: var(--chu-phu);
}

.danh-sach {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.the-vdv {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  object-fit: cover;
}

.thong-tin {
  flex: 1;
  min-width: 0;
}

.ho-ten {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.pick-name {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--chu-phu);
}

/* Huy hiệu điểm trình: nhãn nhỏ + số lớn, viền trái lime */
.huy-hieu {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--nen-xam);
  border-left: 3px solid var(--lime);
  text-align: center;
}

.huy-hieu-nhan {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chu-phu);
}

.huy-hieu-so {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--den);
  font-variant-numeric: tabular-nums;
}

.huy-hieu.cho-duyet {
  max-width: 92px;
  background: var(--vang-nhat);
  border-left-color: #e8c84a;
  color: var(--vang-sam);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.khong-ket-qua {
  grid-column: 1 / -1;
  padding: 40px 16px;
  text-align: center;
  color: var(--chu-phu);
  border: 1px dashed #c9cdc7;
  border-radius: var(--bo);
}

/* 7b. TRANG ĐĂNG KÝ PICK THỦ (bản thử giao diện) */
.dk-khung {
  max-width: 680px;
}

/* Băng thông báo bản thử nghiệm */
.thong-bao-thu {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 4px solid #e8c84a;
  border-radius: 6px;
  background: var(--vang-nhat);
  color: var(--vang-sam);
  font-size: 15px;
  font-weight: 700;
}

.form-dk {
  margin-top: 24px;
  padding: 20px 16px;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.chu-thich-bat-buoc {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--chu-phu);
}

.bat-buoc {
  color: var(--do-loi);
  font-weight: 700;
}

.truong {
  margin-bottom: 20px;
}

.truong label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
}

.khong-bat-buoc {
  font-weight: 500;
  color: var(--chu-phu);
}

.truong input,
.truong select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;            /* tối thiểu 16px để iPhone không tự phóng to */
  color: var(--den);
  background: var(--trang);
  border: 1px solid #c9cdc7;
  border-radius: var(--bo);
}

.truong input:focus,
.truong select:focus {
  border-color: var(--xanh-navy);
}

/* Ô đang có lỗi: viền đỏ */
.truong input[aria-invalid="true"],
.truong select[aria-invalid="true"] {
  border-color: var(--do-loi);
  background: var(--nen-loi);
}

/* Dòng gợi ý nhỏ dưới ô */
.goi-y {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--chu-phu);
}

/* Dòng báo lỗi dưới ô */
.loi {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--do-loi);
}

/* Hộp tổng hợp lỗi ở đầu form */
.hop-loi {
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid var(--do-loi);
  border-radius: var(--bo);
  background: var(--nen-loi);
  color: var(--do-loi);
  font-size: 15px;
}

.hop-loi p {
  margin: 0;
  font-weight: 700;
}

.hop-loi ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.hang-nut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 8px;
}

/* Cho thẻ <button> dùng chung kiểu .nut */
button.nut {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Nút phụ: viền navy, nền trắng */
.nut-vien {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--xanh-navy);
  border-radius: var(--bo);
  background: var(--trang);
  color: var(--xanh-navy);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.nut-vien:hover {
  background: var(--nen-xam);
}

button:focus-visible {
  outline: 3px solid var(--den);
  outline-offset: 2px;
}

/* Khối xem lại thông tin */
.xem-lai {
  margin-top: 24px;
  padding: 20px 16px;
  border: 1px solid var(--vien);
  border-top: 4px solid var(--xanh-navy);
  border-radius: var(--bo);
}

.xem-lai h2 {
  margin: 0;
  font-size: 22px;
}

.xem-lai-ghi-chu {
  margin: 8px 0 0;
  color: var(--chu-phu);
}

.ds-xem-lai {
  margin: 18px 0;
}

.ds-xem-lai div {
  padding: 10px 0;
  border-bottom: 1px solid var(--vien);
}

.ds-xem-lai dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--chu-phu);
}

.ds-xem-lai dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.ds-xem-lai .trong {
  font-weight: 400;
  color: var(--chu-phu);
  font-style: italic;
}

@media (min-width: 768px) {
  .form-dk,
  .xem-lai {
    padding: 28px;
  }
}

/* 7c. GỬI HỒ SƠ (trang đăng ký) */
.hop-loi a {
  color: inherit;
}

.trang-thai-gui {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #e8c84a;
  border-radius: var(--bo);
  background: var(--vang-nhat);
  color: var(--vang-sam);
  font-weight: 600;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.da-gui {
  border-top-color: var(--lime);
}

/* Nhóm "Hồ sơ thử đã duyệt" (trang vận động viên) */
.khu-ho-so-duyet {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--vien);
}

.tieu-de-nhom {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.ghi-chu-nhom {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--chu-phu);
}

/* 7d. TRANG QUẢN TRỊ */
.qt-header {
  flex-wrap: nowrap;
}

.nhan-quan-tri {
  margin-right: auto;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--xanh-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.nut-nho {
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
}

/* Nút từ chối: viền đỏ */
.nut-do {
  border-color: var(--do-loi);
  color: var(--do-loi);
}

.qt-tieu-de {
  margin: 20px 0 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

.qt-dang-nhap {
  max-width: 440px;
}

.thong-bao-qt {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  font-weight: 600;
}

.thong-bao-qt.thanh-cong {
  border-color: var(--lime-dam);
  border-left: 4px solid var(--lime-dam);
}

.thong-bao-qt.canh-bao {
  border-color: #e8c84a;
  background: var(--vang-nhat);
  color: var(--vang-sam);
}

.thong-bao-qt.loi {
  border-color: var(--do-loi);
  background: var(--nen-loi);
  color: var(--do-loi);
}

.qt-cong-cu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.qt-cong-cu select {
  height: 48px;
  min-width: 200px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--den);
  background: var(--trang);
  border: 1px solid #c9cdc7;
  border-radius: var(--bo);
}

.ds-qt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.the-qt {
  padding: 18px;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.the-qt-dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Nhãn trạng thái */
.nhan-tt {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

.tt-cho_duyet {
  background: var(--vang-nhat);
  color: var(--vang-sam);
}

.tt-da_duyet {
  background: var(--nen-xam);
  color: var(--den);
  border-left: 3px solid var(--lime-dam);
}

.tt-tu_choi,
.tt-khac {
  background: var(--nen-loi);
  color: var(--do-loi);
}

.qt-chi-tiet {
  margin: 14px 0 0;
}

.qt-chi-tiet div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--vien);
}

.qt-chi-tiet dt {
  font-size: 13px;
  color: var(--chu-phu);
}

.qt-chi-tiet dd {
  margin: 0;
  font-weight: 600;
}

.qt-hanh-dong {
  margin-top: 14px;
}

.qt-xac-nhan {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--bo);
  background: var(--nen-xam);
}

.qt-xac-nhan p {
  margin: 0 0 12px;
}

.truong textarea {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--den);
  background: var(--trang);
  border: 1px solid #c9cdc7;
  border-radius: var(--bo);
  resize: vertical;
}

@media (min-width: 768px) {
  .qt-chi-tiet div {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .ds-qt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 7e. ĐIỂM TRÌNH XÁC NHẬN */
/* Dòng "Cập nhật dd/mm/yyyy" trên thẻ vận động viên */
.ngay-cap-nhat {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--chu-phu);
}

/* Ô chọn "Gỡ điểm trình" */
.qt-chon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 12px;
  font-weight: 600;
  cursor: pointer;
}

.qt-chon input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.truong input:disabled {
  background: var(--nen-xam);
  color: var(--chu-phu);
}

/* Lịch sử điểm (chỉ quản trị) */
.qt-lich-su {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.qt-lich-su p {
  margin: 0;
}

.qt-lich-su-tieu-de {
  font-weight: 700;
}

.qt-lich-su ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.qt-lich-su li {
  padding: 10px 0;
  border-top: 1px solid var(--vien);
}

.qt-lich-su-diem {
  margin: 2px 0;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 7f. BẢNG ĐIỂM DIỄN ĐÀN (danh sách chính thức) */
.nhan-chinh-thuc {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--xanh-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.thong-tin-ky {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--chu-phu);
}

.bo-loc-diem {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.bo-loc-diem select,
.bo-loc-diem input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  color: var(--den);
  background: var(--trang);
  border: 1px solid #c9cdc7;
  border-radius: var(--bo);
}

.bo-loc-diem input:focus,
.bo-loc-diem select:focus {
  border-color: var(--den);
}

.khung-bang {
  overflow-x: auto;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.bang-diem {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.bang-diem th,
.bang-diem td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--vien);
}

.bang-diem th {
  background: var(--nen-xam);
  font-size: 13px;
  font-weight: 700;
  color: var(--chu-phu);
  white-space: nowrap;
}

.bang-diem td.so,
.bang-diem th.so {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cột số thứ tự, Nhóm, Điểm: KHÔNG xuống dòng (giữ "2.90" trên một dòng),
   tắt quy tắc bẻ chữ chung của trang (body: overflow-wrap: anywhere), chỉ rộng vừa nội dung. */
.bang-diem th.so,
.bang-diem td.so,
.bang-diem th.cot-nhom,
.bang-diem td.cot-nhom {
  width: 1%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Cột tên: chiếm phần còn lại, xuống dòng tự nhiên ở dấu cách;
   chỉ bẻ trong từ khi một từ quá dài (không cắt mất tên). */
.bang-diem td.cot-ten {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.bang-diem td.diem {
  font-weight: 800;
}

.trung-ten {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--chu-phu);
}

/* v7: nhãn nguồn "Hội đồng PickCM xác nhận ngày …" */
.nguon-hoi-dong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--chu-phu);
  font-style: italic;
}

/* Điện thoại hẹp (≤ 480px): giảm khoảng đệm để tên có thêm chỗ */
@media (max-width: 480px) {
  .bang-diem {
    font-size: 14px;
  }
  .bang-diem th,
  .bang-diem td {
    padding: 8px 6px;
  }
}

@media (min-width: 768px) {
  .bo-loc-diem {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

/* 8. FOOTER */
.footer {
  margin-top: 48px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--vien);
  font-size: 14px;
  color: var(--chu-phu);
}

.footer p {
  margin: 0;
}

.footer strong {
  color: var(--den);
}

/* MÀN HÌNH TABLET (từ 768px) */
@media (min-width: 768px) {
  .khung {
    padding-left: 32px;
    padding-right: 32px;
  }
  .header-trong {
    flex-wrap: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .logo img {
    height: 48px;            /* tablet & desktop: logo ngang "Diễn đàn Pickleball Cà Mau" */
  }
  /* Màn hình rộng: logo | menu (đẩy sang phải) | cụm tài khoản, cùng một hàng (thứ tự theo HTML) */
  .header-trong .menu {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }
  .cum-tk {
    order: 0;
    flex-basis: auto;
    flex-shrink: 0;
    padding-bottom: 0;
  }
  .lien-ket-dn {
    margin-left: 0;
  }
  .nut-header {
    min-height: 44px;
    font-size: 15px;
  }
  .menu {
    margin-left: 0;
  }
  .hero h1 {
    font-size: 64px;
  }
  .giai-dau {
    scroll-margin-top: 90px;
  }
  /* Màn hình rộng: tiêu đề và mô tả cùng hàng, ngăn bằng vạch dọc mảnh */
  .giai-dau-hop {
    flex-wrap: nowrap;
  }
  .giai-dau-hop p {
    padding-left: 20px;
    border-left: 1px solid #c9cdc7;
  }
  .ds-anh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bo-loc {
    flex-direction: row;
    align-items: flex-end;
  }
  .o-tim {
    flex: 1;
  }
  .o-chon {
    width: 240px;
  }
  .danh-sach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MÀN HÌNH DESKTOP (từ 1024px) */
@media (min-width: 1024px) {
  /* Hero: chữ 40% bên trái, ảnh 60% bên phải */
  .hero {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: center;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .hero h1 {
    font-size: 72px;
  }
  .hero-anh img {
    aspect-ratio: 16 / 10;
    object-position: 40% 35%;
  }
  /* Khoảnh khắc cộng đồng: chữ bên trái, 2 ảnh bên phải */
  .cong-dong {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .tieu-de-muc {
    font-size: 34px;
  }
  .danh-sach {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* P2 – TÀI KHOẢN THÀNH VIÊN */
.nhom-tai-khoan {
  margin: 8px 0 0;
  padding: 16px;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.nhom-tai-khoan legend {
  padding: 0 6px;
  font-weight: 800;
}

.truong-chon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.truong-chon input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 2px 0 0;
  flex: none;
}

.tv-nhan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.tv-nhan li {
  padding: 6px 12px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  background: var(--nen-xam);
  font-size: 14px;
  font-weight: 700;
}

.tv-diem {
  font-size: 18px;
  font-weight: 700;
}

.tv-lich-su caption {
  padding: 8px 0;
  text-align: left;
  font-weight: 700;
}

/* S3 – TRANG CỦA TÔI: thẻ hồ sơ, sửa thông tin, quyền riêng tư, đổi mật khẩu */
.tv-the {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.tv-avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: var(--xanh-navy);
  font-size: 30px;
}

.tv-the-chu {
  min-width: 0;
}

.tv-the-chu p {
  margin: 0;
  overflow-wrap: anywhere;
}

.tv-pick {
  font-size: 24px;
  font-weight: 800;
}

.tv-ho-ten,
.tv-noi-choi {
  color: var(--chu-phu);
  font-size: 15px;
}

/* Trình tự đánh giá: tách hẳn khỏi điểm được xác nhận (chữ phụ + vạch trái) */
.tv-tu-danh-gia {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--vien);
  color: var(--chu-phu);
  font-size: 15px;
}

.tv-hop {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  background: var(--nen-xam);
}

.tv-hop p {
  margin: 0 0 6px;
}

.tv-canh-bao {
  border-color: var(--do-loi);
  background: var(--nen-loi);
}

.tv-form {
  margin-top: 12px;
}

.tv-nhom-chon {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
}

.tv-nhom-chon legend {
  padding: 0 6px;
  font-weight: 700;
}

.tv-nhom-chon label.truong-chon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
}

.tv-nhom-chon input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tv-hien-trang {
  margin: 0 0 6px;
  font-weight: 700;
}

.tv-tb {
  margin: 12px 0 0;
  font-weight: 700;
}

.tv-tb.tb-dat {
  color: var(--xanh-rung);
}

.tv-tb.tb-loi {
  color: var(--do-loi);
}

.tv-form input[readonly] {
  background: var(--nen-xam);
  color: var(--chu-phu);
}

/* S4 – DANH TÍNH DÙNG CHUNG + HỒ SƠ CÔNG KHAI */
.danh-tinh {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.danh-tinh-chu {
  min-width: 0;
}

.danh-tinh-chu p {
  margin: 0;
  overflow-wrap: anywhere;
}

.danh-tinh-ten {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.danh-tinh-phu {
  margin-top: 3px;
  color: var(--chu-phu);
  font-size: 14px;
}

/* Cả thẻ là một liên kết tới hồ sơ công khai */
.the-vdv-lien-ket {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: -16px;
  padding: 16px;
  border-radius: var(--bo);
  color: inherit;
  text-decoration: none;
}

.the-vdv-lien-ket:hover .danh-tinh-ten {
  text-decoration: underline;
}

.hs-danh-tinh .avatar {
  width: 72px;
  height: 72px;
  font-size: 30px;
}

.hs-danh-tinh .danh-tinh-ten {
  font-size: 24px;
  font-weight: 800;
}

.hs-noi-dung {
  margin-top: 16px;
}

/* Nhãn "Bản xem trước": nổi bật, không thể nhầm với trang công khai thật */
.hs-xem-truoc {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 2px dashed var(--xanh-navy);
  border-radius: var(--bo);
  background: var(--nen-xam);
  font-weight: 700;
}

.hs-nhan-nguon {
  margin: 0 0 6px;
  font-weight: 700;
}

/* S5 – ẢNH ĐẠI DIỆN
   - Ảnh (đã được máy chủ tái mã hóa) PHỦ LÊN vòng tròn chữ cái; tải lỗi thì danh-tinh.js gỡ ảnh, chữ cái vẫn còn.
   - Khung cắt: ảnh xem trước (blob:) dịch/phóng bằng transform; vòng tròn mờ chỉ là hướng dẫn, vùng gửi đi là HÌNH VUÔNG. */
.avatar {
  position: relative;
  overflow: hidden;
}

.avatar-anh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.anh-hop .truong {
  margin-top: 12px;
}

.o-chon-anh {
  display: block;
  max-width: 100%;
  min-height: 44px;
  font-size: 16px;
}

.khung-cat {
  margin-top: 12px;
}

.cat-hang {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.vung-cat {
  position: relative;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #1b1b1b;
  touch-action: none;
  cursor: grab;
}

.vung-cat:focus-visible {
  outline: 3px solid var(--xanh-navy);
  outline-offset: 3px;
}

.vung-cat img,
.cat-tron img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.vung-cat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.cat-ben .goi-y {
  margin: 0 0 6px;
}

.cat-tron {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  background: #1b1b1b;
}

#cat-phong {
  width: 100%;
  max-width: 320px;
  min-height: 44px;
}

.qt-anh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.qt-anh-nho {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}

/* S6 – YÊU CẦU XÉT TRÌNH */
.xt-ds {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.xt-ds li {
  padding: 10px 0;
  border-top: 1px solid var(--vien);
}

.xt-tt {
  font-weight: 700;
}

.xt-nd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#nut-gui-xt {
  min-height: 44px;
}

/* v6: lời nhắn của quản trị trong yêu cầu xét trình (thành viên thấy) */
.xt-ph {
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* v6: kết quả tìm dòng điểm Diễn đàn để tự chọn (mỗi dòng: chữ + nút Chọn; điện thoại xuống dòng gọn) */
.dt-ket-qua {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.dt-ket-qua li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--vien);
}

.dt-ket-qua li span {
  overflow-wrap: anywhere;
}

.dt-ket-qua button,
#nut-bo-chon-dt {
  min-height: 44px;
}

.qt-tieu-de-phu {
  margin: 32px 0 8px;
  font-size: 22px;
}

/* =========================================================
   Sprint v9 – GIẢI ĐẤU (danh sách, chi tiết, chia sẻ, quản trị)
   Cùng bảng màu PickCM: đen than + lime + navy; thẻ poster, nhãn trạng thái rõ ràng, bố cục 1 cột trên điện thoại.
   ========================================================= */
.an-khoi-man-hinh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lien-ket-giai {
  font-weight: 700;
  color: var(--den);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.tieu-de-giai .nhan-tren {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chu-phu);
}
.tieu-de-giai h1 {
  font-family: var(--phong-tieu-de);
  font-style: italic;
  font-size: 44px;
  text-transform: uppercase;
}
.luoi-giai {
  list-style: none;
  margin: 24px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.the-giai {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vien);
  border-radius: 14px;
  background: var(--trang);
  box-shadow: 0 1px 2px rgba(16, 24, 23, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.the-giai:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 24, 23, 0.10);
}
.the-giai-anh { display: block; color: inherit; text-decoration: none; }
.the-giai-poster,
.poster-giai {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--nen-xam);
}
.the-giai-poster { aspect-ratio: 1200 / 630; }
.the-giai-da-ket-thuc .the-giai-poster { filter: grayscale(0.6); }
.poster-mac-dinh {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px 20px;
  color: var(--trang);
  background:
    radial-gradient(circle at 85% 20%, var(--lime) 0 14%, transparent 14.5%),
    linear-gradient(135deg, var(--xanh-navy) 0%, var(--xanh-rung) 100%);
}
.the-giai-poster.poster-mac-dinh { aspect-ratio: 1200 / 630; }
.poster-mac-dinh span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--lime);
}
.poster-mac-dinh strong {
  font-family: var(--phong-tieu-de);
  font-style: italic;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}
.the-giai-than {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px 18px;
  flex: 1;
}
.the-giai-ten {
  margin: 4px 0 2px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}
.the-giai-ten a { color: var(--den); text-decoration: none; }
.the-giai-ten a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }
.the-giai-dong {
  margin: 0;
  color: var(--chu-phu);
  font-size: 15px;
}
.bieu-tuong {
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
  color: var(--den);
}
.nut-xem-giai {
  margin-top: auto;
  min-height: 44px;
  font-size: 15px;
}
.the-giai-than .nut-xem-giai { margin-top: 10px; }
.giai-trong {
  margin: 24px 0;
  padding: 28px 24px;
  border-radius: 14px;
  background: var(--nen-xam);
  color: var(--chu-phu);
  font-size: 17px;
}
.nhan-giai,
.nhan-cong-bo {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nhan-sap-dien-ra { background: var(--lime); color: var(--den); }
.nhan-dang-dien-ra { background: var(--xanh-navy); color: var(--trang); }
.nhan-da-ket-thuc { background: var(--vien); color: var(--chu-phu); }
.nhan-cong-bo-nhap { background: var(--vang-nhat); color: var(--vang-sam); }
.nhan-cong-bo-xuat-ban { background: #dff5e7; color: #0c5132; }
.nhan-cong-bo-an { background: var(--nen-xam); color: var(--chu-phu); border: 1px solid var(--vien); }

/* Chi tiết */
.chi-tiet-giai {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 12px;
}
.poster-lon { overflow: hidden; border-radius: 14px; background: var(--nen-xam); }
.poster-lon .poster-giai { max-height: 640px; object-fit: contain; }
.poster-lon .poster-mac-dinh { aspect-ratio: 1200 / 630; }
.dau-giai h1 {
  margin: 10px 0 14px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ds-tt-giai {
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.tt-giai {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 14px;
  border-left: 4px solid var(--lime);
  background: var(--nen-xam);
  border-radius: 0 var(--bo) var(--bo) 0;
}
.tt-giai dt {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chu-phu);
}
.tt-giai dd { margin: 0; font-size: 17px; font-weight: 600; }
.thanh-chia-se {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.nut-chia-se {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--den);
  border-radius: var(--bo);
  background: var(--trang);
  color: var(--den);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.nut-chia-se:hover { background: var(--den); color: var(--trang); }
.nut-facebook { border-color: #1877f2; background: #1877f2; color: #ffffff; }
.nut-facebook:hover { background: #0f5fcc; border-color: #0f5fcc; color: #ffffff; }
.nut-chia-se.tat,
.nut-chia-se.tat:hover { opacity: 0.45; cursor: not-allowed; }
.tb-sao-chep { font-size: 14px; font-weight: 700; color: #0c5132; }
.ghi-chu-chia-se { margin: 8px 0 0; font-size: 13px; color: var(--chu-phu); }
.cot-noi-dung-giai { display: grid; gap: 20px; min-width: 0; }
.muc-giai {
  padding-top: 18px;
  border-top: 1px solid var(--vien);
}
.muc-giai h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
}
.muc-giai h2::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lime);
  vertical-align: middle;
}
.muc-giai p,
.muc-giai li { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.muc-giai ul { padding-left: 22px; }
.muc-giai a { color: var(--xanh-navy); font-weight: 600; }
.lien-ket-tai-lieu { font-weight: 700; }
.quay-lai-cuoi { margin-top: 24px; }
.bang-xem-truoc {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--bo);
  background: var(--vang-nhat);
  color: var(--vang-sam);
  font-weight: 800;
}

/* Quản trị */
.khu-giai-dau { margin-top: 36px; }
.form-giai {
  margin: 16px 0 20px;
  padding: 18px;
  border: 2px solid var(--vien);
  border-radius: 12px;
  background: var(--trang);
}
.form-giai textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid var(--vien);
  border-radius: var(--bo);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.form-giai textarea:focus { outline: none; border-color: var(--den); }
.form-giai textarea[aria-invalid="true"] { border-color: var(--do-loi); }
.ghi-chu-form { margin: 0 0 14px; font-size: 14px; color: var(--chu-phu); }
.hai-cot { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.khu-poster-giai {
  margin: 8px 0 16px;
  padding: 14px;
  border-radius: var(--bo);
  background: var(--nen-xam);
}
.nhan-o { margin: 0 0 8px; font-weight: 700; }
.anh-poster-giai { display: block; max-width: 100%; max-height: 260px; margin-bottom: 10px; border-radius: var(--bo); }
.nut-chon-tep { cursor: pointer; }
.ds-qt-giai { list-style: none; padding: 0; }
.the-qt-giai {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--vien);
  border-radius: 12px;
}
.qt-giai-poster {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--bo);
}
div.qt-giai-poster { display: flex; align-items: flex-end; padding: 10px; box-sizing: border-box; }
.qt-giai-nhan { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.qt-giai-ten { margin: 6px 0 4px; font-size: 18px; }
.qt-giai-dong { margin: 0 0 4px; font-size: 14px; color: var(--chu-phu); overflow-wrap: anywhere; }
.qt-giai-url code { font-size: 13px; }
.qt-giai-nut { flex-wrap: wrap; gap: 8px; margin-top: 8px; }

@media (min-width: 640px) {
  .luoi-giai { grid-template-columns: repeat(2, 1fr); }
  .hai-cot { grid-template-columns: 1fr 1fr; }
  .the-qt-giai { grid-template-columns: 220px 1fr; }
}
@media (min-width: 1024px) {
  .luoi-giai { grid-template-columns: repeat(3, 1fr); }
  .chi-tiet-giai { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 36px; align-items: start; }
  .chi-tiet-giai .poster-lon { position: sticky; top: 90px; }
  .dau-giai h1 { font-size: 38px; }
  .tieu-de-giai h1 { font-size: 56px; }
}

/* Thử nghiệm cộng đồng: trang Quyền riêng tư */
.khoi-chu { max-width: 720px; line-height: 1.65; }
.khoi-chu h2 { font-size: 20px; margin: 28px 0 8px; }
.khoi-chu ul { padding-left: 22px; margin: 0 0 8px; }
.khoi-chu li { margin-bottom: 6px; }

/* Thử nghiệm cộng đồng: ô mật khẩu có nút Hiện/Ẩn + thước đo độ mạnh (mat-khau.js) */
.o-mk-boc { position: relative; }
.o-mk-boc input { padding-right: 64px; }
.nut-hien-mk {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 36px; min-width: 52px; padding: 0 10px; border: 1px solid #c9d3df; border-radius: 8px;
  background: #fff; color: #0f2c4c; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.nut-hien-mk:focus-visible { outline: 3px solid #8fbf1f; outline-offset: 2px; }
.do-manh-mk { margin-top: 8px; }
.vach-mk { display: block; height: 6px; border-radius: 3px; background: #e3e8ee; overflow: hidden; position: relative; }
.vach-mk::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; transition: width .2s; }
.do-manh-mk[data-muc="0"] .vach-mk::after { width: 15%; background: #c0392b; }
.do-manh-mk[data-muc="1"] .vach-mk::after { width: 35%; background: #c0392b; }
.do-manh-mk[data-muc="2"] .vach-mk::after { width: 65%; background: #d68910; }
.do-manh-mk[data-muc="3"] .vach-mk::after { width: 100%; background: #1e8449; }
.chu-do-manh { margin: 6px 0 0; font-size: 14px; color: #33475b; }
.mk-giai-thich { margin-top: 8px; font-size: 14px; color: #33475b; }
.mk-giai-thich summary { cursor: pointer; font-weight: 600; color: #0f2c4c; min-height: 32px; display: flex; align-items: center; }
.mk-giai-thich ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.55; }
.mk-giai-thich li { margin-bottom: 6px; }

/* Logo ngang "Diễn đàn Pickleball Cà Mau" rộng hơn logo cũ: máy tính bảng (768–1023px) thu nhỏ logo,
   menu không xuống dòng → header vẫn MỘT hàng */
@media (min-width: 768px) and (max-width: 1023px) {
  .logo img { height: 38px; }
  .header-trong .menu { flex-wrap: nowrap; white-space: nowrap; }
}

/* Điện thoại hẹp (≤400px): logo có chữ 3 dòng + Menu + "Đăng nhập" + "Đăng ký" vẫn MỘT hàng */
@media (max-width: 400px) {
  .header-trong.co-menu-gon { gap: 0 2px; padding-left: 12px; padding-right: 12px; }
  .header-trong.co-menu-gon .nut-menu { padding: 0 5px; }
  .header-trong.co-menu-gon .cum-tk { gap: 2px; }
  .header-trong.co-menu-gon .lien-ket-dn { padding: 0 3px; }
  .header-trong.co-menu-gon .cum-tk .nut-header { padding: 0 7px; }
}