html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Footer nằm sát mép dưới ở trang ngắn (đăng nhập, trang lỗi) nhờ thân trang giãn ra chiếm chỗ
   còn lại. Không định vị tuyệt đối như template gốc vì footer giờ cao theo nội dung của nó. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .container {
  flex: 1 0 auto;
}

/* Tông màu và tỉ lệ dùng chung cho các trang công khai. Đổi tông màu thì sửa ở đây,
   không rải mã màu vào từng view. */
:root {
  /* Khung trang tối (navbar, footer, tab ngày và mục sidebar đang mở) và màu nhấn hổ phách cho
     nút hành động chính. Thân trang, form, bảng quản trị giữ nền trắng mặc định của Bootstrap. */
  --cb-ink: #14161a;
  --cb-ink-2: #22262e;
  --cb-amber: #f5b301;
  --cb-amber-hover: #dda000;
  --cb-amber-ink: #1a1a1a;

  --poster-ratio: 2 / 3;
  --poster-empty-bg: #e9ecef;
  --poster-empty-color: #6c757d;

  /* Bốn màu dưới đây là ngôn ngữ trạng thái của sơ đồ ghế, không phải màu hạng ghế. */
  --seat-min-size: 28px;
  --seat-max-size: 48px;
  --seat-border: #ced4da;
  --seat-selected: #0d6efd;
  --seat-taken: #dc3545;
  --seat-disabled: #e9ecef;
  --seat-screen-bg: #dee2e6;

  /* Màu hạng ghế nằm ở viền trái từng ghế, seat-map.js gán lại cho ghế còn trống. */
  --seat-type-color: transparent;
}

/* Khung trang tối: navbar + footer. data-bs-theme="dark" của Bootstrap 5.3 lo màu chữ, viền,
   nút hamburger, dropdown - không phải viết tay từng thứ. */
.cb-frame {
  background-color: var(--cb-ink);
}

.cb-frame .navbar-brand {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cb-frame .navbar-brand .bi {
  color: var(--cb-amber);
  margin-right: 0.35rem;
}

.cb-frame .nav-link.active {
  color: var(--cb-amber) !important;
}

footer.cb-frame {
  color: rgba(255, 255, 255, 0.65);
}

footer.cb-frame a {
  color: rgba(255, 255, 255, 0.85);
}

/* Nút hành động chính. Chỉ đổi biến ở phạm vi .btn-cta, không đè --bs-primary toàn cục. */
.btn-cta {
  --bs-btn-bg: var(--cb-amber);
  --bs-btn-border-color: var(--cb-amber);
  --bs-btn-color: var(--cb-amber-ink);
  --bs-btn-hover-bg: var(--cb-amber-hover);
  --bs-btn-hover-border-color: var(--cb-amber-hover);
  --bs-btn-hover-color: var(--cb-amber-ink);
  --bs-btn-active-bg: var(--cb-amber-hover);
  --bs-btn-active-border-color: var(--cb-amber-hover);
  --bs-btn-active-color: var(--cb-amber-ink);
  --bs-btn-disabled-bg: var(--cb-amber);
  --bs-btn-disabled-border-color: var(--cb-amber);
  --bs-btn-disabled-color: var(--cb-amber-ink);
  --bs-btn-focus-shadow-rgb: 245, 179, 1;
  font-weight: 600;
}

/* Hero trang chủ: poster phim đang chiếu đầu danh sách làm nền, phủ tối để đọc được chữ. Ảnh
   nền là thẻ img chứ không phải background-image để view không có style inline; nới ảnh ra
   ngoài khung 4% mỗi phía để viền mờ của blur không lộ mép. */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--cb-ink-2);
  color: #fff;
}

.hero-bg {
  position: absolute;
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center 20%;
  filter: blur(3px) brightness(0.6);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 26, 0.95) 0%, rgba(20, 22, 26, 0.72) 55%, rgba(20, 22, 26, 0.25) 100%);
}

.hero-body {
  position: relative;
  padding: 2rem 1.25rem;
}

.hero-body .lead {
  color: rgba(255, 255, 255, 0.82);
  max-width: 34rem;
}

@media (min-width: 768px) {
  .hero-body {
    padding: 3.5rem 3rem;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Thẻ phim: giữ nguyên cấu trúc _MovieCard, thêm nhô lên khi rê chuột và nhãn tuổi trên góc
   poster. */
.movie-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.movie-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.14);
}

.movie-age {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
}

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

  .movie-card:hover {
    transform: none;
  }
}

