/**
 * Neubrutalism theme layer — overrides HeroUI semantic tokens after style.css.
 * References: ui-ux-pro-max (styles.csv Neubrutalism + typography Neubrutalist Bold).
 */
@import url("https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@400;600;700;800;900&display=swap");

:root {
  --font-sans: "Lexend Mega", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Lexend Mega", ui-sans-serif, system-ui, sans-serif;
  --neo-outline: #000000;
  --neo-shadow-shift: 5px;
}

/* Notch / home indicator — không làm lệch layout desktop */
nav.sticky > header {
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
}

#menu-mobile {
  box-sizing: border-box;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  height: calc(100vh - var(--navbar-height, 4rem));
  height: calc(100dvh - var(--navbar-height, 4rem));
  height: calc(100svh - var(--navbar-height, 4rem));
}

/* Single typography source: Lexend Mega from the import above. */
.neo-root,
.neo-root :where(:not([class^="icon-"]):not([class*=" icon-"])) {
  font-family: "Lexend Mega", ui-sans-serif, system-ui, sans-serif !important;
}

main .text-2xl.font-bold,
main .text-xl.font-bold,
main h1,
main h2,
main h3,
.neo-api-doc h1,
.neo-api-doc h2,
.neo-api-doc h3,
.breadcrumb,
#page-title,
.neo-section-title {
  font-family: "Lexend Mega", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ——— Light ——— */
.light,
:root,
[data-theme="light"] {
  color-scheme: light;

  --heroui-background: 52 100% 94%;
  --heroui-foreground: 0 0% 7%;
  --heroui-foreground-50: 0 0% 98%;
  --heroui-foreground-100: 52 30% 12%;
  --heroui-foreground-200: 0 0% 12%;
  --heroui-foreground-300: 0 0% 18%;
  --heroui-foreground-400: 0 0% 28%;
  --heroui-foreground-500: 0 0% 38%;
  --heroui-foreground-600: 0 0% 28%;
  --heroui-foreground-700: 0 0% 18%;
  --heroui-foreground-800: 0 0% 12%;
  --heroui-foreground-900: 0 0% 7%;

  --heroui-divider: 0 0% 0%;
  --heroui-divider-opacity: 0.35;
  --heroui-border: 0 0% 0%;
  --heroui-focus: 210 100% 45%;

  --heroui-content1: 0 0% 100%;
  --heroui-content1-foreground: 0 0% 7%;
  --heroui-content2: 48 100% 88%;
  --heroui-content2-foreground: 0 0% 10%;
  --heroui-content3: 172 55% 82%;
  --heroui-content3-foreground: 0 0% 12%;
  --heroui-content4: 0 100% 88%;
  --heroui-content4-foreground: 0 0% 12%;

  --heroui-default-50: 52 100% 97%;
  --heroui-default-100: 52 80% 92%;
  --heroui-default-200: 48 60% 85%;
  --heroui-default-300: 45 50% 78%;
  --heroui-default-400: 0 0% 45%;
  --heroui-default-500: 0 0% 38%;
  --heroui-default-600: 0 0% 28%;
  --heroui-default-700: 0 0% 18%;
  --heroui-default-800: 0 0% 12%;
  --heroui-default-900: 0 0% 7%;
  --heroui-default: 48 55% 88%;
  --heroui-default-foreground: 0 0% 7%;

  --heroui-primary-50: 210 100% 96%;
  --heroui-primary-100: 210 100% 88%;
  --heroui-primary-200: 210 100% 78%;
  --heroui-primary-300: 210 100% 68%;
  --heroui-primary-400: 210 100% 58%;
  --heroui-primary-500: 207 90% 54%;
  --heroui-primary-600: 210 85% 44%;
  --heroui-primary-700: 210 80% 36%;
  --heroui-primary-800: 210 75% 28%;
  --heroui-primary-900: 210 70% 18%;
  --heroui-primary: 207 90% 48%;
  --heroui-primary-foreground: 0 0% 100%;

  --heroui-secondary-50: 0 100% 96%;
  --heroui-secondary-100: 0 100% 90%;
  --heroui-secondary-200: 0 100% 80%;
  --heroui-secondary-300: 0 100% 72%;
  --heroui-secondary-400: 0 100% 65%;
  --heroui-secondary-500: 0 100% 60%;
  --heroui-secondary-600: 0 90% 52%;
  --heroui-secondary-700: 0 80% 44%;
  --heroui-secondary-800: 0 70% 36%;
  --heroui-secondary-900: 0 60% 28%;
  --heroui-secondary: 0 100% 62%;
  --heroui-secondary-foreground: 0 0% 100%;

  --heroui-success-400: 168 70% 42%;
  --heroui-success-500: 168 76% 42%;
  --heroui-success: 168 76% 38%;
  --heroui-success-foreground: 0 0% 100%;

  --heroui-warning: 45 100% 52%;
  --heroui-warning-foreground: 0 0% 7%;

  --heroui-danger: 0 84% 48%;
  --heroui-danger-foreground: 0 0% 100%;

  --heroui-box-shadow-small: 3px 3px 0 0 var(--neo-outline);
  --heroui-box-shadow-medium: 5px 5px 0 0 var(--neo-outline);
  --heroui-box-shadow-large: 8px 8px 0 0 var(--neo-outline);

  --heroui-radius-small: 6px;
  --heroui-radius-medium: 8px;
  --heroui-radius-large: 10px;

  --heroui-border-width-small: 2px;
  --heroui-border-width-medium: 3px;
  --heroui-border-width-large: 4px;
}

/* ——— Dark ——— */
.dark,
[data-theme="dark"] {
  color-scheme: dark;

  --heroui-background: 0 0% 6%;
  --heroui-foreground: 52 100% 96%;
  --heroui-foreground-50: 0 0% 8%;
  --heroui-foreground-100: 0 0% 12%;
  --heroui-foreground-200: 0 0% 18%;
  --heroui-foreground-300: 0 0% 28%;
  --heroui-foreground-400: 52 20% 70%;
  --heroui-foreground-500: 52 15% 75%;
  --heroui-foreground-600: 52 25% 82%;
  --heroui-foreground-700: 52 40% 88%;
  --heroui-foreground-800: 52 60% 93%;
  --heroui-foreground-900: 52 100% 97%;

  --heroui-divider: 0 0% 100%;
  --heroui-divider-opacity: 0.25;
  --heroui-border: 52 100% 96%;
  --heroui-focus: 48 100% 58%;

  --heroui-content1: 0 0% 11%;
  --heroui-content1-foreground: 52 100% 96%;
  --heroui-content2: 0 0% 15%;
  --heroui-content2-foreground: 52 80% 92%;
  --heroui-content3: 210 40% 18%;
  --heroui-content3-foreground: 52 100% 95%;
  --heroui-content4: 0 0% 18%;
  --heroui-content4-foreground: 52 90% 94%;

  --heroui-default-50: 0 0% 10%;
  --heroui-default-100: 0 0% 14%;
  --heroui-default-200: 0 0% 22%;
  --heroui-default-300: 0 0% 32%;
  --heroui-default-400: 52 15% 65%;
  --heroui-default-500: 52 20% 72%;
  --heroui-default-600: 52 30% 82%;
  --heroui-default-700: 52 45% 88%;
  --heroui-default-800: 52 60% 93%;
  --heroui-default-900: 52 100% 97%;
  --heroui-default: 0 0% 22%;
  --heroui-default-foreground: 52 100% 96%;

  --heroui-primary-50: 210 100% 12%;
  --heroui-primary-100: 210 100% 22%;
  --heroui-primary-200: 210 100% 35%;
  --heroui-primary-300: 210 100% 48%;
  --heroui-primary-400: 207 95% 58%;
  --heroui-primary-500: 210 100% 62%;
  --heroui-primary-600: 210 90% 70%;
  --heroui-primary-700: 210 80% 78%;
  --heroui-primary-800: 210 70% 86%;
  --heroui-primary-900: 210 60% 92%;
  --heroui-primary: 207 95% 58%;
  --heroui-primary-foreground: 0 0% 7%;

  --heroui-secondary-50: 45 80% 12%;
  --heroui-secondary-100: 45 90% 22%;
  --heroui-secondary-200: 45 95% 35%;
  --heroui-secondary-300: 45 100% 48%;
  --heroui-secondary-400: 48 100% 55%;
  --heroui-secondary-500: 48 100% 58%;
  --heroui-secondary-600: 48 100% 68%;
  --heroui-secondary-700: 48 90% 76%;
  --heroui-secondary-800: 48 80% 84%;
  --heroui-secondary-900: 48 70% 92%;
  --heroui-secondary: 48 100% 58%;
  --heroui-secondary-foreground: 0 0% 7%;

  --heroui-success: 168 76% 48%;
  --heroui-success-foreground: 0 0% 7%;

  --heroui-warning: 45 100% 55%;
  --heroui-warning-foreground: 0 0% 7%;

  --heroui-danger: 0 90% 58%;
  --heroui-danger-foreground: 0 0% 7%;

  --heroui-box-shadow-small: 3px 3px 0 0 var(--neo-outline);
  --heroui-box-shadow-medium: 5px 5px 0 0 var(--neo-outline);
  --heroui-box-shadow-large: 8px 8px 0 0 var(--neo-outline);

  --heroui-radius-small: 6px;
  --heroui-radius-medium: 8px;
  --heroui-radius-large: 10px;

  --heroui-border-width-small: 2px;
  --heroui-border-width-medium: 3px;
  --heroui-border-width-large: 4px;

  /* Viền / bóng cứng: xám lạnh — tránh vàng chói trên nền tối */
  --neo-outline: #94a3b8;
}

/* Top bar: solid, no glass blur */
nav.sticky {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 3px solid var(--neo-outline) !important;
  box-shadow: 0 var(--neo-shadow-shift) 0 0 var(--neo-outline) !important;
}

/* Flatten soft gradients → solid neo blocks */
main .bg-gradient-to-r.from-content2.to-content3 {
  background-image: none !important;
  background-color: hsl(var(--heroui-content2) / 1) !important;
}

/* ——— Đồng bộ Neo toàn bộ Blade (ophim18) ——— */

/* Card ảnh: gradient tối → một lớp đen phẳng (dark) */
.dark .dark\:bg-gradient-to-t {
  background-image: none !important;
  background-color: rgb(0 0 0 / 0.48) !important;
}

/* Tiêu đề: neo chữ thay drop-shadow mềm */
main .drop-shadow-lg {
  filter: none !important;
  text-shadow: 2px 2px 0 var(--neo-outline);
}

/* Thẻ hero đầy độ đậm (bỏ “mờ” glass) */
main .rounded-2xl.shadow-lg.opacity-90,
main .rounded-2xl.shadow-lg.opacity-80 {
  opacity: 1 !important;
}

/* Chip pastel Tailwind → neo + token màu */
main .bg-green-100,
main .bg-purple-100 {
  border: 2px solid var(--neo-outline) !important;
  box-shadow: 2px 2px 0 var(--neo-outline) !important;
}

.light main .bg-green-100,
:root main .bg-green-100,
[data-theme="light"] main .bg-green-100 {
  background-color: hsl(var(--heroui-success) / 0.24) !important;
}

.light main .bg-purple-100,
:root main .bg-purple-100,
[data-theme="light"] main .bg-purple-100 {
  background-color: hsl(var(--heroui-secondary) / 0.24) !important;
}

.dark main .bg-green-100,
.dark main .bg-purple-100 {
  background-color: hsl(var(--heroui-content2) / 1) !important;
}

main .bg-green-100.rounded-full,
main .bg-purple-100.rounded-full {
  border-radius: var(--heroui-radius-small) !important;
}

/* Drawer menu + overlay tìm kiếm: không blur */
#menu-mobile {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: hsl(var(--heroui-background) / 0.97) !important;
}

