/* ════════════════════════════════════
   BICPHIM HOME — Full rebuild
   Navy → Black · Green accent #00c853
   ════════════════════════════════════ */
:root {
  --bg:       #000;
  --surface:  #0f0f0f;
  --card:     #141414;
  --border:   rgba(255,255,255,.08);
  --accent:   #00c853;
  --accent2:  #69f0ae;
  --yellow:   #ffa502;
  --orange:   #ff6b35;
  --text:     #eaedf2;
  --muted:    #6b7280;
  --sub:      #9ca3af;
  --r:        8px;
  --r-sm:     5px;
}

/* Reset & base */
body, html { background: var(--bg) !important; }
.bp-page { font-family: system-ui,-apple-system,sans-serif; color: var(--text); }
a { text-decoration: none; color: inherit; }

/* ── Max-width wrapper ── */
.bp-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ══════════════════════════════
   SECTION HEADING
   ══════════════════════════════ */
.bp-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.bp-sec-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.bp-sec-title .bar {
  width: 4px; height: 20px;
  background: var(--accent);
  border-radius: 2px;
}
.bp-sec-title i { color: var(--accent); font-size: 14px; }
.bp-more {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  display: flex; align-items: center; gap: 4px;
  transition: gap .2s;
}
.bp-more:hover { gap: 7px; }












/* ══════════════════════════════
   MOVIE CARD — dùng cho tất cả grid
   ══════════════════════════════ */

