/* trang-chu.css — Trang chủ + logo mặc định + các phần riêng bản web */

/* Logo mặc định khi phòng chưa tải logo riêng */
.logo-mac-dinh {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--radius); font-size: 30px; color: var(--em-900);
  background: linear-gradient(145deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600));
  box-shadow: var(--shadow-md);
}
a.thuong-hieu { color: inherit; text-decoration: none; }

.tc-than { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.tc-hero { text-align: center; padding: var(--space-6) 0; }
.tc-hero h1 { margin: var(--space-3) 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.1; font-weight: 700; }
.tc-hero h1 span { color: var(--gold-300); font-weight: 600; font-size: .62em; }
.tc-hero p { max-width: 640px; margin: 0 auto var(--space-5); font-size: 19px; line-height: 1.6; color: var(--ivory-70); }
.tc-nut-lon { min-height: 58px; padding: 0 32px; font-size: 19px; }
.tc-tinh-nang { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.tc-the { padding: var(--space-4); border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.tc-the i { font-size: 34px; color: var(--gold-500); }
.tc-the h3 { margin: var(--space-2) 0 6px; font-size: 19px; }
.tc-the p { margin: 0; color: var(--ivory-70); line-height: 1.55; }

.tc-hang-tieu-de { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.tc-tieu-de { font-size: 28px; font-weight: 600; }
.tc-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.tc-su-kien {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
}
.tc-su-kien .ma { font-size: 13px; letter-spacing: .2em; color: var(--gold-300); }
.tc-su-kien h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.tc-su-kien .meta { font-size: 14px; color: var(--ivory-70); }
.tc-su-kien .hang-nut { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.tc-su-kien .hang-nut .nut-chinh, .tc-su-kien .hang-nut .nut-phu { min-height: 40px; padding: 0 14px; font-size: 15px; }
.tc-chan { padding: var(--space-5); text-align: center; font-size: 13px; color: var(--ivory-45); }

.tai-khoan { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ivory-70); }
.tai-khoan img { width: 34px; height: 34px; border-radius: 50%; }

/* Màn chặn quyền (không phải chủ phòng / chưa đăng nhập) */
.man-chan { max-width: 520px; margin: 12vh auto; padding: var(--space-6) var(--space-5); text-align: center; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.man-chan h2 { font-size: 24px; margin-bottom: var(--space-3); color: var(--gold-300); }
.man-chan p { color: var(--ivory-70); line-height: 1.6; margin: 0 0 var(--space-4); }

/* Nút Quay thử trên thanh quay */
.chip-quay-thu {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px;
  border-radius: 999px; font-size: 14px; color: var(--ivory-70); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); user-select: none;
}
.chip-quay-thu input { accent-color: var(--gold-500); width: 16px; height: 16px; }
body.che-do-thu .chip-quay-thu { color: var(--ink); background: var(--gold-300); }
.nhan-thu { display: none; margin-bottom: 6px; font-size: 14px; letter-spacing: .3em; color: var(--ink); background: var(--gold-300); padding: 4px 12px; border-radius: 999px; }
body.che-do-thu .nhan-thu { display: inline-block; }

/* Logo trong cấu hình */
.khung-logo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.khung-logo img { max-height: 52px; max-width: 220px; padding: 6px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); }

@media (max-width: 560px) {
  .tc-than { padding: var(--space-4) 16px; }
  .logo-mac-dinh { width: 40px; height: 40px; font-size: 22px; }
}

a.nut-icon, a.nut-phu, a.nut-chinh, a.nut-vien-do { text-decoration: none; }
label.nut-phu { cursor: pointer; }