/* Poster phim luôn giữ tỉ lệ 2:3 dù ảnh gốc kích thước nào, nhờ vậy lưới thẻ phim không bị
   so le khi một phim có ảnh dọc và một phim có ảnh ngang. */
.movie-poster {
  width: 100%;
  aspect-ratio: var(--poster-ratio);
  object-fit: cover;
}

.movie-poster-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--poster-empty-bg);
  color: var(--poster-empty-color);
  font-size: 0.875rem;
}

/* Khung trailer ở chi tiết phim: giữ tỉ lệ 16:9 nhưng không kéo rộng hết cột nội dung. */
.movie-trailer {
  max-width: 560px;
}

/* Tab ngày ở chi tiết phim: một hàng, cuộn ngang trong khung của nó ở màn hình hẹp. */
.day-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}

.day-tabs .nav-link {
  white-space: nowrap;
  color: #495057;
  border: 1px solid #dee2e6;
  line-height: 1.15;
}

.day-tabs .nav-link small {
  display: block;
  font-size: 0.7rem;
  opacity: 0.75;
}

.day-tabs .nav-link.active {
  background-color: var(--cb-ink);
  border-color: var(--cb-ink);
  color: #fff;
}

.showtime-card {
  transition: border-color 0.15s ease;
}

.showtime-card:hover {
  border-color: var(--cb-ink);
}

.showtime-time {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.seat-screen {
  background-color: var(--seat-screen-bg);
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25rem;
}

/* Chỗ cuộn ngang duy nhất của trang là khung này. min-width đặt trên lưới chứ không đặt trên
   khung cuộn: đặt nhầm lên khung là đẩy cả trang rộng ra và điện thoại phải cuộn ngang. */
.seat-wrapper {
  overflow-x: auto;
}

/* Bề ngang một ghế có cả sàn lẫn trần. Thiếu trần thì cột nở hết khung chứa: ở 1200px mỗi ghế
   thành 87px trong khi nhãn ghế chỉ 11px, và riêng lưới ghế cao 742px nên phải cuộn dọc mới
   nhìn hết sơ đồ. Căn giữa bằng width: fit-content + margin chứ không bằng justify-content:
   center, vì khi lưới rộng hơn khung cuộn (điện thoại) thì căn giữa đẩy phần tràn sang cả bên
   trái, mà bên trái thì cuộn tới không được. */
.seat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(var(--seat-min-size), var(--seat-max-size)));
  gap: 6px;
  min-width: 480px;
  width: fit-content;
  margin-inline: auto;
}

.seat {
  aspect-ratio: 1;
  border: 1px solid var(--seat-border);
  border-left: 4px solid var(--seat-type-color);
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  font-size: 11px;
}

.seat.selected {
  background-color: var(--seat-selected);
  border-color: var(--seat-selected);
  color: #fff;
}

.seat.taken {
  background-color: var(--seat-taken);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.65;
}

.seat.disabled {
  background-color: var(--seat-disabled);
  cursor: not-allowed;
}

/* Lưới chỉ để xem ở trang tình trạng ghế: ô ghế là thẻ div chứ không phải button, nên phải tự
   căn chữ và bỏ con trỏ bàn tay - .seat vốn dựng cho nút bấm được. */
.seat-grid-static .seat {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* Ô màu của chú thích dùng lại đúng bốn class trên để màu chỉ khai một chỗ. */
.seat-legend .seat {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25rem;
}

.seat-legend dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
}

/* _AdminLayout: sidebar cố định từ lg, dưới đó là offcanvas do Bootstrap lo (offcanvas-lg).
   Cột nội dung phải là minmax(0, 1fr) ở mọi độ rộng: cột grid mặc định có sàn bằng bề ngang
   min-content của bảng bên trong, nên ở 375px cột nở theo bảng và đẩy cả trang rộng ra thay vì
   để .table-responsive cuộn. */
.admin-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .admin-shell {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 2rem;
  }

  .admin-sidebar {
    position: sticky;
    top: 1rem;
    align-self: start;
    border-right: 1px solid #dee2e6;
    padding-right: 1rem;
  }
}

.admin-sidebar .offcanvas-body {
  flex-direction: column;
}

.admin-sidebar-heading {
  letter-spacing: 0.06em;
}

.admin-sidebar .nav-link {
  color: #343a40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.admin-sidebar .nav-link .bi {
  color: #6c757d;
}

.admin-sidebar .nav-link.active {
  background-color: var(--cb-ink);
  color: #fff;
}

.admin-sidebar .nav-link.active .bi {
  color: var(--cb-amber);
}