/* Override thumbnail.php theme cũ */
.bp-grid ul.list-movies {
  display: contents !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.bp-grid ul.list-movies li.item-movie {
  display: block !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  width: 100% !important; float: none !important;
}
.bp-grid .item-movie {
  background: var(--card) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: transform .22s, box-shadow .22s, border-color .22s !important;
  display: block !important;
}
.bp-grid .item-movie:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.6) !important;
  border-color: rgba(0,200,83,.35) !important;
}
.bp-grid .item-movie > a {
  display: block !important; position: relative !important;
  text-decoration: none !important; color: inherit !important;
}
/* Poster 2:3 portrait uniform */
.bp-grid .item-movie .image {
  position: relative !important; width: 100% !important;
  aspect-ratio: 2 / 3 !important; overflow: hidden !important;
  display: block !important; background: #0a0a0a !important;
}
.bp-grid .item-movie .image img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  transition: transform .35s !important; display: block !important;
}
.bp-grid .item-movie:hover .image img { transform: scale(1.06) !important; }
/* Bỏ gradient overlay cũ + override theme .movie-play::after */
.bp-grid .item-movie .image::after { display: none !important; }
.bp-grid .item-movie .image .movie-play { position: static !important; }
.bp-grid .item-movie .image .movie-play::after,
.bp-grid .item-movie .image .movie-play::before {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
/* Ensure img fills the aspect-ratio box */
.bp-grid .item-movie .image .movie-play img,
.bp-grid .item-movie .image .movie-thumbnail {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}
/* Play icon */
.bp-grid .item-movie .image::before {
  content: '▶' !important; position: absolute !important;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.7) !important;
  width: 42px; height: 42px;
  background: rgba(0,200,83,.9) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important; color: #000 !important;
  opacity: 0 !important; line-height: 42px !important;
  text-align: center !important; padding-left: 2px !important;
  transition: opacity .22s, transform .22s !important; z-index: 3 !important;
}
.bp-grid .item-movie:hover .image::before {
  opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important;
}
/* Quality badge — .label là class thật từ thumbnail.php */
.bp-grid .item-movie .image .label,
.bp-grid .item-movie .image .label-quality,
.bp-grid .item-movie .image [class*="quality"],
.bp-grid .item-movie .image .item-quality {
  position: absolute !important; top: 7px !important; left: 7px !important;
  z-index: 2 !important; font-size: 9.5px !important; font-weight: 800 !important;
  padding: 2px 6px !important; border-radius: 3px !important;
  letter-spacing: .4px !important; text-transform: uppercase !important;
  background: var(--yellow) !important; color: #000 !important; line-height: 1.4 !important;
}
/* Episode badge */
.bp-grid .item-movie .image .episode,
.bp-grid .item-movie .image .item-ep {
  position: absolute !important; top: 7px !important; right: 7px !important;
  z-index: 2 !important; font-size: 9.5px !important; font-weight: 700 !important;
  padding: 2px 7px !important; border-radius: 3px !important;
  background: rgba(0,0,0,.72) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
/* Views */
.bp-grid .item-movie .image .view,
.bp-grid .item-movie .image .views { display: none !important; }
/* TITLE OVERLAY BLUR */
.bp-grid .item-movie h2.title-movie,
.bp-grid .item-movie .title-movie,
.bp-grid .item-movie .name-movie {
  position: absolute !important; bottom: 0 !important;
  left: 0 !important; right: 0 !important; z-index: 4 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(0,0,0,.55) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  line-height: 1.4 !important; color: #fff !important;
  margin: 0 !important; padding: 9px 10px 11px !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  white-space: normal !important; height: auto !important;
  transition: background .2s !important;
}
.bp-grid .item-movie:hover h2.title-movie,
.bp-grid .item-movie:hover .title-movie,
.bp-grid .item-movie:hover .name-movie {
  background: rgba(0,200,83,.55) !important;
}
/* Ẩn meta dưới title */
.bp-grid .item-movie .info-movie,
.bp-grid .item-movie .meta-movie,
.bp-grid .item-movie .time-movie,
.bp-grid .item-movie .description,
.bp-grid .item-movie .movie-desc { display: none !important; }

/* ── Grid columns ── */
.bp-grid {
  display: grid;
  gap: 12px;
}
.bp-grid-5 { grid-template-columns: repeat(5, 1fr); }
.bp-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media(max-width:1100px) {
  .bp-grid-5 { grid-template-columns: repeat(4,1fr); }
}
@media(max-width:800px) {
  .bp-grid-5, .bp-grid-4 { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:540px) {
  .bp-grid-5, .bp-grid-4 { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════
   FULL-WIDTH SECTIONS
   ══════════════════════════════ */
.bp-section-full {
  padding: 0 0 28px;
}

/* ══════════════════════════════
   2-COLUMN LAYOUT
   (bắt đầu từ phim hot trở xuống)
   ══════════════════════════════ */
.bp-two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
.bp-two-col-main {}
.bp-two-col-side {
  position: sticky;
  top: 108px; /* header + nav height */
}
@media(max-width:960px) {
  .bp-two-col { grid-template-columns: 1fr; }
  .bp-two-col-side { position: static; }
}

/* Section inside 2-col */
.bp-section-2col { margin-bottom: 28px; }

/* ══════════════════════════════
   SIDEBAR
   ══════════════════════════════ */
.bp-sb {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}
.bp-sb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--text);
}
.bp-sb-head i { color: var(--orange); font-size: 13px; }

/* Sidebar ranked list */
.bp-rank-list { padding: 4px 0; }
.bp-rank-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.bp-rank-item:last-child { border-bottom: none; }
.bp-rank-item:hover { background: rgba(255,255,255,.04); }
.bp-rank-num {
  font-size: 18px; font-weight: 900;
  width: 22px; flex-shrink: 0; text-align: center;
  line-height: 1; color: var(--muted);
}
.bp-rank-item:nth-child(1) .bp-rank-num { color: var(--orange); }
.bp-rank-item:nth-child(2) .bp-rank-num { color: #b8c0cc; }
.bp-rank-item:nth-child(3) .bp-rank-num { color: #cd7f32; }
.bp-rank-thumb {
  width: 46px; height: 65px;
  border-radius: 4px; overflow: hidden;
  flex-shrink: 0; background: #111;
}
.bp-rank-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.bp-rank-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 15px;
}
.bp-rank-info { flex: 1; min-width: 0; }
.bp-rank-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--text); line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.bp-rank-item:hover .bp-rank-name { color: var(--accent); }
.bp-rank-ep {
  font-size: 11px; font-weight: 600;
  color: var(--accent); margin-bottom: 2px;
}
/* Rank item — motchill style */
.bp-rank-list { padding: 6px 0; }
.bp-rank-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .15s; text-decoration: none; color: inherit;
}
.bp-rank-item:last-child { border-bottom: none; }
.bp-rank-item:hover { background: rgba(255,255,255,.04); }

/* Số rank to kiểu motchill */
.bp-rank-num {
  font-size: 26px; font-weight: 900;
  width: 28px; flex-shrink: 0; text-align: center;
  line-height: 1; color: var(--muted);
  font-style: italic;
}
.bp-rank-item:nth-child(1) .bp-rank-num { color: #ff6b35; font-size: 30px; }
.bp-rank-item:nth-child(2) .bp-rank-num { color: #b8c0cc; font-size: 28px; }
.bp-rank-item:nth-child(3) .bp-rank-num { color: #cd7f32; font-size: 28px; }

/* Thumb lớn hơn */
.bp-rank-thumb {
  width: 54px; height: 76px;
  border-radius: 6px; overflow: hidden;
  flex-shrink: 0; background: #111;
}
.bp-rank-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}
.bp-rank-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 15px;
}
.bp-rank-info { flex: 1; min-width: 0; }
.bp-rank-name {
  font-size: 13px; font-weight: 600;
  color: var(--text); line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.bp-rank-item:hover .bp-rank-name { color: var(--accent); }
.bp-rank-ep {
  font-size: 11px; font-weight: 600;
  color: var(--accent); margin-bottom: 3px;
}
.bp-rank-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--muted);
}
.bp-rank-meta i { font-size: 9px; }
.bp-rank-qual {
  background: rgba(255,165,2,.12);
  border: 1px solid rgba(255,165,2,.3);
  border-radius: 3px; padding: 1px 5px;
  font-size: 9px; font-weight: 800;
  color: var(--yellow); letter-spacing: .3px;
}

/* Tag cloud */
.bp-tags {
  padding: 12px 14px;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.bp-tag {
  display: inline-block;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(255,255,255,.05);

/* ══ TOP IMDB SIDEBAR ══ */
.bp-imdb-list { padding: 4px 0; }
.bp-imdb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.bp-imdb-item:last-child { border-bottom: none; }
.bp-imdb-item:hover { background: rgba(255,255,255,.04); }
.bp-imdb-num {
  font-size: 22px; font-weight: 900; font-style: italic;
  width: 26px; flex-shrink: 0; text-align: center; line-height: 1;
  color: var(--muted);
}
.bp-imdb-item:nth-child(1) .bp-imdb-num { color: #ff6b35; font-size: 26px; }
.bp-imdb-item:nth-child(2) .bp-imdb-num { color: #b8c0cc; font-size: 24px; }
.bp-imdb-item:nth-child(3) .bp-imdb-num { color: #cd7f32; font-size: 24px; }
.bp-imdb-thumb {
  width: 52px; height: 74px;
  border-radius: 5px; overflow: hidden; flex-shrink: 0; background: #111;
}
.bp-imdb-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bp-imdb-info { flex: 1; min-width: 0; }
.bp-imdb-name {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  line-height: 1.35; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s;
}
.bp-imdb-item:hover .bp-imdb-name { color: var(--accent); }
.bp-imdb-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bp-imdb-badge {
  font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  background: #f5c518; color: #000; letter-spacing: .3px;
}
.bp-imdb-stars { color: #f5c518; font-size: 10px; }
.bp-imdb-score { font-size: 11px; font-weight: 700; color: #f5c518; }
.bp-imdb-votes { font-size: 10px; color: var(--muted); }
.bp-imdb-votes i { font-size: 9px; }
  border: 1px solid var(--border);
  font-size: 11.5px; color: var(--sub);
  transition: all .15s;
}
.bp-tag:hover {
  background: rgba(0,200,83,.1);
  border-color: rgba(0,200,83,.4);
  color: var(--accent);
}

/* ════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ════════════════════════════════ */

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .bp-grid-5 { grid-template-columns: repeat(4, 1fr); }
  .bp-two-col { grid-template-columns: 1fr 240px; gap: 16px; }
}

/* ── Tablet nhỏ ≤ 900px ── */
@media (max-width: 900px) {
  .bp-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .bp-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .bp-two-col { grid-template-columns: 1fr; }
  .bp-two-col-side { position: static; margin-top: 4px; }

  /* Featured: 5 poster → scroll ngang */
  .bp-feat-row {
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
    border-radius: var(--r);
  }
  .bp-feat-item {
    flex: 0 0 38% !important;
    min-width: 120px;
    aspect-ratio: 2/3;
  }
  .bp-feat-item:hover { flex: 0 0 38% !important; }

  /* Ranking bên dưới: 5 → scroll ngang */
  .bp-feat-ranks {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    gap: 0;
  }
  .bp-feat-ranks::-webkit-scrollbar { display: none; }
  .bp-feat-rank { flex: 0 0 40%; min-width: 120px; }
  .bp-feat-num { font-size: 28px !important; }
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
  .bp-wrap { padding: 0 10px; }

  /* Featured section */
  .bp-feat-item { flex: 0 0 45% !important; min-width: 110px; }
  .bp-feat-rank { flex: 0 0 50%; min-width: 130px; }
  .bp-feat-badge { font-size: 9px !important; padding: 3px 9px !important; }

  /* Grids */
  .bp-grid-5,
  .bp-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Section headings */
  .bp-sec-title { font-size: 14px; }
  .bp-more { font-size: 12px; }

  /* Section spacing */
  .bp-section-full { padding-bottom: 20px; }
  .bp-section-2col { margin-bottom: 20px; }
  /* Card title font smaller */
  .bp-grid .item-movie h2.title-movie,
  .bp-grid .item-movie .title-movie,
  .bp-grid .item-movie .name-movie {
    font-size: 11px !important;
    padding: 7px 8px 9px !important;
  }

  /* Sidebar rank thumb nhỏ hơn */
  .bp-rank-thumb { width: 40px !important; height: 56px !important; }
  .bp-rank-name { font-size: 11.5px !important; }
  .bp-rank-num { font-size: 16px !important; width: 18px !important; }

  /* Tag cloud */
  .bp-tag { font-size: 10.5px; padding: 3px 8px; }
}

/* ── Mobile nhỏ ≤ 380px ── */
@media (max-width: 380px) {
  .bp-grid-5,
  .bp-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .bp-feat-item { flex: 0 0 55% !important; }
  .bp-feat-rank { flex: 0 0 60%; }
}

/* Scrollbar featured row */
.bp-feat-row::-webkit-scrollbar { height: 3px; }
.bp-feat-row::-webkit-scrollbar-track { background: transparent; }
.bp-feat-row::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }



/* ── Top TMDB Sidebar ── */
.bp-tmdb-list { padding: 4px 0; }
.bp-tmdb-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
    text-decoration: none;
}
.bp-tmdb-item:last-child { border-bottom: none; }
.bp-tmdb-item:hover { background: rgba(255,255,255,.04); }
.bp-tmdb-num {
    font-size: 17px; font-weight: 900;
    width: 22px; flex-shrink: 0;
    text-align: center; color: var(--muted); line-height: 1;
}
.bp-tmdb-item:nth-child(1) .bp-tmdb-num { color: var(--orange); }
.bp-tmdb-item:nth-child(2) .bp-tmdb-num { color: #b8c0cc; }
.bp-tmdb-item:nth-child(3) .bp-tmdb-num { color: #cd7f32; }
.bp-tmdb-thumb {
    width: 44px; height: 62px;
    border-radius: 4px; overflow: hidden;
    flex-shrink: 0; background: #111;
}
.bp-tmdb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bp-tmdb-info { flex: 1; min-width: 0; }
.bp-tmdb-name {
    font-size: 12px; font-weight: 600;
    color: var(--text); line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.bp-tmdb-item:hover .bp-tmdb-name { color: var(--accent); }
.bp-tmdb-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:2px; }
.bp-tmdb-badge { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; background:#01b4e4; color:#fff; }
.bp-tmdb-score { font-size:11px; font-weight:700; color:var(--text); }
.bp-tmdb-votes { font-size:10px; color:var(--muted); }
.bp-tmdb-qual { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; background:rgba(255,165,2,.15); border:1px solid rgba(255,165,2,.3); color:var(--yellow); }

/* Section heading — gạch bằng chữ */
.bp-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.07); }
.bp-sec-title { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; color:var(--text); letter-spacing:-.2px; line-height:1; padding-bottom:10px; margin-bottom:0; border-bottom:2px solid var(--accent); }
.bp-sec-title .bar { width:4px; height:20px; background:var(--accent); border-radius:2px; flex-shrink:0; }
.bp-sec-title i { font-size:14px; }
.bp-more { font-size:13px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:5px; transition:gap .2s; white-space:nowrap; flex-shrink:0; padding-bottom:10px; }
.bp-more:hover { gap:8px; } .bp-more i { font-size:10px; }
@media(max-width:640px){.bp-sec-title{font-size:15px;}}



/* ═══ Khoi CSS thu 2 (rieng) ═══ */

.bp-hero {
  position: relative;
  background: #000;
  margin-bottom: 32px;
  /* Full bleed — phá hoàn toàn mọi padding/margin cha */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Không overflow hidden ở đây — để thumb nav và progress hiện đủ */
}
.bp-hero .swiper { width: 100%; }
.bp-hero-slide {
  position: relative;
  width: 100%;
/* Fix 18/09/2026 lan 6: -182px hoi thua, de lo chu "Phim Moi Cap Nhat"
   cua section duoi len ngay mep hero. Giam do tru xuong -120px (tang
   chieu cao hero them ~60px) de hero phu du, khong lo section ke tiep. */
  height: calc(100vh - 120px);
  min-height: 600px;
  overflow: hidden;
  cursor: pointer;
}
@media(max-width:768px) {
  .bp-hero-slide {
    height: auto;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    background: #000;
  }
  .bp-hero-slide::after { display: none; }
}

/* Background - sang net, tran full-width/full-height, khong xen mat
   nhan vat (position: center top). Fix 18/09/2026 theo dac ta ChoPhim
   chinh xac: bo filter lam toi/giam sat de anh giu nguyen do net,
   phan sang toi da phan lam boi overlay gradient rieng ben duoi. */
.bp-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center 20%;
  transform: scale(1.05);
  transition: transform 6s ease;
}
@media(max-width:768px) {
  .bp-hero-bg {
    position: relative;
    height: 55vw;
    min-height: 180px;
    width: 100%;
    flex-shrink: 0;
  }
}
.swiper-slide-active .bp-hero-bg { transform: scale(1); }

/* Gradient overlay - 2 lop dung theo dac ta ChoPhim chinh xac (anh da
   xac nhan truc tiep 2 cong thuc nay). Muc tieu: nua trai (vung chu)
   toi de doc ro, nua phai giu nguyen sang/net cho nhan vat; chan
   banner vuot den nhe de an khop voi phan duoi trang. Fix 18/09/2026,
   thay the toan bo overlay 3 lop cu (bo radial vignette + lop "to top"
   dam truoc day). */
/* Fix 18/09/2026 lan 7: 3 lop overlay theo cong thuc ChoPhim (anh
   cung cap qua DevTools). Dot-grid can background-size RIENG (3px 3px)
   khac voi 2 lop gradient con lai (mac dinh cover) nen KHONG THE gop
   chung 1 khai bao background - tach thanh ::before (dot-grid) va
   ::after (2 gradient: vuot duoi len + ngang cho vung chu, cong radial
   toi goc). Mau nen dung dung tong toi ChoPhim: rgb(15,17,26). LUU Y:
   day CHI la lop phu tham my, KHONG lam anh nguon net hon - anh nao
   von da mo (VD do imdbid sai, rot ve KKPhim thumb do phan giai thap)
   van con mo sau lop overlay nay. */
.bp-hero-slide::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(0,0,0,.4) .4px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}
.bp-hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(15,17,26,.85) 0%,
      rgba(15,17,26,.4) 50%,
      transparent 80%
    ),
    linear-gradient(
      to top,
      rgb(15,17,26) 0%,
      transparent 40%
    ),
    radial-gradient(
      transparent 65%,
      rgba(15,17,26,.8) 100%
    );
}
@media(max-width:768px) {
  .bp-hero-slide::before { display: none; }
  .bp-hero-slide::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.1) 0%,
      rgba(0,0,0,.6) 60%,
      rgba(0,0,0,.95) 100%
    );
    height: 55vw; /* chỉ phủ phần ảnh */
  }
}

