/*
Theme Name: VLXVN
Theme URI: https://example.com/nexora
Author: VLXVN
Description: Danh Sách Các Trang Xem Phim Sex Nóng Chọn Lọc Mới Nhất.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: VLXVN
*/

:root {
  --ink: #2a0810;
  --surface: #2c1016;
  --fg: #fff6e8;
  --muted: #e2b9a4;
  --accent: #ffc107;
  --accent-ink: #3a1208;
  --ember: #e10600;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--fg);
  font-family: Outfit, system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}
.wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 680px at 0% -8%, color-mix(in oklab, var(--ember) 88%, transparent), transparent 58%),
    radial-gradient(860px 560px at 100% 6%, color-mix(in oklab, var(--accent) 62%, transparent), transparent 60%),
    radial-gradient(980px 620px at 48% 112%, color-mix(in oklab, var(--ember) 72%, transparent), transparent 70%);
}
.ribbons {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 70%;
}
.ribbon {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 160 980;
  animation: flow 16s linear infinite;
}
.ribbon-a { opacity: 0.45; }
.ribbon-b {
  stroke: var(--ember);
  opacity: 0.55;
  animation-duration: 24s;
  animation-direction: reverse;
}
.floor {
  position: absolute;
  right: -15%;
  bottom: -8%;
  left: -15%;
  height: 58vh;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--accent) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--accent) 16%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(480px) rotateX(68deg);
  transform-origin: center top;
  animation: floor 16s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, transparent 94%);
  opacity: 0.95;
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  z-index: 20;
}
.skip:focus { transform: none; }
.wrap { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.mark {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: Fraunces, serif;
  font-weight: 700;
  flex-shrink: 0;
  animation: pulse 3.2s ease-in-out infinite;
}
.brand .logo {
  display: block;
  width: auto;
  max-width: 180px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand small { display: block; color: var(--muted); }
nav { display: flex; gap: 1.25rem; color: var(--muted); }
nav a { text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; transition: color 180ms ease; }
nav a:hover { color: var(--accent); }
.hero { padding: 4.5rem 0 2rem; }
h1, h2, h3 { font-family: Fraunces, serif; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); display: grid; }
h1 .lime { color: var(--accent); }
.kicker { color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; }
.lede { max-width: 38rem; color: var(--muted); font-size: 1.125rem; }
.rule {
  height: 2px;
  width: min(16rem, 70%);
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 1.25rem 0;
  transform-origin: left;
  animation: draw 1.1s cubic-bezier(0.2, 0, 0, 1) both;
}
.list { display: grid; gap: 1rem; padding: 0; list-style: none; }
.card {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1.75rem;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, color-mix(in oklab, var(--accent) 28%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 18px 40px color-mix(in oklab, #000 35%, transparent);
}
.card:hover::after { transform: translateX(120%); }
.rank { font-family: Fraunces, serif; font-size: 2.4rem; color: var(--accent); margin: 0; }
.muted { color: var(--muted); }
.btn, button.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 500;
  border: 0;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 200ms ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, #fff 55%, transparent) 50%, transparent 80%);
  transform: translateX(-130%);
}
.btn:hover { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent); }
.btn:hover::before { animation: sheen 700ms ease; }
.btn:active { scale: 0.96; }
.rise {
  opacity: 0;
  animation: rise 700ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: var(--d, 0ms);
}
.steps { display: grid; gap: 1rem; }
.faq details { background: var(--surface); border-radius: 1.25rem; padding: 1rem 1.2rem; border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); }
.faq summary { cursor: pointer; }
.site-footer { border-top: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); padding: 2rem 0; color: var(--muted); }
.empty { padding: 2rem; border: 1px dashed color-mix(in oklab, var(--fg) 25%, transparent); border-radius: 1.75rem; color: var(--muted); }
@keyframes flow { to { stroke-dashoffset: -1140; } }
@keyframes floor { to { background-position: 0 64px; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sheen { to { transform: translateX(130%); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@media (min-width: 800px) {
  .card { grid-template-columns: auto 1fr auto; align-items: center; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 799px) { nav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ribbon, .floor, .rule, .rise, .mark { animation: none; }
  .rise { opacity: 1; transform: none; filter: none; }
  .card, .btn { transition: none; }
}