#modal-search .backdrop-blur-md {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgb(0 0 0 / 0.55) !important;
}

.dark #modal-search .backdrop-blur-md {
  background-color: rgb(0 0 0 / 0.72) !important;
}

/* Breadcrumb (catalog / single / api-document) */
ol[data-slot="list"].rounded-small.border-default-200 {
  border-width: 2px !important;
  border-color: var(--neo-outline) !important;
  box-shadow: var(--heroui-box-shadow-small) !important;
}

/* Phân trang */
nav[aria-label="pagination navigation"] [data-slot="wrapper"] > li {
  border: 2px solid var(--neo-outline) !important;
  box-shadow: 2px 2px 0 var(--neo-outline) !important;
}

nav[aria-label="pagination navigation"] [data-slot="wrapper"] > li a {
  cursor: pointer;
}

/* Lưới poster (home sections + related) */
#video-list .video-item,
.neo-video-grid .video-item {
  border: 2px solid var(--neo-outline);
  border-radius: var(--heroui-radius-medium);
  box-shadow: var(--heroui-box-shadow-small);
  overflow: hidden;
  background: hsl(var(--heroui-content1) / 1);
}

#video-list .video-item a,
.neo-video-grid .video-item a {
  cursor: pointer;
}

.neo-video-grid .video-name a {
  cursor: pointer;
  font-weight: 600;
}

