:root { color-scheme: dark; font-family: "Noto Sans Khmer", system-ui, sans-serif; background: #08111f; color: #e7eefb; }
* { box-sizing: border-box; } body { margin: 0; } a { color: inherit; } .wrap { width: min(1120px, calc(100% - 32px)); margin: auto; }
header { border-bottom: 1px solid #243247; background: #0b1627; } nav { min-height: 64px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand { color:#fff; font-weight:800; text-decoration:none; font-size:1.2rem; } nav ul { display:flex; list-style:none; padding:0; gap:18px; } nav a { text-decoration:none; color:#bfdbfe; }
main { min-height: calc(100vh - 170px); padding: 44px 0 64px; } .eyebrow { color:#fbbf24; font-weight:700; } h1 { font-size:clamp(2rem, 5vw, 3.6rem); max-width: 760px; margin: 10px 0; } h2 { margin-top: 34px; } .lead { color:#c6d2e3; font-size:1.1rem; max-width: 720px; line-height:1.8; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:28px; }
.card { border:1px solid #263851; background:#101d31; overflow:hidden; border-radius:14px; text-decoration:none; transition:transform .15s; } .card:hover { transform:translateY(-3px); } .card img { display:block; width:100%; aspect-ratio: 9/16; object-fit:cover; object-position:center; background:#17243a; } .card div { padding:16px; } .card h3 { margin:0 0 8px; } .card p { margin:0; color:#bcc9dc; line-height:1.6; }
.album-meta { color:#fbbf24 !important; font-weight:700; margin-top:12px !important; } .album-page { display:grid; grid-template-columns:minmax(180px,280px) minmax(0,1fr); gap:28px; align-items:center; max-width:800px; } .album-poster { width:100%; aspect-ratio:9/16; object-fit:cover; object-position:center; border-radius:14px; border:1px solid #263851; background:#17243a; } .episode-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:20px; } .episode-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px; border:1px solid #263851; background:#101d31; border-radius:12px; text-decoration:none; font-weight:700; } .episode-row:hover { border-color:#fbbf24; }
.watch-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(260px,1fr); gap:24px; } .player { background:#020617; border-radius:14px; overflow:hidden; aspect-ratio:16/9; } video { width:100%; height:100%; background:#000; } .panel { background:#101d31; border:1px solid #263851; border-radius:14px; padding:20px; } .ad-slot { min-height:120px; margin:26px 0; display:flex; align-items:center; justify-content:center; border:1px dashed #3c5476; color:#9fb1ca; border-radius:10px; font-size:.9rem; } .small { color:#aebed4; line-height:1.7; } .notice { border-left:4px solid #fbbf24; padding:14px 18px; background:#1f2937; border-radius:4px; }
footer { border-top:1px solid #243247; color:#aebed4; padding:25px 0; font-size:.9rem; } footer .wrap { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; } .prose { max-width:760px; line-height:1.85; } .prose h1 { font-size:2.1rem; } @media (max-width:760px) { .watch-layout, .album-page { grid-template-columns:1fr; } .album-poster { max-width:280px; } nav { padding:10px 0; align-items:flex-start; } nav ul{ gap:12px; flex-wrap:wrap; justify-content:flex-end; } }