/* Content */
.bp-hero-content {
  position: absolute;
  bottom: 40px; left: 60px;
  z-index: 2;
  max-width: 560px;
  animation: heroFadeIn .6s ease;
}
@media(max-width:768px) {
  .bp-hero-content {
    position: relative;
    bottom: auto; left: auto; right: auto;
    padding: 16px 20px 0;
    text-align: center;
    max-width: 100%;
    background: linear-gradient(to bottom, transparent, #000 30%);
    margin-top: -60px;
  }
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bp-hero-subtitle {
  font-size: 13px; color: #00c853; font-weight: 600;
  margin-bottom: 6px; letter-spacing: .5px;
}
/* FIX 15/09/2026: font tieu de mang/thanh lich hon theo dac ta ChoPhim
   (font-weight 300 thay vi 900), tang font-size bu lai do net mong
   hon can kich thuoc lon hon de van noi bat. */
.bp-hero-title {
  font-size: 40px; font-weight: 300; color: #fff;
  line-height: 1.15; margin-bottom: 4px; letter-spacing: .5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
@media(max-width:768px) { .bp-hero-title { font-size: 26px; } }
/* Ten goc/tieng Anh, font nho hon mau xam - theo dac ta ChoPhim */
.bp-hero-original-title {
  font-size: 14px; color: rgba(255,255,255,.55); font-weight: 500;
  margin-bottom: 8px; letter-spacing: .3px;
}
@media(max-width:768px) { .bp-hero-original-title { font-size: 12px; } }
.bp-hero-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
@media(max-width:768px) { .bp-hero-badges { justify-content: center; } }
.bp-hero-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.25);
  color: #fff; background: rgba(255,255,255,.12);
}
.bp-hero-badge.q { background: #00c853; color: #000; border-color: #00c853; }
.bp-hero-badge.y { background: rgba(255,165,2,.15); color: #ffa502; border-color: rgba(255,165,2,.4); }
/* Badge IMDb mau xanh duong dac trung, giong dac ta ChoPhim (khac
   voi mau xanh la --accent cua theme, de phan biet ro rang) */
.bp-hero-badge.imdb {
  background: #01b4e4; color: #fff; border-color: #01b4e4;
}
.bp-hero-badge.imdb b { font-weight: 900; margin-right: 3px; }
/* FIX 15/09/2026: gioi han chieu rong mo ta theo dac ta ChoPhim
   (~45% man hinh), tranh chu tran qua rong tren man hinh lon */
.bp-hero-desc {
  font-size: 13.5px; color: rgba(255,255,255,.75);
  line-height: 1.6; margin-bottom: 14px;
  max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}
@media(max-width:768px) { .bp-hero-desc { display: none; } }
.bp-hero-btns { display: flex; gap: 12px; align-items: center; }
@media(max-width:768px) { .bp-hero-btns { justify-content: center; } }
/* FIX 15/09/2026: thay 2 nut chu nhat (Xem Ngay/Chi tiet) bang 3 nut
   tron icon theo dung dac ta ChoPhim: Play (vang/cam noi bat), Tim
   (yeu thich), Info (chi tiet) - deu nen den mo trong suot tru Play. */
.bp-hero-btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 18px; line-height: 1; text-decoration: none; cursor: pointer;
  border: none; transition: transform .15s, background .15s, opacity .15s;
}
.bp-hero-btn-circle:hover { transform: scale(1.08); }
@media(max-width:768px) { .bp-hero-btn-circle { width: 44px; height: 44px; font-size: 15px; } }
/* Nut Play to hon 2 nut con lai, lam noi bat CTA chinh - dac ta ChoPhim */
.bp-hero-btn-play {
  width: 60px; height: 60px; font-size: 20px;
  background: #ffa502; color: #000;
}
@media(max-width:768px) { .bp-hero-btn-play { width: 50px; height: 50px; font-size: 17px; } }
.bp-hero-btn-play:hover { background: #ffb733; color: #000; }
.bp-hero-btn-fav, .bp-hero-btn-info {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.bp-hero-btn-fav:hover, .bp-hero-btn-info:hover { background: rgba(255,255,255,.25); }
.bp-hero-btn-fav.active { background: rgba(255,77,141,.85); border-color: rgba(255,77,141,.85); }
.bp-hero-btn-fav.active:hover { background: rgba(255,77,141,1); }

/* Thumbnails navigation — chữ nhật landscape kiểu chợphim */
.bp-hero-thumbs {
  position: absolute;
  bottom: 20px; right: 24px;
  z-index: 3;
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
@media(max-width:768px) {
  .bp-hero-thumbs {
    position: relative;
    bottom: auto; right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 3px;
    padding: 10px 12px 8px;
    background: #000;
    scrollbar-width: none;
  }
  .bp-hero-thumbs::-webkit-scrollbar { display: none; }
}
/* FIX 15/09/2026: tran vien lien mach nhu ChoPhim (tham khao qua
   elementchophim.txt: border-2 border-transparent opacity-80
   scale-95 hover:scale-100 hover:opacity-100) - vien mac dinh
   TRONG SUOT (khong phai xam mo luon hien nhu truoc), giam gap tu
   8px xuong 3px de cac thumbnail dinh sat nhau hon, tang opacity
   mac dinh de ro anh hon (khong mo .65 nhu truoc). */
.bp-hero-thumb {
  /* 16:9 landscape — giống chợphim */
  width: 80px; height: 50px;
  border-radius: 5px;
  overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s, opacity .2s;
  flex-shrink: 0;
  opacity: .8;
}
.bp-hero-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.bp-hero-thumb.active {
  border-color: #00c853;
  opacity: 1;
  transform: scale(1.06);
}
.bp-hero-thumb:hover { opacity: 1; transform: scale(1.02); }
@media(max-width:768px) {
  .bp-hero-thumb { width: 64px; height: 40px; }
}

/* Progress bar */
.bp-hero-progress {
  position: absolute; bottom: 0; left: 0;
  height: 3px; background: #00c853;
  z-index: 4; transition: width .1s linear;
}

/* ══════════════════════════════
   TRANSPARENT HEADER — CHỈ TRANG CHỦ
   Fix 18/09/2026 lan 3: Da xac nhan qua DevTools thuc te (khong con
   doan nua) - .site-header-top VA .site-nav TU NO da duoc CSS goc cua
   theme (style.css/main.css) dat san position:fixed (header cao 56px
   top:0, nav cao 46px top:56px). Wrapper .bp-header-fixed-wrap vi vay
   KHONG can va KHONG duoc dat position:fixed nua (neu dat se lam
   offsetHeight cua wrapper = 0 vi con da thoat luong, day chinh la bug
   da gay khoang den o ban truoc). Wrapper chi dung lam diem neo de JS
   gan class 'header-scrolled', roi CSS duoi day ap background truc
   tiep len 2 con that su fixed do.
   .ads-banner-wrap DA CO SAN margin-top:102px tu CSS goc de bu dung
   khoang trong cho header+nav fixed (56+46=102px) - KHONG duoc them
   spacer/padding nao khac o day nua, se gay cong don khoang den.
   ══════════════════════════════ */
.bp-home-transparent-header .site-header-top,
.bp-home-transparent-header .site-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .25s ease, backdrop-filter .25s ease;
}
/* Khi cuon qua threshold (JS toggle class len wrapper cha) - nen toi mo + blur */
.bp-home-transparent-header.header-scrolled .site-header-top,
.bp-home-transparent-header.header-scrolled .site-nav {
  background: rgba(15,17,21,.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.bp-home-transparent-header.header-scrolled .site-header-top {
  border-bottom: 1px solid rgba(255,255,255,.05);
}