.neo-video-grid .video-image {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.neo-video-grid .ribbon {
  font-family: "Lexend Mega", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--neo-outline);
  box-shadow: 2px 2px 0 var(--neo-outline);
  border-radius: var(--heroui-radius-small);
}

/* “Xem thêm” danh sách cũ */
.neo-pagenavi {
  margin-top: 1rem;
}

.neo-pagenavi a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-family: "Lexend Mega", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  color: hsl(var(--heroui-primary-foreground));
  background: hsl(var(--heroui-primary) / 1);
  border: 2px solid var(--neo-outline);
  border-radius: var(--heroui-radius-small);
  box-shadow: var(--heroui-box-shadow-small);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.neo-pagenavi a:hover {
  transform: translate(-1px, -1px);
}

/* Overlay modal đồng nhất (tìm kiếm / lọc / nguồn / tập) */
.neo-modal-dim {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgb(0 0 0 / 0.55) !important;
}

.dark .neo-modal-dim {
  background-color: rgb(0 0 0 / 0.72) !important;
}

/* Thẻ info / diễn viên trang chi tiết */
main .neo-page .bg-content1.rounded-lg.border {
  border-width: 2px !important;
  border-color: var(--neo-outline) !important;
  box-shadow: var(--heroui-box-shadow-small) !important;
}

/* Nút CTA shadow-lg */
main button.shadow-lg {
  box-shadow: var(--heroui-box-shadow-medium) !important;
  border: 2px solid var(--neo-outline) !important;
}

/* Tab server (modal) */
#server-tab-list,
main [data-slot="tabList"].bg-default-100 {
  border: 2px solid var(--neo-outline) !important;
  box-shadow: var(--heroui-box-shadow-small) !important;
}

/* Tài liệu API */
.neo-api-doc pre,
.neo-api-doc .rounded-small.border-default-200,
.neo-api-doc [class*="font-mono"][class*="rounded"] {
  border: 2px solid var(--neo-outline) !important;
  box-shadow: var(--heroui-box-shadow-small) !important;
}

.neo-api-doc table {
  border: 2px solid var(--neo-outline) !important;
  box-shadow: var(--heroui-box-shadow-small) !important;
}

.neo-api-doc a.cursor-pointer {
  cursor: pointer;
}

/* Chip lọc (catalog modal): bóng cứng */
#modal-filter div.inline-flex.items-center.justify-between.h-7.text-small.rounded-small {
  border-width: 2px !important;
  box-shadow: 2px 2px 0 var(--neo-outline) !important;
}

/* Lưới poster: grid responsive */
#video-list.neo-video-grid,
.container.neo-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

@media (max-width: 639px) {
  #video-list.neo-video-grid,
  .container.neo-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Table / panels using shadow-small */
main .rounded-large.shadow-small {
  border: 2px solid var(--neo-outline);
}

/* Neo lift on prominent cards */
main .rounded-2xl.shadow-lg {
  border: 3px solid var(--neo-outline);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: default;
}

main a .rounded-2xl.shadow-lg,
main .rounded-2xl.shadow-lg:has(a) {
  cursor: pointer;
}

/* Chỉ nâng thẻ khi có chuột thật — tránh “dính” hover trên cảm ứng */
@media (hover: hover) and (pointer: fine) {
  main a:hover .rounded-2xl.shadow-lg,
  main .rounded-2xl.shadow-lg:hover {
    transform: translate(-2px, -2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  main .rounded-2xl.shadow-lg {
    transition: none;
  }

  main a:hover .rounded-2xl.shadow-lg,
  main .rounded-2xl.shadow-lg:hover {
    transform: none;
  }
}

/* ——— Mobile / nhỏ: bóng và viền gọn hơn, tránh tràn ngang ——— */
@media (max-width: 639px) {
  html {
    overflow-x: hidden;
  }

  body,
  main,
  .neo-home-hero {
    overflow-x: clip;
  }

  :root,
  .light,
  [data-theme="light"] {
    --neo-shadow-shift: 3px;
    --heroui-box-shadow-small: 2px 2px 0 0 var(--neo-outline);
    --heroui-box-shadow-medium: 3px 3px 0 0 var(--neo-outline);
    --heroui-box-shadow-large: 4px 4px 0 0 var(--neo-outline);
    --heroui-radius-small: 5px;
    --heroui-radius-medium: 6px;
    --heroui-radius-large: 8px;
  }

  .dark,
  [data-theme="dark"] {
    --heroui-box-shadow-small: 2px 2px 0 0 var(--neo-outline);
    --heroui-box-shadow-medium: 3px 3px 0 0 var(--neo-outline);
    --heroui-box-shadow-large: 4px 4px 0 0 var(--neo-outline);
  }

  nav.sticky {
    box-shadow: 0 var(--neo-shadow-shift) 0 0 var(--neo-outline) !important;
  }

  main .rounded-2xl.shadow-lg {
    border-width: 2px;
  }

  main .rounded-large.shadow-small {
    border-width: 2px;
  }

  /* Giảm nhẹ chữ hero trên mobile */
  main .text-2xl.font-bold {
    letter-spacing: -0.04em;
    line-height: 1.2;
  }

  /* Home hero: tránh tràn ngang ở cụm stats/link */
  .neo-home-hero-meta,
  .neo-home-hero-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.4rem;
    column-gap: 0.6rem;
  }

  .neo-home-hero-meta > [role="separator"],
  .neo-home-hero-links > [role="separator"] {
    display: none !important;
  }

  .neo-home-hero-links > a {
    min-width: 0;
    max-width: 100%;
  }

  .neo-home-telegram-link {
    margin-left: 0 !important;
  }

  .neo-home-hero .text-sm {
    overflow-wrap: anywhere;
  }
}